关于Echarts设置点击事件

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

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值