嵌套饼图数据:
pieData: {
parent: [{
name: '省内仓',
value: 900,
id:'1'
}, {
name: '省外仓',
value: 1000,
id:'2'
}, {
name: '太原仓',
value: 100,
id:'3'
}, ],
children: [{
name: '大同',
value: 100,
parentId:'1'
}, {
name: '阳泉',
value: 100,
parentId:'1'
}, {
name: '长治',
value: 100,
parentId:'1'
}, {
name: '晋城',
value: 100,
parentId:'1'
}, {
name: '朔州',
value: 100,
parentId:'1'
}, {
name: '原平',
value: 100,
parentId:'1'
}, {
name: '离石',
value: 100,
parentId:'1'
}, {
name: '临汾',
value: 100,
parentId:'1'
}, {
name: '运城',
value: 100,
parentId:'1'
}, {
name: '新疆',
value: 100,
parentId:'2'
}, {
name: '驻马店',
value: 100,
parentId:'2'
}, {
name: '海口',
value: 100,
parentId:'2'
}, {
name: '广州',
value: 100,
parentId:'2'
}, {
name: '济南',
value: 100,
parentId:'2'
}, {
name: '郑州',
value: 100,
parentId:'2'
}, {
name: '呼市',
value: 100,
parentId:'2'
}, {
name: '天津',
value: 100,
parentId:'2'
}, {
name: '北京',
value: 100,
parentId:'2'
}, {
name: '沈阳',
value: 100,
parentId:'2'
}, {
name: '太原',
value: 100,
parentId:'3'
}]
},
vue.js部分
mounted() {
this.initEcharts()
},
methods: {
initEcharts() {
var names=[]
for(var i in this.pieData.children){
names[i]=this.pieData.children[i].name
}
for(var y in this.pieData.parent){
names.unshift(this.pieData.parent[y].name)
}
var colors = [
'#5B9CD6','#F6DD38','#ED7D31','#8CC167','#876415','#ED7E2F','#37a2da','#ba62b0','#4471C4','#44682B','#F1975B',
'#FECD33','#06cb7f','#265D93','#d4461b','#636363','#3EBEFD','#244676','#7CAFDE','#B7B7B7','#e9a692'
]
let myChart = this.$echarts.init(this.$refs.echarts);
/* myChart.clear() //清除画布 */
let option = {
animation: false,
color: colors,
tooltip: {
trigger: 'item',
//formatter: '{b}: {c} ({d}%)',
formatter: function (params) {
return params.data.name + ':' + params.data.value + '万元' + '<br/>' + '占比:' + params.percent + "%";
},
borderWidth: '1',
borderColor: '#f5f9fd',
boxShadow: '0 0 9px 3px #f5f9fd',
textStyle: {
color: '#ffffff',
},
},
legend: {
orient: 'vertical',
x: 'right',
padding: [10,15],
data:names,
symbolKeepAspect:true,
itemWidth: 10,
itemHeight: 10,
left: '60%',
right:'7%',
itemGap: 9,
top:'3%',
textStyle: { //图例文字的样
fontSize: 14
},
},
series: [{
name: '',
type: 'pie',
center: ["32%", "53%"],
radius: ['0', '40%'],
label: {
position: 'inner',
formatter: function (params) {
/* console.log(params) */
if(params.data.value > 0){
return params.data.name
}
},
itemWidth:'10',
itemHeight:'10',
fontSize: 14,
color: '#ffffff',
},
labelLine: {
show: false
},
data: this.pieData.parent
}, {
name: '',
type: 'pie',
center: ["32%", "53%"],
radius: ['40%', '70%'],
label: {
show:false
},
data: this.pieData.children,
}]
};
// 2、调用setOption
myChart.setOption(option)
///3、在渲染点击事件之前先清除点击事件
myChart.off('click')
myChart.off('legendselectchanged')
//图例点击事件
myChart.on('legendselectchanged', function(obj) {
var selectfalseName=[]//取消勾选的数组
var selectedName=[]//勾选的数组
var option = this.getOption();
for(var i in obj.selected){
if(obj.name === i){//判断seleted中哪个是选中图例,勾选是true,取消勾选是false
if(obj.selected[i]){//传1是加数据
app.relodaData(obj.name,1);
}else{//传2是减数据
app.relodaData(obj.name,2);
}
}
}
for(var k in app.pieData.parent){
//判断如果value=0,取消勾选
if(app.pieData.parent[k].value == 0){
selectfalseName.push(app.pieData.parent[k].name)
}
if(app.pieData.parent[k].value > 0 ){
selectedName.push(app.pieData.parent[k].name)
}
}
if(selectfalseName.length > 0){
for(var j in selectfalseName){
myChart.setOption({
legend:{selected:{[selectfalseName[j]]: false}}
})
}
}
if(selectedName.length > 0){
for(var j in selectedName){
myChart.setOption({
legend:{selected:{[selectedName[j]]: true}}
})
}
}
});
},
relodaData(param,type){
var pId,cValue;
for(var i in this.pieData.children){
if(param == this.pieData.children[i].name){
pId = this.pieData.children[i].parentId
cValue = this.pieData.children[i].value
}
}
for(var j in this.pieData.parent){
if(pId === this.pieData.parent[j].id){
if(type == 1){
this.pieData.parent[j].value += cValue;
}else{
this.pieData.parent[j].value -= cValue;
}
this.initEcharts();
}
}
},
}
只能点击外环legend,内环的值跟着减少或增加