关于Echarts设置点击事件

淩亂°似流年 2021-09-17 02:01 439阅读 0赞

// 封装饼图代码
                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"