这是数据溢出导致 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);