一组图例控制两个图形 && 一个饼图中既显示中心文字又显示数值
需求描述：
如下图所示
1. 我们希望通过控制最上方的一组图例，来实现两个饼图对应项同时的显示或隐藏；
2. 在一个饼图中，我们希望中心位置一直显示该饼图的标题，同时扇形区域上显示对应模块的数值，鼠标悬浮时再具体显示相关内容。
解决方案（代码展示）：
需求1 解决方案：只需初始化一个 echarts 实例，实例中正常写入一个legend 对象，但是 series 数组需要加入“事件总数”和“逾期事件”两个对象，再通过位置的调整，即可实现一组图例控制两个饼图。
此时的效果图：
HTML部分：
<div id="pie1" ref="pie1" style="width: 100%; height: 100%"></div>
JS（option）部分：
const option = { // 自定义颜色（数组）可以不设置此项，会按照echarts提供的默认颜色展示 color: this.pieColor, tooltip: { trigger: 'item', }, legend: { top: '1%', textStyle: { // 使图例文字颜色和图例颜色对应的相同 color: () => {}, }, }, series: [ { name: '事件总数', type: 'pie', radius: [40, 62],
// 控制位置
center: ['50%', '30%'], label: { show: true, normal: { formatter: (params) => { console.log(params, 'params'); return params.seriesName; }, position: 'center', color: 'white', }, }, itemStyle: { borderRadius: 10, borderColor: '#003C7A', borderWidth: 3, }, data: data1, }, { name: '逾期事件', type: 'pie', radius: [40, 62],
// 控制位置
center: ['50%', '70%'], label: { show: true, normal: { formatter: (params) => { return params.seriesName; }, position: 'center', color: 'white', }, }, itemStyle: { borderRadius: 10, borderColor: '#003C7A', borderWidth: 3, }, data: data2, }, ], };
需求2 解决方案：上面的代码已经展示出了中心位置的标题，改变的是 series 中的 label 配置，但是 中心显示文字和扇形区域显示数据都是通过label配置来实现的，echarts不允许在一个对象里相同配置项（如label）出现两次，所以我们要分成两个对象，使其重叠来实现既显示中心文字又显示扇形数据的效果，如下代码，具体内容都已附上注释，请自行查看。
悬浮扇形区域放大展示效果是通过配置 emphasis 来实现的（即高亮状态样式设置）。
（上述options中）series部分代码 修改为如下：
series: [ { name: '事件总数', type: 'pie', radius: [40, 62], center: ['50%', '30%'], // 饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等 label: { show: true, normal: { formatter: (params) => { // 此项的name值，这里即 “事件总数” return params.seriesName; }, // 标签位置在饼图的中心 position: 'center', color: 'white', }, }, // 图形样式 itemStyle: { borderRadius: 10, borderColor: '#003C7A', borderWidth: 3, }, data: data1, }, { name: '事件总数', type: 'pie', radius: [40, 62], center: ['50%', '30%'], label: { show: true, normal: { // {c} 代表数据值 其他模板变量可在此链接中自行查阅：https://echarts.apache.org/zh/option.html#series-pie.label.formatter formatter: '{c}', // 标签位置在饼图扇区内部 也可用 ‘inside’ position: 'inner', color: 'black', }, }, emphasis: { // 高亮状态的扇区和标签样式 label: { show: true, fontSize: '22', fontWeight: 'bold' } }, itemStyle: { borderRadius: 10, borderColor: '#003C7A', borderWidth: 3, }, data: data1, }, { name: '逾期事件', type: 'pie', radius: [40, 62], center: ['50%', '70%'], label: { show: true, normal: { formatter: (params) => { return params.seriesName; }, position: 'center', color: 'white', }, }, itemStyle: { borderRadius: 10, borderColor: '#003C7A', borderWidth: 3, }, data: data2, }, { name: '逾期事件', type: 'pie', radius: [40, 62], center: ['50%', '70%'], label: { show: true, normal: { formatter: '{c}', position: 'inner', color: 'black', }, }, emphasis: { label: { show: false, fontSize: '22', fontWeight: 'bold' } }, itemStyle: { borderRadius: 10, borderColor: '#003C7A', borderWidth: 3, }, data: data2, }, ]
上述数据部分为 data1 和 data2，legend 的值也包含在其中了，是调取接口进行处理后的数据，这里就不具体展示了，各位根据后台接口返的数值做相应的处理就好啦~ 上述修改完成后，即可实现第一张图的效果啦~
上面代码是此需求饼图 option 部分配置的全部内容，其他如初始化 echarts 实例、数据处理、setOption 等相信大家都会，也就不再赘述。
希望这篇文章能为你提供一些帮助~~~
