给echart数据项设置点击事件 点击变化阴影颜色不生效
时间: 2023-07-31 15:08:10 浏览: 90
要给 ECharts 数据项设置点击事件,可以在 series 中的每个数据项中添加一个 itemStyle 属性,并在该属性中设置相应的点击事件。例如,以下代码段演示了如何在点击数据项时改变其阴影颜色:
```
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
itemStyle: {
normal: {
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
},
emphasis: {
shadowColor: '#ff0000',
shadowBlur: 20
}
}
}]
};
// 绑定点击事件
myChart.on('click', function (params) {
// 获取当前点击的数据项
var item = option.series[0].data[params.dataIndex];
// 改变其阴影颜色
item.itemStyle.emphasis.shadowColor = '#0000ff';
// 更新图表
myChart.setOption(option);
});
```
其中,itemStyle.normal 中设置了数据项的默认样式,itemStyle.emphasis 中设置了数据项被鼠标悬停或点击时的样式。在点击事件中,可以通过 params.dataIndex 获取当前点击的数据项的索引,然后通过 option.series[0].data[params.dataIndex] 获取当前点击的数据项,并修改其 itemStyle.emphasis.shadowColor 属性来改变其阴影颜色。最后,调用 myChart.setOption(option) 方法更新图表即可。
如果以上方法在您的代码中仍然无法生效,请检查是否有其他代码改变了阴影颜色的设置。
阅读全文