echarts词云图点击事件
时间: 2023-10-02 09:08:41 浏览: 141
echarts的click事件
ECharts 词云图可以通过 `series` 中的 `emphasis` 属性来添加点击事件。下面是一个简单的示例代码:
```javascript
option = {
series: [{
type: 'wordCloud',
data: [
{ name: 'HTML', value: 100 },
{ name: 'CSS', value: 80 },
{ name: 'JavaScript', value: 120 },
{ name: 'Node.js', value: 60 },
{ name: 'Vue.js', value: 90 },
{ name: 'React', value: 70 }
],
emphasis: {
itemStyle: {
color: '#c23531'
},
textStyle: {
fontWeight: 'bold'
}
}
}]
};
myChart.on('click', function (params) {
console.log(params.name, params.value);
});
```
在这个例子中,我们定义了一个 `wordCloud` 类型的系列,并设置了 `emphasis` 属性,当鼠标移动到词云上时,会将该项的颜色改为红色,并加粗字体。
在 `myChart` 上添加一个 `click` 事件监听器,在事件处理函数中可以获得点击的项的名称和值,可以根据需要进行后续处理。
阅读全文