快捷導(dǎo)航

JavaScript?Echarts柱狀圖label優(yōu)化中問題針對講解

更新時(shí)間：2022年12月01日 14:47:14 作者：青春微涼不悲傷

這篇文章主要介紹了JavaScript?Echarts柱狀圖label優(yōu)化中問題，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧

問題1

由于項(xiàng)目數(shù)據(jù)記錄多或者數(shù)據(jù)值大的時(shí)候，會出現(xiàn)label重疊的現(xiàn)象，如下圖。

解決方案

針對上述問題，解決思路如下：

1、求Y軸的最大值（我們用Y軸的最大值，去計(jì)算每個(gè)柱子在整個(gè)圖中的占比）

2、計(jì)算每個(gè)數(shù)據(jù)的占比

3、占比小于某個(gè)值的label，向上移動一定距離

技術(shù)實(shí)現(xiàn)

求Y軸的最大值

由上圖可知，我們有計(jì)劃值、完成值兩組數(shù)據(jù)，且這兩組值共用一個(gè)Y軸。

上圖為觀察的5組數(shù)據(jù)的值。

echarts默認(rèn)分割段數(shù)為5，為了計(jì)算最大值，我們還默認(rèn)為5。剛開始從網(wǎng)上找了一個(gè)求最大值的公式，計(jì)算后如上圖的第一行，發(fā)現(xiàn)步長不好看，有可能還會有小數(shù)。

后來使用echarts默認(rèn)的最大值，為上圖第二行。

數(shù)據(jù)的最大值為上圖的第三行。

最大值的步長為第四行。

默認(rèn)步長為第五行。

經(jīng)觀察及多次試驗(yàn)發(fā)現(xiàn)步長可通過如下公式計(jì)算：

// 獲取步長
const getStep = (value, count) => { // count是計(jì)算的層數(shù)
     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 - 計(jì)劃值、完成值組成的數(shù)組
maxVal = stepVal * 5;

計(jì)算每個(gè)數(shù)據(jù)的占比

經(jīng)上步可計(jì)算出每個(gè)數(shù)據(jù)在整個(gè)圖中的占比。

let planRatio = parseFloat((plan / maxVal * 100).toFixed(2)); // 計(jì)劃比
let nowRatio = parseFloat((now / maxVal * 100).toFixed(2)); // 完成比

移動label

通過各數(shù)據(jù)的占比，計(jì)算兩者之間的差值，當(dāng)差距小于n時(shí)，讓該值的label向上移動。

// 移動label
data1.forEach((item, index) => {
    let planRatio = parseFloat((item / maxVal * 100).toFixed(2)); // 計(jì)劃比
    let nowRatio = parseFloat((data2[index] / maxVal * 100).toFixed(2)); // 完成比
    let nowVal;
    if (data2[index] === 0) {
         nowVal = data2[index];
    } else { // 兩個(gè)比值小于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);
})

最終效果圖

問題2

為了視覺上更直觀，客戶要求將平面柱狀圖改成立體柱狀圖，效果如下。

思路

普通柱狀圖（bar）+ 象形柱圖（pictorialBar）

難點(diǎn)1

由于數(shù)據(jù)是不固定的，所以當(dāng)數(shù)據(jù)量大的時(shí)候，普通柱狀圖的柱子寬度會自適應(yīng)，而象形圖的大小確是固定的，所以會出現(xiàn)頂部橢圓和柱子寬度不匹配的現(xiàn)象，如下圖

解決方案

根據(jù)數(shù)據(jù)長度，動態(tài)設(shè)置象形圖的大小及偏移位置。

// 不同數(shù)據(jù)長度對應(yīng)不同柱子寬度
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];
    }
}
// 不同數(shù)據(jù)長度對應(yīng)不同柱子偏移
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];
     }
}