echarts里面点击饼图的板块能进行跳转(或者有点击)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/flting1017/article/details/79747007
// 封装饼图代码
            Publicshape:function(publicJsonArray,publicId){
                // 展示上边的行数据
                var sale = publicJsonArray.map(function(item,index){
                    return publicJsonArray[index].name
                    
                })
                // 展示饼图里面数据
                var saleshape =  publicJsonArray.map(function(item,index){
                    return {name: publicJsonArray[index].name, value:publicJsonArray[index].ratio}
                })


                // 以下是静态数据
                var myChart = echarts.init(document.getElementById(publicId));


                option = {
                    title : {
                        text: '销量排名分布图',
                        x:'center'
                    },
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: sale,
                    },
                    
                    series : [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius : '70%',
                            center: ['50%', '57.5%'],
                            data:saleshape,
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
               myChart.on("click", this.eConsole);

            },

  //点击饼图有点击的效果
            eConsole:function(param){
              //alert(option.series[0].data.length);
              //alert(option.series[0].data[i]);
                param.dataIndex 获取当前点击索引,
              console.log(param.dataIndex);
            }

如果按照上面的代码放入对应的echartjs配置里面,可以输出当前点击的饼图的板块,如果需要进行跳转,可以在里面写上window.location.href="XXX"

猜你喜欢

转载自blog.csdn.net/flting1017/article/details/79747007