将echarts饼图加到vue文件中

要将 ECharts 饼图加入到 Vue 文件中，需要先安装 ECharts 库，并在 Vue 文件中引入 ECharts 库。

1. 安装 ECharts 库：

npm install echarts --save

2. 在 Vue 文件中引入 ECharts 库：

import echarts from 'echarts'

3. 创建一个 ECharts 饼图实例，并设置其相关属性：

// 在 Vue 的 methods 中添加如下代码
drawPieChart() {
  const chart = echarts.init(document.getElementById('pie-chart'));
  chart.setOption({
    title: {
      text: '饼图',
      left: 'center',
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)',
    },
    legend: {
      orient: 'vertical',
      left: 10,
      data: ['A', 'B', 'C', 'D', 'E'],
    },
    series: [
      {
        name: '数据来源',
        type: 'pie',
        radius: ['50%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center',
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '30',
            fontWeight: 'bold',
          },
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: 335, name: 'A' },
          { value: 310, name: 'B' },
          { value: 234, name: 'C' },
          { value: 135, name: 'D' },
          { value: 1548, name: 'E' },
        ],
      },
    ],
  });
},

4. 在 Vue 文件的 mounted 钩子函数中调用该方法：

mounted() {
  this.drawPieChart();
},

5. 在 Vue 文件中添加一个 `<div>` 元素，用于渲染 ECharts 饼图：

<div id="pie-chart" style="width: 600px; height: 400px;"></div>

以上步骤完成后，即可在 Vue 文件中显示 ECharts 饼图。