echarts饼图label可以点击
时间: 2023-07-29 19:14:02 浏览: 106
解决echarts中饼图标签重叠的问题
是的,ECharts 饼图的 label 可以通过设置 label 的 formatter 属性实现点击事件。具体实现方式如下:
1. 在 series 的 label 属性中设置 formatter,例如:
```
series: [{
type: 'pie',
data: [...],
label: {
formatter: function(params) {
return '{a|' + params.name + '}\n{b|' + params.value + '}';
},
rich: {
a: {
color: '#666',
lineHeight: 18
},
b: {
fontSize: 16,
lineHeight: 24
}
}
}
}]
```
2. 在 formatter 函数中,通过设置返回的字符串包含 HTML 标签和 CSS 样式,实现 label 的点击事件。例如,可以在返回的字符串中添加一个 a 标签,并设置其 href 属性,实现跳转到指定页面:
```
formatter: function(params) {
return '<a href="https://www.example.com">' + params.name + '</a>\n{b|' + params.value + '}';
},
rich: {
b: {
...
}
}
```
这样,当用户点击 label 文字时,就会跳转到 https://www.example.com 页面。
阅读全文