vue2+ts+vue-echarts 画环形图

小咪咪 2022-11-12 08:25 340阅读 0赞

#### 注意一下 ####

各位看清一下，是`vue-echarts`呀。这里是个坑，因为还是有v-echarts、vue-echarts-ts 等等，他们竟然不是一个东西。

#### 使用过程 ####

*  安装包

yarn add echarts vue-echarts
    # 当运行的时候，会提示你缺少@vue/composition-api
    yarn add @vue/composition-api
    yarn add default-passive-events

*  导入包

import VueECharts from 'vue-echarts'
    import "default-passive-events";

`import的时候可能会报错`

#shim-vue.d.ts 添加如下内容
    declare module "vue-echarts"

# 全局导入，比较方便，就是导致最后的包比较大
    import "echarts";
    Vue.component("v-chart", VueECharts);

# 部分导入
    import {  use } from "echarts/core";
    import { 
      CanvasRenderer,
      SVGRenderer
    } from 'echarts/renderers'
    import { 
      PieChart
    } from 'echarts/charts'
    import { 
      TitleComponent,
      TooltipComponent,
      LegendComponent
    } from "echarts/components";
    
    use([
      SVGRenderer,
      CanvasRenderer,
      PieChart,
      TitleComponent,
      TooltipComponent,
      LegendComponent
    ]);
    Vue.component("v-chart", VueECharts);

> 全局和部分选择一种即可

*  下面就能愉快的画图了

# html
        <v-chart
        class="pie-shape"
        :option="option"
        autoresize
        ref="pie-acrate"
        />
     # css
     # 要指明高度和宽度，不然会报错，
      .pie-shape{ 
         width: 200px;
         height: 200px;
     }

option = { 
            textStyle: { 
                fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif'
            },
            title: { 
                text: "准确率",
                show: true,
                left: "center"
                
            },
            legend: { 
                show: false
                // orient: "vertical",
                // left: "left",
                // data: ["Direct", "Email", "Ad Networks", "Video Ads", "Search Engines"]
            },
            labelLine: { 
                show: false
            },
            series: [
                { 
                name: "Traffic Sources",
                type: "pie",
                radius: ['80%', '60%'],
                label: { 
                    show: false,
                    position: 'center'
                },
                center: ["50%", "60%"],
                data: [
                { value: xxxxm, name: "xxx"} # 这里要是这种格式的数据， 我就不都列出了
                ],
                emphasis: { 
                    label: { 
                        show: true,
                        fontSize: '20',
                        fontWeight: 'bold',
                        formatter: "{d}% \r\n {b}"
                    },
                    itemStyle: { 
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: "rgba(0, 0, 0, 0.5)"
                    }
                }
                    }
                ]
            }

最后看一下效果  
![在这里插入图片描述][20210323113137568.png]

[20210323113137568.png]: /images/20221022/aa53032a4d9146baaf6ff0581fe4c594.png