vue2+ts+vue-echarts 画环形图

注意一下

各位看清一下，是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)"
                }
            }
                }
            ]
        }

最后看一下效果