当前位置: 首页 > Web前端 > HTML5

Echarts圆环百分比数据溢出解决方法

时间:2023-04-05 10:53:48 HTML5

这是echarts圆环百分比图形不规则导致的数据溢出。原因的例子来自:data:[{...}];value:100-value_huizong,如果value_huizong大于100,溢出数据会导致负值,所以出现问题。解决方法:判断思路:当各模块数据大于100时,赋值100(但标签中仍显示溢出数据,如131%)。如果小于100,则显示正常值。附上最终效果和代码:varmyChart=echarts.init(document.getElementById('huizong'));vardata1={value:131,//摘要文本:'Summary',color:'#FF543C',};vardata2={value:79,//质量文本:'Quality',color:'#3E88F0',};vardata3={value:1221,//环保文字:'环保',color:'#2FD574',};让value1=data1.value||0;让value2=data2.value||0;让value3=data3.value||0;if(value1>100){value_huizong=100;}else{value_huizong=value1;};if(value2>100){value_zhiliang=100;}else{value_zhiliang=value2;};if(value3>100){value_huanbao=100;}else{value_huanbao=value3;};option={backgroundColor:'#fff',//工具提示:{//触发器:'item',//},series:[{name:'汇总',type:'pie',radius:['35','45'],center:['15%','35%'],hoverAnimation:false,label:{normal:{position:'中心'}},数据:[{值:value1,名称:data1.text,itemStyle:{正常:{颜色:data1.color,}},标签:{正常:{textStyle:{fontSize:12,fontWeight:100,color:data1.color,}}}},{value:100-value_huizong,name:'占比',tooltip:{show:false},itemStyle:{正常:{颜色:'#E0E3E9',}},标签:{正常:{格式化程序:value1+''+'%',textStyle:{fontSize:16,颜色:data1.color}},}}]},{name:'质量',type:'pie',radius:['35','45'],center:['48%','35%'],hoverAnimation:false,label:{normal:{position:'center'}},data:[{value:value2,name:data2.text,itemStyle:{normal:{color:data2.color,}},label:{normal:{textStyle:{fontSize:12,fontWeight:100,color:data2.color,}}}},{value:100-value_zhiliang,name:'占比',tooltip:{show:false},itemStyle:{正常:{颜色:'#E0E3E9',}},标签:{正常:{格式化程序:value2+''+'%',textStyle:{fontSize:16,颜色:data2.color}},}}]},{name:'环保',type:'pie',radius:['35','45'],center:['81%','35%'],hoverAnimation:false,label:{normal:{position:'center'}},data:[{value:value3,名称:data3.text,itemStyle:{normal:{color:data3.color,}},标签:{normal:{textStyle:{fontSize:12,fontWeight:100,color:data3.color,}}}},{value:100-value_huanbao,name:'占比',tooltip:{show:false},itemStyle:{normal:{color:'#E0E3E9',}},label:{normal:{formatter:value3+''+'%',textStyle:{fontSize:16,color:data3.color}},}}]}]}//使用刚刚指定的配置项和数据显示图表myChart.setOption(option);