WithCoderWithCoderWithCoder

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”属性:

    1-200G01FPT53.png

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

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

    在浏览器中打印param参数,截图如下:

    1-200G01G623O4.png

    按以上步骤,完成代码后运行,点击饼状图对应的部分时,会执行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>


欢迎分享交流,转载请注明出处:WithCoder » ECharts饼状图中使用点击事件来跳转到新的页面链接