业务场景:工作由于需要进行数据的展示,因此需要使用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;
});
不正确之处,请大家不吝赐教。