echarts圆环百分⽐数据溢出圆环出现不规则多边形
这是数据溢出导致echarts 圆环百分⽐出现不规则图形。
原因举例来源于：data: [{...}]; value: 100 - value_huizong,
若当value_huizong⼤于100，则出现溢出数据导致出现负值，故问题产⽣。
解决办法：
判断思路：当每个模块数据⼤于100的时候，赋值100（但label中还是显⽰溢出数据，⽐如131%），若⼩于100则显⽰正常值最后效果与代码附上：
var myChart = echarts.ElementById('huizong'));
var data1 = {
value: 131, //汇总
text: '汇总',
color: '#FF543C',
};
var data2 = {
value: 79, //质量
text: '质量',
color: '#3E88F0',
};
var data3 = {
value: 1221, //环保
text: '环保',
color: '#2FD574',
};
let value1 = data1.value || 0;
let value2 = data2.value || 0;
let 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',
// tooltip: {
//    trigger: 'item',
// },
series: [{
name: '汇总',
type: 'pie',
radius: ['35', '45'],
center: ['15%', '35%'],
hoverAnimation: false,
label: {
normal: {
position: 'center'
}
},
data: [{
value: value1,
name: ,
itemStyle: {
normal: {
color: lor,
}
},
label: {
normal: {
textStyle: {
fontSize: 12,
fontWeight: 100,
color: lor,
}
}
fontweight几百正常
}
},
{
value: 100 - value_huizong,
name: '占⽐',
tooltip: {
show: false
},
itemStyle: {
normal: {
color: '#E0E3E9',
}
},
label: {
normal: {
formatter: value1 + '' + '%',                        textStyle: {
fontSize: 16,
color: lor
}
},
}
}
]
},
{
name: '质量',
type: 'pie',
radius: ['35', '45'],
center: ['48%', '35%'],
hoverAnimation: false,
label: {
normal: {
position: 'center'
}
},
data: [{
value: value2,
name: ,
itemStyle: {
normal: {
color: lor,
}
},
label: {
normal: {
textStyle: {
fontSize: 12,
fontWeight: 100,
color: lor,
}
}
}
},
{
value: 100 - value_zhiliang,
name: '占⽐',
tooltip: {
show: false
},
itemStyle: {
normal: {
color: '#E0E3E9',
}
},
label: {
normal: {
formatter: value2 + '' + '%',                        textStyle: {
fontSize: 16,
color: lor
}
},
}
}
]
},
{
name: '环保',
type: 'pie',
radius: ['35', '45'],
center: ['81%', '35%'],
hoverAnimation: false,
label: {
normal: {
position: 'center'
}
},
data: [{
value: value3,
name: ,
itemStyle: {
normal: {
color: lor,
}
},
label: {
normal: {
textStyle: {
fontSize: 12,
fontWeight: 100,
color: lor,
}
}
}
},
{
value: 100 - value_huanbao,
name: '占⽐',
tooltip: {
show: false
},
itemStyle: {
normal: {
color: '#E0E3E9',
}
},
label: {
normal: {
formatter: value3 + '' + '%',                        textStyle: {
fontSize: 16,
color: lor
}
},
}
}
]
}]
}
// 使⽤刚指定的配置项和数据显⽰图表。    myChart.setOption(option);