Vue项目ECharts饼图配置：标题图例标签与圆环半径实践

脚本专家

在Vue项目里用ECharts画饼图，和折线图、柱状图最大的区别是不用配置xAxis、yAxis，数据名称和值直接放进series的data里。本文基于ECharts 5.2.1，围绕一个省份院士数量示例，拆解饼图的最小配置、标题与图例、标签格式化、半径控制和圆环图写法，并给出可直接放进Vue单文件组件的实现。

一、安装与引入
通过npm安装ECharts并保存依赖：

2. npm install echarts --save

复制代码

原文示例使用的版本是echarts 5.2.1。页面中全量引入：

2. import * as echarts from 'echarts';

复制代码

这种写法会把ECharts组件整体引入，适合需要快速使用多种图表类型的页面。引入后，图表容器需要有一个确定宽高的DOM节点，初始化时把该节点传给echarts.init。

二、最小饼图配置
饼图只需要series即可成形。type设为pie，data数组中的每个对象包含name和value。value不需要提前换算成百分比，ECharts会根据所有value的总和按比例分配弧度。例如江苏463、浙江395、山东157、广东149、湖南147：

2. const option = {
3.   series: [
4.     {
5.       type: 'pie',
6.       data: [
7.         { value: 463, name: '江苏' },
8.         { value: 395, name: '浙江' },
9.         { value: 157, name: '山东' },
10.         { value: 149, name: '广东' },
11.         { value: 147, name: '湖南' }
12.       ]
13.     }
14.   ]
15. };

复制代码

这个配置已经能画出基本饼图。实际项目中通常还要把图例、标题和标签补上。

三、标题、图例与标签
title.text控制标题文本，left、top、right、bottom调整标题位置，title.textStyle控制标题文字样式。示例把标题放在顶部居中：

2. title: {
3.   text: '国内院士前五省份图示',
4.   top: '0%',
5.   left: 'center'
6. }

复制代码

图例通过legend配置。legend.data对应各扇区名称，right、top等控制图例位置，orient设为vertical时图例纵向排列；默认是横向排列。示例将图例放在右侧偏上位置：

2. legend: {
3.   data: ['江苏', '浙江', '山东', '广东', '湖南'],
4.   right: '10%',
5.   top: '30%',
6.   orient: 'vertical'
7. }

复制代码

饼图的文本标签默认展示，label.show默认为true；折线图和柱状图的文本标签默认不展示。如果想在扇区旁同时显示名称、数值和百分比，可以配置label.formatter。formatter中的{b}表示名称，{c}表示数值，{d}表示百分比：

2. series: [
3.   {
4.     type: 'pie',
5.     label: {
6.       show: true,
7.       formatter: '{b} : {c} ({d}%)'
8.     },
9.     data: [
10.       { value: 463, name: '江苏' },
11.       { value: 395, name: '浙江' },
12.       { value: 157, name: '山东' },
13.       { value: 149, name: '广东' },
14.       { value: 147, name: '湖南' }
15.     ]
16.   }
17. ]

复制代码

这里的formatter只是标签模板，不会改变原始数据，也不会把value改写成百分比；百分比由ECharts根据数据计算后填入{d}。

四、radius控制饼图大小与圆环图
series.radius可以写百分比字符串，也可以写绝对像素数值。写成百分比时，它是相对于容器宽高中较小的一条边计算：容器宽度大于高度时按高度算，高度大于宽度时按宽度算；写成数值时表示绝对像素。示例将半径设为容器较小边的30%：

2. radius: '30%'

复制代码

radius还可以是包含两个元素的数组，前一项是内半径，后一项是外半径。这样画出来的就是圆环图。换言之，饼图可以看作内半径为0的圆环图。示例配置为内半径40%、外半径70%：

2. radius: ['40%', '70%']

复制代码

圆环图不需要额外换图表类型，仍然使用type: pie，只改radius即可。

五、放进Vue单文件组件
下面把上述配置整理成Vue示例。容器通过:style绑定宽高，mounted阶段先整理图例名称，再初始化ECharts，并监听窗口resize调用myChart.resize()，避免容器尺寸变化后图表变形：

2. <template>
3.   <div class='echart' id='mychart' :style='myChartStyle'></div>
4. </template>
6. <script>
7. import * as echarts from 'echarts';
9. export default {
10.   data() {
11.     return {
12.       myChart: {},
13.       pieData: [
14.         { value: 463, name: '江苏' },
15.         { value: 395, name: '浙江' },
16.         { value: 157, name: '山东' },
17.         { value: 149, name: '广东' },
18.         { value: 147, name: '湖南' }
19.       ],
20.       pieName: [],
21.       myChartStyle: { float: 'left', width: '100%', height: '400px' }
22.     };
23.   },
24.   mounted() {
25.     this.initDate();
26.     this.initEcharts();
27.   },
28.   methods: {
29.     initDate() {
30.       for (let i = 0; i < this.pieData.length; i++) {
31.         this.pieName[i] = this.pieData[i].name;
32.       }
33.     },
34.     initEcharts() {
35.       const option = {
36.         legend: {
37.           data: this.pieName,
38.           right: '10%',
39.           top: '30%',
40.           orient: 'vertical'
41.         },
42.         title: {
43.           text: '国内院士前五省份图示',
44.           top: '0%',
45.           left: 'center'
46.         },
47.         series: [
48.           {
49.             type: 'pie',
50.             label: {
51.               show: true,
52.               formatter: '{b} : {c} ({d}%)'
53.             },
54.             radius: '30%',
55.             data: this.pieData
56.           }
57.         ]
58.       };
59.       this.myChart = echarts.init(document.getElementById('mychart'));
60.       this.myChart.setOption(option);
61.       window.addEventListener('resize', () => {
62.         this.myChart.resize();
63.       });
64.     }
65.   }
66. };
67. </script>

复制代码

原文完整示例里还出现了optionFree和this.seriesData，但这段代码最终只调用了setOption(option)，optionFree和seriesData没有参与饼图渲染。复用时可以删掉这些残留片段，减少干扰；同时注意init的目标id要和模板中的容器id一致。

六、适用场景与注意点
这套配置适合业务后台、统计看板中按类别占比展示数据的场景，例如省份分布、渠道来源、状态占比。需要重点关注三点：第一，data里的value保持原始数量，不要手动换算百分比；第二，label.formatter只控制显示格式，{d}由ECharts计算；第三，radius使用百分比时要理解它参照容器短边，容器宽高变化会直接影响饼图大小。按原文示例使用ECharts 5.2.1时，饼图的默认标签显示、legend位置和圆环图写法均可直接沿用。

热心网友7

楼主这篇拆得挺细的，从最小饼图配置讲到标题、图例、标签 formatter、radius 和圆环图，层次很清楚，尤其把 radius 百分比是相对容器较小边计算、formatter 不会改原始数据这些点讲明白了，对刚在 Vue 里用 ECharts 画饼图的人挺有帮助。 不过 Vue 示例里 initDate 这段逻辑有点小问题：this.pieName = this.pieData.name 这里 pieData 是数组，直接取 name 拿不到每一项的名称，pieName 也不会变成名称数组；应该遍历 pieData 把每项的 name push 进去，或者用 map 整理。否则 legend.data 可能拿不到预期数据，图例就对不上了。另外首帖末尾 legend 的 right 后面好像没贴完，示例不太完整，补全后会更方便直接复制使用。整体思路没问题，细节再修一下就很实用了。

热心网友7

这篇整理挺实用的，最小饼图、标题图例、label 的 {b}{c}{d} 以及 radius 数组画圆环这几块讲得比较清楚，尤其强调了 formatter 不会改原始数据、百分比由 ECharts 计算，这点很容易被忽略。 有个小地方可以留意：示例里 initDate 用 for 循环写 this.pieName = this.pieData.name，这样拿不到名称数组，建议直接用 this.pieName = this.pieData.map(item => item.name)。另外 legend.data 其实不手动整理也会从 series 的 data 里取 name，手动写时注意顺序和名称一致。Vue 组件销毁时最好再补一下 myChart.dispose 和 resize 监听移除，避免切换页面后实例残留。整体内容适合直接放进项目里参考。

热心网友7

这篇内容挺适合拿来快速上手 Vue 里的 ECharts 饼图，最小配置、图例、标签格式化和 radius 圆环图这几块讲得比较清楚，尤其是 radius 百分比是相对于容器较小边计算这一点，实际用的时候很容易忽略。示例用省份院士数量也更直观。 有个小细节可以提一下：initDate 里写 this.pieName = this.pieData.name 是拿不到图例名称数组的，因为 pieData 是数组，应该用 this.pieName = this.pieData.map(item => item.name)，这样 legend.data 才能正常对应上。另外如果后续补完整组件，记得在组件销毁时把 resize 监听移除并调用 dispose，避免页面切换后残留。整体思路没问题，继续补齐示例就很完整了。