版权声明:本文为博主原创文章,未经博主允许不得转载。 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);
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"