echarts柱状图点击改变颜色
时间: 2023-11-01 12:53:08 浏览: 127
点击改变颜色
4星 · 用户满意度95%
您可以通过注册柱状图的点击事件,然后在事件中修改对应柱子的颜色来实现柱状图点击改变颜色的效果。下面是一个示例代码:
```javascript
// 初始化图表
var myChart = echarts.init(document.getElementById('chart'));
// 柱状图的数据
var data = [
{value: 100, color: 'blue'},
{value: 200, color: 'green'},
{value: 150, color: 'red'}
];
// 配置项
var option = {
// 其他配置项...
series: [{
type: 'bar',
data: data
}]
};
// 注册点击事件
myChart.on('click', function(params) {
var dataIndex = params.dataIndex;
// 修改点击柱子的颜色
option.series[0].data[dataIndex].color = 'yellow';
// 更新图表
myChart.setOption(option);
});
// 设置初始颜色
myChart.setOption(option);
```
以上代码中,首先通过 `myChart.on('click', ...)` 注册了柱状图的点击事件。在点击事件回调函数中,通过 `params.dataIndex` 获取到点击的柱子索引,然后通过修改 `option.series.data[dataIndex].color` 来改变点击柱子的颜色。最后,调用 `myChart.setOption(option)` 来更新图表。
请注意,以上代码只是一个示例,您需要根据自己的实际需求进行相应的修改。同时,确保已正确引入 ECharts 库并正确初始化图表。
阅读全文