echarts實(shí)現(xiàn)動態(tài)y軸范圍且平均等分輔助線

導(dǎo)語，一堆廢話

用echarts繪制走勢圖時(shí)，你是否也有這樣的煩惱，數(shù)據(jù)的值普遍較大，但是數(shù)據(jù)間的差值卻微乎其微，此時(shí)默認(rèn)生成的走勢圖就偏向于一條直線，根本沒有參考意義。
那有啥方法可以使得y軸范圍隨數(shù)據(jù)變化，數(shù)據(jù)線永遠(yuǎn)在圖標(biāo)的中間范圍顯示，輔助線又能均等分呢。
max+min+interval的方式就能輕松解決該問題，到時(shí)候無論是數(shù)據(jù)一會是0.003還是3000，你都不用擔(dān)心如何處理圖表范圍的問題。

最終效果

最終效果.png

正文

  1. 首先我們還是先去官網(wǎng)考一個(gè)基礎(chǔ)折線圖表


    1-基礎(chǔ)折線圖.png

  2. 給折線圖加點(diǎn)自己的數(shù)據(jù)，和自己喜歡的樣式（體現(xiàn)問題）
    數(shù)據(jù)相差不到1，但數(shù)據(jù)普遍大于100時(shí)，走勢圖就趨于一條直線，且偏上，體現(xiàn)不出來數(shù)據(jù)的變化。體現(xiàn)不了數(shù)據(jù)變化的走勢圖沒有意義。

    2-增加數(shù)據(jù)和樣式.png

let dateList = ["2021/01/03", "2021/01/04", "2021/01/05", "2021/01/06", "2021/01/07", "2021/01/08", "2021/01/09", "2021/01/10", "2021/01/11", "2021/01/12", "2021/01/13", "2021/01/14", "2021/01/15", "2021/01/16", "2021/01/17", "2021/01/18", "2021/01/19", "2021/01/20", "2021/01/21", "2021/01/22", "2021/01/23", "2021/01/24", "2021/01/25", "2021/01/26", "2021/01/27", "2021/01/28", "2021/01/29"]
// 此處為處理x軸值向中間靠攏，且不被截?cái)啵埐灰S意修改空格個(gè)數(shù)
dateList[0] = '                 ' + dateList[0];
dateList[dateList.length - 1] = dateList[dateList.length - 1] + '                   ';
let dataList= ["109.34", "109.35", "109.36", "109.37", "109.38", "109.39", "109.40", "109.41", "109.42", "109.42", "109.43", "109.44", "109.44", "109.45", "109.46", "109.47", "109.48", "109.49", "109.50", "109.50", "109.51", "109.52", "109.53", "109.54", "109.55", "109.55", "109.49"]
option = {
    xAxis: {
        type: 'category',
        data:dateList,
         axisLabel: {
          // 此處為處理x軸值只顯示第一個(gè)和最后一個(gè)日期
          interval: dateList.length - 2,
          textStyle: {
            color: '#999',//坐標(biāo)值得具體的顏色

          }
        },
        axisLine: {
          show: false,//x軸線隱藏
          fontSize: 12,
        },
        axisTick: {
          show: false,//隱藏x軸的標(biāo)點(diǎn)
        },
    },
    yAxis: {
        type: 'value',
         axisLabel: {
          textStyle: {
            color: '#999',

          },
          interval: 'auto',
          formatter: function (value, index) {
           return value.toFixed(2) + '%';
          }
        },
        // 顯示分隔線
        splitLine: {
          show: true,
          lineStyle: {
            color: ['#ccc'],
            width: 1,
            type: 'solid'
          }
        },
    },
    series: [{
        data: dataList,
        type: 'line',
        symbol: 'circle',
        symbolSize: 4,
        itemStyle: {
          color: '#fb563a'
        },
        // 漸變色填充
        areaStyle: {
          // origin設(shè)置填充起始位置，auto默認(rèn)y=0開始,start則從min處開始
          origin: 'start',
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: '#fb563a' // 0% 處的顏色
            }, {
              offset: 1, color: '#fff' // 100% 處的顏色
            }],
            global: false // 缺省為 false
          }
        }
    }]
};
  1. 計(jì)算y軸的范圍
    上面的圖表因?yàn)閿?shù)值變化太小完全體現(xiàn)不出數(shù)據(jù)的變化趨勢，所以我們應(yīng)該縮小y軸的范圍，并且將數(shù)據(jù)線集中在圖標(biāo)中部，而不是偏上。
    3.1. 首先我習(xí)慣應(yīng)用三分原則，如下
    3-1-三分原則.png

    所以數(shù)據(jù)的最大值max與最小值min之差正好要是一份的值，
    yMax = max + (max-min)
    yMin = min - (max-min)     
// 計(jì)算數(shù)據(jù)最大值和最小值
let minValue = '0'
let maxValue = '0'
let list = dataList.filter(item => (item && item != 'null' && item != 'NaN'))
let precision = 10000 //精度
maxValue = Math.ceil(Math.max.apply(null, list) * precision) / precision;
minValue = Math.floor(Math.min.apply(null, list) * precision) / precision;
// 計(jì)算間隔，返回y軸最大值，y軸最小值 ，間隔
let getLeftData = (min, max) => {
    // 控制分隔條數(shù)，
    let diff = max - min
    return {
      max: max + diff,
      min: min - diff,
    };
}
let interObj = getLeftData(minValue, maxValue)

3.2. 將計(jì)算出的y軸范圍應(yīng)用于echarts
使用yAxis屬性下的min和max可以設(shè)置范圍

       yAxis: {
        type: 'value',
        // 設(shè)置y軸最大值
        min: interObj.min,
        // 設(shè)置y軸最小值
        max: interObj.max,
        ...
    },
3-2-設(shè)置了y軸范圍.png

  1. 輔助線平分
    現(xiàn)在的圖表還存在輔助線不平分的問題，可以看到圖表中部的輔助線是平分的，但是y軸最大值和最小值上的輔助線的出現(xiàn)使得上下邊緣的輔助線間隔偏小。


    4-邊緣輔助線.png

4.1. 利用splitNumber（無效）
splitNumber:'5'
添加該屬性沒有效果，是因?yàn)槲覀冊O(shè)置了y軸的max和min，所以splitNumber不起作用
4.2. 使用interval去分隔
interval該方式是通過按設(shè)置的值去切割軸，如y軸的interval設(shè)置為100，則會將y軸按每份間隔100去分割
故，我們修改一下方法getLeftData 去獲取分隔間隔值

...
let getLeftData = (min, max) => {
    // 控制分隔條數(shù)，
    let diff = max - min
    return {
      max: max + diff,
      min: min - diff,
      // 分割成5等份 
      interval: (max + diff - (min - diff)) / 5,
    };
}
let interObj = getLeftData(minValue, maxValue)
option = {
   ...
    yAxis: {
        type: 'value',
        // 設(shè)置y軸間隔線
        interval:interObj.interval,
        // 設(shè)置y軸最大值
        min: interObj.min,
        // 設(shè)置y軸最小值
        max: interObj.max,
       ...
    },
    ....
};
4-2-interval設(shè)置間隔.png
  1. 完整代碼


// 準(zhǔn)備日期數(shù)據(jù)
let dateList = ["2021/01/03", "2021/01/04", "2021/01/05", "2021/01/06", "2021/01/07", "2021/01/08", "2021/01/09", "2021/01/10", "2021/01/11", "2021/01/12", "2021/01/13", "2021/01/14", "2021/01/15", "2021/01/16", "2021/01/17", "2021/01/18", "2021/01/19", "2021/01/20", "2021/01/21", "2021/01/22", "2021/01/23", "2021/01/24", "2021/01/25", "2021/01/26", "2021/01/27", "2021/01/28", "2021/01/29"]
// 此處為處理x軸值向中間靠攏，且不被截?cái)?，請不要隨意修改空格個(gè)數(shù)
dateList[0] = '                 ' + dateList[0];
dateList[dateList.length - 1] = dateList[dateList.length - 1] + '                   ';
// 準(zhǔn)備數(shù)值數(shù)據(jù)
let dataList= ["109.34", "109.35", "109.36", "109.37", "109.38", "109.39", "109.40", "109.41", "109.42", "109.42", "109.43", "109.44", "109.44", "109.45", "109.46", "109.47", "109.48", "109.49", "109.50", "109.50", "109.51", "109.52", "109.53", "109.54", "109.55", "109.55", "109.49"]
// let dataList= ["10.934", "10.935", "10.936", "10.937", "10.938", "10.939", "10.940", "10.941", "10.942", "10.942", "10.943", "10.944", "10.944", "10.945", "10.946", "10.947", "10.948", "10.949", "10.950", "10.950", "10.951", "10.952", "10.953", "10.954", "10.955", "10.955", "10.949"]
// let dataList= ["0.10934", "0.10935", "0.10936", "0.10937", "0.10938", "0.10939", "0.10940", "0.10941", "0.10942", "0.10942", "0.10943", "0.10944", "0.10944", "0.10945", "0.10946", "0.10947", "0.10948", "0.10949", "0.10950", "0.10950", "0.10951", "0.10952", "0.10953", "0.10954", "0.10955", "0.10955", "0.10949"]
// 計(jì)算數(shù)據(jù)最大值和最小值
let minValue = '0'
let maxValue = '0'
let list = dataList.filter(item => (item && item != 'null' && item != 'NaN'))
let precision = 10000 //精度
maxValue = Math.ceil(Math.max.apply(null, list) * precision) / precision;
minValue = Math.floor(Math.min.apply(null, list) * precision) / precision;
// 計(jì)算間隔，返回y軸最大值，y軸最小值 ，間隔
let getLeftData = (min, max) => {
    // 控制分隔條數(shù)，
    let diff = max - min
    return {
      max: max + diff,
      min: min - diff,
      // 分割成5等份 
      interval: (max + diff - (min - diff)) / 5,
    };
}
let interObj = getLeftData(minValue, maxValue)

option = {
    xAxis: {
        type: 'category',
        data:dateList,
         axisLabel: {
          // 此處為處理x軸值只顯示第一個(gè)和最后一個(gè)日期
          interval: dateList.length - 2,
          textStyle: {
            color: '#999',//坐標(biāo)值得具體的顏色

          }
        },
        axisLine: {
          show: false,//x軸線隱藏
          fontSize: 12,
        },
        axisTick: {
          show: false,//隱藏x軸的標(biāo)點(diǎn)
        },
    },
    yAxis: {
        type: 'value',
        // 設(shè)置y軸間隔
        interval:interObj.interval,
        // 設(shè)置y軸最大值
        min: interObj.min,
        // 設(shè)置y軸最小值
        max: interObj.max,
        axisLabel: {
          textStyle: {
            color: '#999',
          },
          interval: 'auto',
          formatter: function (value, index) {
           return value.toFixed(2) + '%';
          }
        },
        // 顯示分隔線
        splitLine: {
          show: true,
          lineStyle: {
            color: ['#ccc'],
            width: 1,
            type: 'solid'
          }
        },
    },
    series: [{
        data: dataList,
        type: 'line',
        symbol: 'circle',
        symbolSize: 4,
        itemStyle: {
          color: '#fb563a'
        },
        // 漸變色填充
        areaStyle: {
          // origin設(shè)置填充起始位置，auto默認(rèn)y=0開始,start則從min處開始
          origin: 'start',
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: '#fb563a' // 0% 處的顏色
            }, {
              offset: 1, color: '#fff' // 100% 處的顏色
            }],
            global: false // 缺省為 false
          }
        }
    }]
};
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容