echarts折线图的点击事件
时间: 2023-07-11 13:43:44 浏览: 87
echarts的click事件
ECharts 折线图的点击事件可以通过设置 `series` 中的 `itemStyle` 属性的 `emphasis` 部分来实现。具体步骤如下:
1. 在 `option` 中的 `series` 中找到对应的折线图系列。
2. 在该系列中设置 `itemStyle` 属性。
3. 在 `itemStyle` 中设置 `emphasis` 属性,并在其中设置 `cursor` 和 `label` 等属性,以达到点击效果。
以下是一个示例代码:
```javascript
option = {
series: [{
type: 'line',
data: [10, 20, 30, 40, 50],
itemStyle: {
emphasis: {
// 点击后的样式
color: 'red',
borderWidth: 2,
borderColor: '#fff',
label: {
show: true,
position: 'top',
color: '#000'
},
cursor: 'pointer'
}
}
}]
};
// 绑定点击事件
myChart.on('click', function(params) {
console.log(params); // 点击的数据信息
});
```
在上述代码中,我们在 `itemStyle` 中设置了 `emphasis` 属性,在点击时会自动应用该样式。同时,我们通过 `myChart.on('click', function(params) {...})` 绑定了点击事件,并在其中输出了点击的数据信息。
阅读全文