echarts 实现同一组legend控制两个饼图示例-编程知识

echarts 实现同一组legend控制两个饼图示例

实现同一组legend控制两个饼图示例：

该示例有如下几个特点：

①饼图不同值实现分割

②实现tooltip自定义样式（echarts 实现tooltip提示框样式自定义-CSDN博客）

③自定义label内容

④不同值颜色渐变

代码如下：

this.options = {title: [{text: '保管专业',x: "center",y: "center",left: "49%",top: "23%",textAlign: "center",textStyle: {color: "#ffffffcc",fontSize: 16,fontWeight: "bold",align: "center",},},{text: '救生专业',x: "center",y: "center",left: "49%",top: "73%",textAlign: "center",textStyle: {color: "#ffffffcc",fontSize: 16,fontWeight: "bold",align: "center",},},],tooltip: {trigger: 'item',textStyle: {align: "left",},className: 'custom-tooltip-box',formatter: function(params) {return `<div class='custom-tooltip-style'><span>${airportName} ${params.seriesName}</span></br><div class="span"><span>${params.name}</span><span>${params.value} 人</span></div></div>`},},legend: {orient: "vertical",// top: "40%",left: "2%",top:"2%",align: "left",textStyle: {color: "#C7F1FF",fontSize: 16},itemWidth: 15,itemHeight: 15,data: ["军官", "军士", "义务兵"]},color: this.colors,series: [{name: '保管专业',type: 'pie',radius: ['18%', '30%'],center: ['50%', '25%'],avoidLabelOverlap: false,labelLine: {normal: {length: 20,length2: 120,lineStyle: {width: 1,},},},label: {show: true,position: "outside",padding: [0, -70, 25, -100],edgeDistance: 5,textStyle: {color: "#ffffff",fontSize: 16,},formatter: (params) => {return params.name + " " + "{percent|" + params.percent.toFixed(0) + "%}";},rich: {hr: {borderRadius: 3,width: 3,height: 3,},a: {},},},itemStyle: {borderWidth: 8,borderColor: "#113a75"},data: this.echartData1},{name: '救生专业',type: 'pie',radius: ['18%', '30%'],center: ['50%', '75%'],avoidLabelOverlap: false,labelLine: {normal: {length: 20,length2: 120,lineStyle: {width: 1,},},},label: {show: true,position: "outside",padding: [0, -70, 25, -100],edgeDistance: 5,textStyle: {color: "#ffffff",fontSize: 16,},formatter: (params) => {return params.name + " " + "{percent|" + params.percent.toFixed(0) + "%}";},rich: {hr: {borderRadius: 3,width: 3,height: 3,},a: {},},},itemStyle: {borderWidth: 8,borderColor: "#113a75"},data: this.echartData2}]
}

效果图如下：