echarts嵌套饼图点击legend内外联动

嵌套饼图数据:

                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,内环的值跟着减少或增加

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值