echarts圆环 emphasis里的label和默认的label重叠在一起了,都在中间展示,想不移到legend上去时默认的就显示,移到legend时,就展示当前的
时间: 2024-03-18 08:39:15 浏览: 97
您可以通过设置 echarts 圆环图的 `label` 配置项中的 `formatter` 属性来实现您的需求。代码示例如下:
```javascript
option = {
// ... 其他配置项
series: [
{
name: "访问来源",
type: "pie",
radius: ["50%", "70%"],
avoidLabelOverlap: false,
label: {
show: false, // 隐藏默认的 label
position: "center",
formatter: function(params) {
// 判断是否在 legend 中被选中
if (params.seriesIndex === 0 && params.dataIndex === 0) {
return params.value; // 返回当前数据的 value
} else {
return ""; // 隐藏 label
}
}
},
emphasis: {
label: {
show: true,
position: "center",
formatter: function(params) {
return "{a|" + params.value + "}\n{b|" + params.name + "}"; // 格式化 label
},
rich: {
a: {
fontSize: 24,
fontWeight: "bold"
},
b: {
fontSize: 14
}
}
}
},
data: [
{ value: 335, name: "直接访问" },
{ value: 310, name: "邮件营销" },
{ value: 234, name: "联盟广告" },
{ value: 135, name: "视频广告" },
{ value: 1548, name: "搜索引擎" }
]
}
],
legend: {
// 配置 legend
data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"],
bottom: 10
}
};
```
在上述代码中,我们通过设置 `label` 的 `formatter` 属性,来判断当前数据是否在 legend 中被选中。如果是,则返回空字符串,隐藏 label;否则,返回当前数据的 value,展示默认的 label。同时,我们还通过设置 `legend` 配置项,将 legend 展示在图表底部。这样,当鼠标移到 legend 上时,可以展示当前数据的 label;当鼠标移到图表其他位置时,则展示默认的 label。
阅读全文