业务场景：工作由于需要进行数据的展示，因此需要使用Echarts的饼状图来展示各个部分所占的比重，当然这个都是最基本的功能，然而今天遇到了一个新的需求，饼状图的各个部分需要能点击，而且点击之后需要跳转到对应的数据上，从而就有了今天的这篇文章，废话不多说，先上图：
饼状图
点击之后跳转的页面
下面我来详细介绍一个实现步骤：
将饼状图画好，这里我们默认大家已经画好了，不会的可以在Echarts的官方网站进行查看如何实现。
在给画饼状图的对象绑定一个点击事件，代码如下：
NumberChat.on('click', function(param) {
var url = param.data.url;
// console.log(param);
window.location.href = url;
});
我们这里使用的是on来绑定一个事件，当然这是EchartsApI明确指定的，然后我们可以打印一下param这个形参，截图如下：
打印形参数据
- 给data增加一个url：可以看到这里面有一个data，我们实际上需要的就是它了，而且这个data就是我们画饼状图时填充的数据（如下图），因此我们可以给它多加几个参数，其中value和name是必须的，而url就是我们添加的，这里我使用的是ThinkPHP中的U函数来生成url。
给饼状图的数据中增加数据
- 使用window.location.href来跳转到新的链接：我们可以让浏览器跳转到新的url链接，代码如下：
window.location.href = param.data.url;
完整的代码如下：
HTML代码：
<div class="echartsBox" id="echarts2"></div>
JS代码：
var NumberChat = echarts.init(document.getElementById('echarts2'));
NumberOption = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
color: ['#4287f5', '#ff5454'],
legend: {
orient: 'horizontal',
itemWidth: 10,
itemHeight: 10,
x: 'center',
y: 'top',
textStyle: {
color: "#fff",
},
icon: 'circle',
data: ['巡护中', '未巡护']
},
series: [{
name: '巡护人员比例',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
center: ['50%', '50%'],
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '16',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data: [{
value: '{$busy}',
name: '巡护中',
type: 1,
url: '{:U("User/safeguardList?type=2")}'
}, {
value: '{$leisure}',
name: '未巡护',
type: 0,
url: '{:U("User/safeguardList?type=1")}'
}]
}]
};
NumberChat.setOption(NumberOption);
NumberChat.on('click', function(param) {
//console.log(param);
var url = param.data.url;
window.location.href = url;
});
不正确之处，请大家不吝赐教。
