echarts饼状图点击事件
时间: 2023-08-14 13:14:00 浏览: 192
echarts饼图扇区添加点击事件的实例
对于 Echarts 饼状图的点击事件,你可以通过 Echarts 提供的事件监听来实现。具体步骤如下:
1. 在 Echarts 的配置项中,设置 `series` 中的 `label` 属性,将 `label` 的 `show` 属性设置为 `true`,使饼状图上的标签显示。
2. 使用 `on` 方法监听饼状图的点击事件。在事件回调函数中,可以通过 `params` 参数获取被点击的饼状图数据。
下面是一个简单的示例代码:
```javascript
// 初始化 Echarts 实例
var chart = echarts.init(document.getElementById('chart'));
// 配置项
var options = {
series: [{
type: 'pie',
data: [
{ value: 335, name: '直接访问' },
{ value: 310, name: '邮件营销' },
{ value: 234, name: '联盟广告' },
{ value: 135, name: '视频广告' },
{ value: 1548, name: '搜索引擎' }
],
label: {
show: true
}
}]
};
// 监听点击事件
chart.on('click', function(params) {
console.log(params); // 点击的饼状图数据
});
// 渲染图表
chart.setOption(options);
```
在上述代码中,我们通过 `chart.on('click', function(params) { ... })` 监听了饼状图的点击事件,并在回调函数中打印了点击的饼状图数据。你可以根据实际需求,对点击事件进行相应的处理操作。
阅读全文