ECharts饼状图中使用点击事件来跳转到新的页面链接_echarts饼图跳转

作者：笔触狂放9 | 2024-05-07 14:52:12

踩

echarts饼图跳转

项目上的一个功能使用了ECharts的统计饼状图表，展示各分组数据所占的比重。然后又提出了新的需求，在点击饼状图的各个部分时，需要跳转到对应的数据列表页面。

之前都只是做统计功能，对ECharts的关注点也在统计功能上，还没有处理过相应的点击功能。仔细翻了遍ECharts的api文档，找到了事件处理的相关部分。可以参考“https://echarts.apache.org/zh/api.html#events”。

在ECharts 中的事件有两种，一种是鼠标事件，在鼠标点击某个图形上会触发；还有一种是调用 dispatchAction 后触发的事件。本文关注的是第一种鼠标事件。

鼠标事件的事件参数是事件对象的数据的各个属性，对于图表的点击事件，基本参数如下，其它图表诸如饼图可能会有部分附加参数。例如饼图会有percent属性表示百分比，具体见各个图表类型的 label formatter 回调函数的 params。

{    
// 当前点击的图形元素所属的组件名称，    
// 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。    
componentType: string,    
// 系列类型。值可能为：'line'、'bar'、'pie' 等。当 componentType 为 'series' 时有意义。    
seriesType: string,    
// 系列在传入的 option.series 中的 index。当 componentType 为 'series' 时有意义。    
seriesIndex: number,    
// 系列名称。当 componentType 为 'series' 时有意义。    
seriesName: string,    
// 数据名，类目名    
name: string,    
// 数据在传入的 data 数组中的 index    
dataIndex: number,    
// 传入的原始数据项    
data: Object,    
// sankey、graph 等图表同时含有 nodeData 和 edgeData 两种 data，    
// dataType 的值会是 'node' 或者 'edge'，表示当前点击在 node 还是 edge 上。    
// 其他大部分图表中只有一种 data，dataType 无意义。    
dataType: string,    
// 传入的数据值    
value: number|Array,    
// 数据图形的颜色。当 componentType 为 'series' 时有意义。    
color: string,    
// 用户自定义的数据。只在 graphic component 和自定义系列（custom series）    
// 中生效，如果节点定义上设置了如：{type: 'circle', info: {some: 123}}。    
info: *
}

根据以上介绍，我们可以实现饼状图的点击事件跳转功能：

1. 绘制饼状图，这一步根据自己需求设计（也可以参考ECharts官网示例），引入ECharts.js文件，在饼状图的“series”属性“data”中，添加一个“url”属性：

2. 在给画饼状图的对象绑定一个点击事件，这里我们使用on来绑定一个事件，然后我们可以在浏览器中打印一下param这个形参，代码如下：

// 饼图点击跳转到指定页面
myChart.on('click', function (param) {
    window.location.href = param.data.url;
});

在浏览器中打印param参数，截图如下：

按以上步骤，完成代码后运行，点击饼状图对应的部分时，会执行click事件，跳转对应的页面。

最后，附上完整的测试代码：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <script src="plugins/echarts/echarts.min.js" type="text/javascript"></script>
</head>
<body>
<div id="mychart" style="width: 300px;height: 300px;"></div>
<script>
    // 设置图表属性
    option = {
        title: {
            text: '测试饼状图',
            x: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'horizontal',
            left: 'center',
            top: '15%'
        },
        series: [
            {
                name: '测试饼状图',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: [
                    {value: 30.2, name: '合格', url: "http://www.baidu.com"},
                    {value: 69.7, name: '不合格', url: "http://www.withcoder.com"}
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }]
    };

    // 初始化图表
    myChart = echarts.init(document.getElementById('mychart'));
    myChart.setOption(option);

    // 饼图点击跳转到指定页面
    myChart.on('click', function (param) {
        window.location.href = param.data.url;
    });
</script>
</body>
</html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/549806