vue echarts 饼状图加百分比

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

<script>
import * as echarts from 'echarts';

export default {
  mounted() {
    this.renderPieChart();
  },
  methods: {
    renderPieChart() {
      const chartDom = this.$refs.pieChart;
      const myChart = echarts.init(chartDom);

      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c} ({d}%)'
        },
        series: [
          {
            type: 'pie',
            radius: '50%',
            data: [
              { value: 335, name: 'Category A' },
              { value: 310, name: 'Category B' },
              { value: 234, name: 'Category C' },
              { value: 135, name: 'Category D' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      myChart.setOption(option);
    }
  }
}
</script>

<style>
</style>

在这个示例中，我们在 tooltip 的 formatter 中设置了 {b}: {c} ({d}%)，其中：

• {b} 表示数据项的名称（name）
• {c} 表示数据项的值（value）
• {d} 表示数据项的百分比

这样就能够在饼状图的 tooltip 中显示每个数据项的名称、值和百分比了。

你可以根据自己的需求调整数据、样式和其他配置来定制你的饼状图。