这是数据溢出导致echarts 圆环百分比出现不规则图形。
原因举例来源于:data: [{...}]; value: 100 - value_huizong,
若当value_huizong大于100,则出现溢出数据导致出现负值,故问题产生。
解决办法:
判断思路:当每个模块数据大于100的时候,赋值100(但label中还是显示溢出数据,比如131%),若小于100则显示正常值
最后效果与代码附上:
var myChart = echarts.init(document.getElementById('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: data1.text,
itemStyle: {
normal: {
color: data1.color,
}
},
label: {
normal: {
textStyle: {
fontSize: 12,
fontWeight: 100,
color: data1.color,
}
}
}
},
{
value: 100 - value_huizong,
name: '占比',
tooltip: {
show: false
},
itemStyle: {
normal: {
color: '#E0E3E9',
}
},
label: {
normal: {
formatter: value1 + '' + '%',
textStyle: {
fontSize: 16,
color: 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: {
normal: {
color: '#E0E3E9',
}
},
label: {
normal: {
formatter: value2 + '' + '%',
textStyle: {
fontSize: 16,
color: data2.color
}
},
}
}
]
},
{
name: '环保',
type: 'pie',
radius: ['35', '45'],
center: ['81%', '35%'],
hoverAnimation: false,
label: {
normal: {
position: 'center'
}
},
data: [{
value: value3,
name: data3.text,
itemStyle: {
normal: {
color: data3.color,
}
},
label: {
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);
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。