echarts中给图形label标签下的formatter加点击事件
时间: 2024-05-10 19:20:37 浏览: 15
可以通过设置tooltip触发器的formatter来实现,具体步骤如下:
1. 在echarts的option中设置tooltip,将触发器设置为'axis'
```javascript
tooltip: {
trigger: 'axis'
}
```
2. 在series中设置label标签的formatter,将需要点击的文本用HTML标签包裹起来,并添加一个ID值
```javascript
series: [{
type: 'bar',
data: [10, 20, 30, 40],
label: {
show: true,
formatter: function(params) {
return '<span id="label_' + params.dataIndex + '">Label ' + params.dataIndex + '</span>';
}
}
}]
```
3. 通过echarts实例的on方法绑定点击事件,获取到点击的文本的ID值,进行后续的操作
```javascript
myChart.on('click', function(params) {
if (params.componentType === 'series' && params.seriesType === 'bar') {
var labelId = 'label_' + params.dataIndex;
var labelDom = document.getElementById(labelId);
// do something with labelDom
}
});
```
完整的代码示例:
```javascript
var myChart = echarts.init(document.getElementById('myChart'));
myChart.setOption({
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D']
},
yAxis: {
type: 'value'
},
series: [{
type: 'bar',
data: [10, 20, 30, 40],
label: {
show: true,
formatter: function(params) {
return '<span id="label_' + params.dataIndex + '">Label ' + params.dataIndex + '</span>';
}
}
}]
});
myChart.on('click', function(params) {
if (params.componentType === 'series' && params.seriesType === 'bar') {
var labelId = 'label_' + params.dataIndex;
var labelDom = document.getElementById(labelId);
// do something with labelDom
}
});
```
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)