vue echarts 饼状图加百分比

在 Vue 中使用 ECharts 创建饼状图并显示百分比可以通过以下步骤实现：

1. 安装 ECharts 依赖：

npm install echarts --save

2. 在 Vue 组件中引入 ECharts：

import * as echarts from 'echarts';

3. 在组件的模板部分添加一个用于渲染饼状图的容器：

<template>
  <div ref="pieChart" style="width: 400px; height: 400px;"></div>
</template>

4. 在组件的 mounted 钩子中初始化 ECharts 实例并设置饼状图的配置：

export default {
  mounted() {
    const chart = echarts.init(this.$refs.pieChart);
    const option = {
      series: [
        {
          type: 'pie',
          data: [
            { value: 335, name: '直接访问' },
            { value: 310, name: '邮件营销' },
            { value: 234, name: '联盟广告' },
            { value: 135, name: '视频广告' },
            { value: 1548, name: '搜索引擎' }
          ],
          label: {
            show: true,
            formatter: '{b}: {d}%' // 显示百分比
          }
        }
      ]
    };
    chart.setOption(option);
  }
};

这样就会创建一个饼状图，并且每个扇区旁边都显示对应的百分比。