JavaScript Echarts柱状图Label重叠与立体化优化方案

// 获取步长
const getStep = (value, count) => { // count是计算的层数
     let num = Math.ceil(value / 10);
     return num > 15 ? getStep(num, count + 1) : num * Math.pow(10, count);
}
// 求最大值
let stepVal = getStep(_.max(dataList) / 5, 1); // dataList - 计划值、完成值组成的数组
maxVal = stepVal * 5;

let planRatio = parseFloat((plan / maxVal * 100).toFixed(2)); // 计划比
let nowRatio = parseFloat((now / maxVal * 100).toFixed(2)); // 完成比

// 移动label
data1.forEach((item, index) => {
    let planRatio = parseFloat((item / maxVal * 100).toFixed(2)); // 计划比
    let nowRatio = parseFloat((data2[index] / maxVal * 100).toFixed(2)); // 完成比
    let nowVal;
    if (data2[index] === 0) {
         nowVal = data2[index];
    } else { // 两个比值小于5，错落显示
         nowVal = Math.abs(nowRatio - planRatio) < 4 ? {value: data2[index], label: {offset: [0, -20]}} : data2[index];
    }
    option.series[0].data.push(item);
    option.series[1].data.push(nowVal);
})

// 不同数据长度对应不同柱子宽度
const getSymbolSize = () => {
   let len = dataName.length;
   switch (len) {
       case 6:
          return [24, 10];
       case 7:
          return [20, 8];
       case 8:
          return [18, 8];
       default:
          return [24, 10];
    }
}
// 不同数据长度对应不同柱子偏移
const getSymbolOffset = (i) => {
    let len = dataName.length;
    switch (len) {
        case 6:
           return i === 2 ? [-12, -6] : [12, -6];
        case 7:
           return i === 2 ? [-11, -5] : [11, -5];
        case 8:
           return i == 2 ? [-9, -5] : [9, -5];
        default:
           return i === 2 ? [-12, -6] : [12, -6];
     }
}