饼图数据差距大,导致饼图半径差距大,图形展示效果不好

186 阅读1分钟

2022/6/14 星期二 晴好

饼图数据差距大,导致饼图半径差距大,图形展示效果不好

解决思路:对图表数据进行处理。

//放大值
let pieData=data.data;  // 饼图原始数据
let showData =[]; // 存放处理之后的饼图展示数据
let sum = 0, max = 0;
pieData.forEach(item => {
                            // 比较出饼图数据里的最大值
                            sum += item.value;
                            if(item.value >= max) max = item.value;
});

// 放大规则
let number = Math.round(max * 0.5); // 根据实际情况,确定你要放大的倍数,相较于整租数据的最大值
showData = pieData.map(item => {
    return {
                value: number + item.value,
                name: item.name
    }
});
//还原值(展示的时候在还原,展示实际的数值)
    tooltip: {
		trigger: 'item',
		formatter: function (param){
		 return param.name +': '+ (param.value - number) + ' ' + (((param.value - number) / sum) *100).toFixed(2) + '%'}},