echarts饼图点击跳转
时间: 2023-07-30 12:08:55 浏览: 154
要实现ECharts饼图的点击跳转,可以通过ECharts提供的事件监听机制来实现。具体步骤如下:
1.在ECharts的option中设置series中的data数据项中加入点击事件的回调函数
例如:
```
option = {
series: [
{
type: 'pie',
data: [
{value: 335, name: '直接访问', url: 'https://www.baidu.com'},
{value: 310, name: '邮件营销', url: 'https://www.taobao.com'},
{value: 234, name: '联盟广告', url: 'https://www.jd.com'},
{value: 135, name: '视频广告', url: 'https://www.cnblogs.com'},
{value: 1548, name: '搜索引擎', url: 'https://www.zhihu.com'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
label: {
formatter: '{b} ({d}%)'
}
}
]
};
myChart.on('click', function (params) {
window.open(params.data.url);
});
```
在data数据项中加入了url属性,这个属性保存了要跳转的链接;在饼图的click事件中,我们通过 `params.data.url` 获取到了当前点击的数据项的url属性,并通过`window.open`方法打开了这个链接。
2.在页面中引入ECharts库,并创建一个ECharts实例
例如:
```
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>
<script>
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);
</script>
```
通过以上步骤,即可实现ECharts饼图的点击跳转功能。
阅读全文