1. 程式人生 > >echarts裡面點選餅圖的板塊能進行跳轉(或者有點選)

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"