我的项目场景：
echart的环形图表中legend配置项中存在多个反复数据，页面展现的时候合并为一个数据展现了
例如：多个同名业务类型，然而key值不同，须要将所有业务类型都展现。
问题形容
开发中遇到业务类型名称不惟一状况，存在多个业务类型同名然而key值不同，此处多个业务类型应该通过不同色彩将所有类型名都展现，然而理论展现是同名业务类型合并为同一名称，并且色彩雷同。
例如：
图表初始化数据代码：
drawChannelChart() { // 基于筹备好的dom，初始化echarts实例 this.channelChart = echarts.init(document.getElementById("channelChart")); // 绘制图表 this.channelChart.setOption({ title: { text: "总数", //副标题 subtext: this.channelTotal || "0", // 主副标题间距 itemGap: 15, x: "center", y: "center", // x:'17%', // y:'12%', top: "170", //主题目款式 textStyle: { fontSize: "18", color: "#CCCCCC" }, //副标题款式 subtextStyle: { fontSize: "35", fontWeight: "800", color: "#555" } }, tooltip: { trigger: "item" }, legend: { top: "95%", left: "center", // left: '10%', icon: "circle", }, series: [ { name: "", type: "pie", radius: ["40%", "70%"], avoidLabelOverlap: false, label: { show: false, position: "center" }, emphasis: { label: { show: false, fontSize: "40", fontWeight: "bold" } }, labelLine: { show: false }, data: [ { "key": "1", "name": "超高清", "value": 3 }, { "key": "2", "name": "低时延", "value": 1 }, { "key": "3", "name": "低时延", "value": 2 }, ] } ] }); },起因剖析：
需要要求，之前没有留神到这方面的问题。
解决方案：
通过legend和tooltip属性的formatter属性值来批改对雷同name值数据的展现问题。
首先在获取到数据的时候，对数据进行解决
channelTypes.forEach((element, i) => { let obj = {}; obj.value = element.num || 0; obj.name = element.value+ element.key;//应用原来的name值+key值作为name惟一的标识 obj.text = element.value;//预计的展现名称 obj.key = element.key; this.channelData.push(obj); });其次初始化图表设置
drawChannelChart() { // 基于筹备好的dom，初始化echarts实例 this.channelChart = echarts.init(document.getElementById("channelChart")); // 绘制图表 this.channelChart.setOption({ title: { text: "总数", //副标题 subtext: this.channelTotal || "0", // 主副标题间距 itemGap: 15, x: "center", y: "center", // x:'17%', // y:'12%', top: "170", //主题目款式 textStyle: { fontSize: "18", color: "#CCCCCC" }, //副标题款式 subtextStyle: { fontSize: "35", fontWeight: "800", color: "#555" } }, tooltip: { trigger: "item", //此处是针对于批改后数据展现做批改，否则鼠标移上展现的数据是名称+key值 formatter:(params)=>{ let content = ``; let name = this.channelData.find((v) => v.name === params.name).text; content = `<div><span> ${name}</span>：<span>${params.value}</span></div>`; return content; } }, legend: { top: "95%", left: "center", // left: '10%', icon: "circle", show:true, //此处是针对于批改后数据展现做批改，否则鼠标移上展现的数据是名称+key值 formatter:(name)=>{ let showText = this.channelData.find((v)=>v.name===name).text; return showText; } }, series: [ { name: "", type: "pie", radius: ["40%", "70%"], avoidLabelOverlap: false, label: { show: false, position: "center" }, emphasis: { label: { show: false, fontSize: "40", fontWeight: "bold" } }, labelLine: { show: false }, data: [ { "key": "1", "name": "超高清1", "text":"超高清", "value": 3 }, { "key": "2", "name": "低时延2", "text": "低时延", "value": 1 }, { "key": "3", "name": "低时延3", "text": "低时延", "value": 2 }, ] } ] }); },