Echarts饼状图中使用点击事件来跳转到新的链接

业务场景：工作由于需要进行数据的展示，因此需要使用Echarts的饼状图来展示各个部分所占的比重，当然这个都是最基本的功能，然而今天遇到了一个新的需求，饼状图的各个部分需要能点击，而且点击之后需要跳转到对应的数据上，从而就有了今天的这篇文章，废话不多说，先上图：

饼状图 点击之后跳转的页面

下面我来详细介绍一个实现步骤：

1. 将饼状图画好，这里我们默认大家已经画好了，不会的可以在Echarts的官方网站进行查看如何实现。

2. 在给画饼状图的对象绑定一个点击事件，代码如下：

NumberChat.on('click', function(param) {
    var url = param.data.url;
    // console.log(param);
    window.location.href = url;
});

我们这里使用的是on来绑定一个事件，当然这是EchartsApI明确指定的，然后我们可以打印一下param这个形参，截图如下：

打印形参数据

3. 给data增加一个url：可以看到这里面有一个data，我们实际上需要的就是它了，而且这个data就是我们画饼状图时填充的数据（如下图），因此我们可以给它多加几个参数，其中value和name是必须的，而url就是我们添加的，这里我使用的是ThinkPHP中的U函数来生成url。

给饼状图的数据中增加数据

4. 使用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;
});

不正确之处，请大家不吝赐教。