Vue中绘制Echarts饼状图的详细步骤

1、安装 ECharts 首先，你需要在项目中安装 ECharts。你可以通过在终端中运行以下命令来安装 ECharts

npm install echarts --save

2、创建一个 ECharts 实例 在 Vue 组件中，你可以通过引入 ECharts 库，然后在组件中使用 echarts.init() 方法来创建一个 ECharts 实例。这个实例将被用来配置和渲染图表。

import echarts from 'echarts'

export default {
  data() {
    return {
      chart: null,
      chartData: {
        // 这里是你要绘制的饼图数据
      }
    }
  },
  mounted() {
    // 创建一个 ECharts 实例
    this.chart = echarts.init(this.$refs.chart)
    // 在 ECharts 实例中配置图表
    this.chart.setOption(this.getOption())
  },
  methods: {
    getOption() {
      return {
        // 这里是你的 ECharts 配置项
      }
    }
  }
}

3、配置 ECharts 在 getOption 方法中，你可以为饼图配置 ECharts 配置项。例如，你可以设置饼图的颜色、大小、数据等。

methods: {
    getOption() {
      return {
        title: {
          text: '饼图标题',
          subtext: '饼图副标题',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} 
{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 10,
          data: ['数据1', '数据2', '数据3', '数据4', '数据5']
        },
        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: '数据1'},
              {value: 310, name: '数据2'},
              {value: 234, name: '数据3'},
              {value: 135, name: '数据4'},
              {value: 1548, name: '数据5'}
            ]
          }
        ]
      }
    }
  }

4. 在模板中绘制饼图 最后，在 Vue 组件的模板中，你需要添加一个用来呈现饼图的 div 元素，并通过 ref 属性引用它。然后，你可以在模板中使用这个 ref 来调用 ECharts 实例。

5、写法有很多种，附上我的写法

大致效果

如果需要饼图自适应浏览器缩放比例的话，可以参考我的这篇文章 https://blog.csdn.net/qijing19991210/article/details/129379925