项目上的一个功能使用了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>
1882
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
