我的项目场景：
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
},
]
}
]
});
},