echarts 堆叠柱状图,点击柱子,只高亮被点击的柱子或者给其添加背景色
时间: 2023-08-11 17:25:33 浏览: 400
要实现点击柱子高亮或者添加背景色的效果,可以使用 ECharts 提供的事件处理函数。具体实现步骤如下:
1.在 ECharts 的 option 中设置 series 数据,并且指定点击事件的处理函数:
```
option = {
// ...
series: [{
type: 'bar',
data: [10, 20, 30, 40],
emphasis: {
itemStyle: {
color: 'yellow' // 高亮的颜色
}
},
// 点击事件处理函数
onclick: function(params) {
// 取消所有柱子的高亮
chart.dispatchAction({
type: 'downplay',
seriesIndex: 0
});
// 高亮被点击的柱子
chart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: params.dataIndex
});
}
}]
// ...
}
```
2.在页面中创建一个 ECharts 实例并渲染:
```
var chart = echarts.init(document.getElementById('chart'));
chart.setOption(option);
```
这样就可以实现点击柱子高亮或者添加背景色的效果了。需要注意的是,点击事件处理函数中的 `chart` 变量需要在页面加载完成后才能获取到,因此需要放在渲染 ECharts 实例的代码之后。
阅读全文
相关推荐















