業(yè)務(wù)場(chǎng)景：工作由于需要進(jìn)行數(shù)據(jù)的展示拌夏，因此需要使用Echarts的餅狀圖來(lái)展示各個(gè)部分所占的比重滤淳，當(dāng)然這個(gè)都是最基本的功能贤徒，然而今天遇到了一個(gè)新的需求醉蚁，餅狀圖的各個(gè)部分需要能點(diǎn)擊，而且點(diǎn)擊之后需要跳轉(zhuǎn)到對(duì)應(yīng)的數(shù)據(jù)上盒蟆，從而就有了今天的這篇文章踏烙，廢話不多說(shuō)师骗，先上圖：
餅狀圖
點(diǎn)擊之后跳轉(zhuǎn)的頁(yè)面
下面我來(lái)詳細(xì)介紹一個(gè)實(shí)現(xiàn)步驟：
將餅狀圖畫(huà)好，這里我們默認(rèn)大家已經(jīng)畫(huà)好了讨惩，不會(huì)的可以在Echarts的官方網(wǎng)站進(jìn)行查看如何實(shí)現(xiàn)辟癌。
在給畫(huà)餅狀圖的對(duì)象綁定一個(gè)點(diǎn)擊事件，代碼如下：
NumberChat.on('click', function(param) {
var url = param.data.url;
// console.log(param);
window.location.href = url;
});
我們這里使用的是on來(lái)綁定一個(gè)事件步脓，當(dāng)然這是EchartsApI明確指定的愿待，然后我們可以打印一下param這個(gè)形參，截圖如下：
打印形參數(shù)據(jù)
- 給data增加一個(gè)url：可以看到這里面有一個(gè)data靴患，我們實(shí)際上需要的就是它了仍侥，而且這個(gè)data就是我們畫(huà)餅狀圖時(shí)填充的數(shù)據(jù)（如下圖），因此我們可以給它多加幾個(gè)參數(shù)鸳君，其中value和name是必須的农渊，而url就是我們添加的，這里我使用的是ThinkPHP中的U函數(shù)來(lái)生成url或颊。
給餅狀圖的數(shù)據(jù)中增加數(shù)據(jù)
- 使用window.location.href來(lái)跳轉(zhuǎn)到新的鏈接：我們可以讓瀏覽器跳轉(zhuǎn)到新的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/>: {c} (576pbwo%)"
},
color: ['#4287f5', '#ff5454'],
legend: {
orient: 'horizontal',
itemWidth: 10,
itemHeight: 10,
x: 'center',
y: 'top',
textStyle: {
color: "#fff",
},
icon: 'circle',
data: ['巡護(hù)中', '未巡護(hù)']
},
series: [{
name: '巡護(hù)人員比例',
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: '巡護(hù)中',
type: 1,
url: '{:U("User/safeguardList?type=2")}'
}, {
value: '{$leisure}',
name: '未巡護(hù)',
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;
});
不正確之處囱挑，請(qǐng)大家不吝賜教醉顽。
