1、由于值的极差比较大导致饼图半径比例较大,给用户体验不好,不太直观。
解决思路:
- 放大数据再还原之前的值
代码如下:
//放大值
var pieData=data.data;
var showData =[];
var sum = 0, max = 0;
pieData.forEach(item => {
sum += item.value;
if(item.value >= max) max = item.value;
});
// 放大规则
var number = Math.round(max * 0.5);
showData = pieData.map(item => {
return {
value: number + item.value,
name: item.name
}
});
myChart.setOption({
backgroundColor: '#fff',
legend:{
orient: 'vertical',
x: 'left',
y: '80',
padding: 10,
itemGap: 20,
textStyle: {color: '#c3cad9'},
},
title: {
text: 'IEP目标',
left: 'center',
top: 20,
textStyle: {
color: '#000'
}
},
//还原值
tooltip: {
trigger: 'item',
formatter: function (param){
return param.name +': '+ (param.value - number) + ' ' + (((param.value - number) / sum) * 100).toFixed(2) + '%'
}
},
visualMap: {
show: false,
min: 500,
max: 600,
inRange: {
}
},
series: [{
name: '访问来源',
type: 'pie',
radius: '50%',
selectedMode: 'single',
selectedOffset: 10,
clockwise: true,
center: ['50%', '50%'],
color: ['#43cadd','#3893e5','#FCC708','#03B48E'],
data:showData,
roseType: 'radius',
label: {
normal: {
rich: {
b: {
color: '#d9efff',
fontSize: 15,
height: 40
},
c: {
color: '#fff',
fontSize: 14,
fontWeight:'bold',
lineHeight: 5
},
},
}
},
itemStyle:{
borderWidth:'10',
color:'pink',
borderColor:'#FFF',
normal:{
borderWidth:'5',
borderColor:'rgba(255,255,255,2)',
},
},
labelLine: {
normal: {
backgroundColor:'yellow',
borderColor:'skyblue',
borderWidth:10,
lineStyle: {
borderColor:'skyblue',
borderWidth:10,
backgroundColor:'yellow',
}
},
}
}]
}, true);
效果如下: