echarts裡面點選餅圖的板塊能進行跳轉(或者有點選)
阿新 • • 發佈:2018-11-29
// 封裝餅圖程式碼
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);
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"