当前位置: 首页 > Web前端 > vue.js

[记录]ECharts饼图隐藏数据为0的数据

时间:2023-03-31 22:33:03 vue.js

思路:1.为每一项数据添加默认项show为truelabel:{show:true},labelLine:{show:true}2.当遍历数据中data为0时,将show的值赋为false/*预警事件*/initCensus(){this.census={tooltip:{trigger:"item",formatter:`{a}
{b}
{c}({d}%)`,},系列:[{名称:“”,类型:“饼图”,半径:“60%”,中心:[“50%”,“50%”],数据:[{值:this.ChartData["warning"]["Storagetime"],name:"Storagetime",itemStyle:{color:"#2498ff"},label:{show:true},//添加itemlabelLine:{show:true},//添加项目},{value:this.ChartData["warning"]["combustiblegas"],name:"combustiblegas",itemStyle:{color:"#18e3ff"},label:{show:true},labelLine:{show:true},},{值:this.ChartData["预警"]["TVOC"],名称:"TVOC",itemStyle:{color:"#1fb4ff"},label:{show:true},labelLine:{show:true},},].sort(function(a,b){returna.value-b.value;}),roseType:"radius",label:{position:"outer",alignTo:"none",颜色:"#f1f1f1",},labelLine:{lineStyle:{颜色:"#f1f1f1",},平滑:0.1,长度:10,length2:12,},animationType:"scale",animationEasing:"elasticOut",animationDelay:function(idx){返回Math.random()*200;},},],};this.setEchartsHide(this.census.series[0].data);},/*隐藏数据为0的数据*/setEchartsHide(data){constArr=data.map((item)=>item.value).join("");//如果每一项都是0(图表会消失)那么不要隐藏if(+Arr){data.forEach((item)=>{if(!item.value){item.label.show=false;item.labelLine.show=false;}});}},效果示例图