ECharts實(shí)現(xiàn)數(shù)據(jù)超出Y軸最大值max但不隱藏

更新時(shí)間：2022年10月29日 14:47:25 作者：MiyueFE

這篇文章主要為大家介紹了ECharts實(shí)現(xiàn)數(shù)據(jù)超出Y軸最大值max但不隱藏實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

需求

Y軸必須有最大值，我的折線圖的數(shù)據(jù)可能會(huì)超過這個(gè)最大值，但是！我需要讓他的刻度顯示在最大值的位置但是提示框顯示的是原來的值。

如下圖：

先翻翻文檔

yAxis

好家伙，不看不知道一看嚇一跳，光 Y 軸的 第一層配置就三十幾項(xiàng)。不過好在現(xiàn)在我們不需要關(guān)注其他的，找找與數(shù)值范圍限制的相關(guān)屬性吧：

min：設(shè)置 y 軸刻度最小值，默認(rèn)是 小于等于所有數(shù)據(jù)最小值 的值，具體根據(jù)刻度單位進(jìn)行計(jì)算；手動(dòng)設(shè)置后，小于該值的部分將不予顯示
max：設(shè)置 y 軸刻度最大值，默認(rèn)是 大于等于所有數(shù)據(jù)最小值 的值，具體根據(jù)刻度單位進(jìn)行計(jì)算；手動(dòng)設(shè)置后，大于該值的部分將不予顯示
splitNumber：刻度數(shù)量，只能用于 value 數(shù)值類型的數(shù)據(jù)
minInterval：自動(dòng)計(jì)算的坐標(biāo)軸最小間隔大小，只在數(shù)值軸或時(shí)間軸中（'value' 或 'time'）有效。
maxInterval：自動(dòng)計(jì)算的坐標(biāo)軸最大間隔大小，只在數(shù)值軸或時(shí)間軸中（'value' 或 'time'）有效。
interval：強(qiáng)制設(shè)置坐標(biāo)軸分割間隔。

這里面的 splitNumber 與 interval 算是一個(gè)相對(duì)概念，一般設(shè)置一個(gè)或者都不設(shè)置就行了。

根據(jù)我們產(chǎn)品同學(xué)的需求，這里肯定是需要一個(gè) max 配置的，但是設(shè)置以后超出 max 的數(shù)據(jù)部分就不能顯示了，找遍了 y 軸的配置都沒有對(duì)應(yīng)的解決方案，這咋辦呢

此時(shí)效果如下，超出部分直接顯示為被截?cái)?/p>

那既然 y 軸沒有，我們就試試可以不可以從 data 數(shù)據(jù)中下手，也就是series 配置，因?yàn)槭钦劬€圖部分，所以就直接看折線了。

series.Line

en... 仔細(xì)一看這也有好幾十個(gè)配置項(xiàng)，那就慢慢看吧。

在大致找了一圈之后，發(fā)現(xiàn)與數(shù)據(jù)顯示相關(guān)的屬性，大概有以下幾個(gè)：

data：當(dāng)然這個(gè)就不用說了，沒有這個(gè)都沒有顯示的內(nèi)容。不過這里有一些值得注意的地方：

當(dāng)某個(gè)數(shù)據(jù)是 -、null 或者 undefined 時(shí)，該處對(duì)應(yīng)的圖元素會(huì)消失，折線圖會(huì)斷開
當(dāng)使用的是 value 或者 log 類數(shù)據(jù)時(shí)，可以使用字符串形式的數(shù)字（當(dāng)然這個(gè)字符串必須可以被 Number 正常轉(zhuǎn)化）
當(dāng)使用的是 value 或者 log 類數(shù)據(jù)時(shí)，不僅可以使用 number 和 string，也可以使用 對(duì)象元素，但其中必須有一個(gè) value 屬性指定一個(gè)具體數(shù)值用來在圖表上顯示

yAxisIndex 與 xAxisIndex：用來指定對(duì)應(yīng)的坐標(biāo)軸

label：每項(xiàng)數(shù)據(jù)的數(shù)值在圖表上的顯示，對(duì)象形式的配置項(xiàng)，內(nèi)部包含一個(gè) formatter 配置用來進(jìn)行轉(zhuǎn)換
emphasis：折線圖數(shù)據(jù) 高亮狀態(tài)（被選中狀態(tài)/鼠標(biāo) hover 狀態(tài)） 下的顯示配置，內(nèi)部也包含與外部相同 label、itemStyle 等配置
tooltip：當(dāng)前系列特定的 tooltip 的顯示配置，內(nèi)部包含 兩個(gè)數(shù)據(jù)處理配置：formatter 和 valueFormatter

看到這里其實(shí)可以發(fā)現(xiàn)，與顯示相關(guān)的最重要的就是 formatter 和 valueFormatter。其中 valueFormatter 是一個(gè)以當(dāng)前值為參數(shù)的回調(diào)函數(shù)，返回一個(gè)字符串，而 formatter 則是一個(gè) 字符串模板 或者 函數(shù)形式，

關(guān)于 formatter 的具體說明可以看文檔 tooltip.formatter，函數(shù)說明實(shí)在是太多了，不太好總結(jié)。

解決方案

看完了文檔之后，就發(fā)現(xiàn)突然有了一個(gè)好主意。

把原本的 data 數(shù)組轉(zhuǎn)換成一個(gè)特殊對(duì)象數(shù)組，用 value 屬性來控制顯示不超過 y 軸 max 值，用另外一個(gè)屬性 realValue 來保存原始值，最后再用 tooltip 的 formatter 轉(zhuǎn)換一下不就行了？

說干就干，首先就處理一下原始的數(shù)值數(shù)組吧。

const reallyData = [2.0, 18.2, 3.3, 4.5, 16.3, 10.2, 20.3]
const formatData = reallyData.map(realValue => ({value: realValue >= 15 ? 15 : realValue, realValue }))

然后再處理一下顯示的配置吧。

因?yàn)樵趕eries.line.tooltip 中配置的 formatter 僅適用于 tooltip.trigger 為 item 時(shí)有效，不滿足場景，所以只能在外面的 tooltip 中配置。兩者的配置項(xiàng)都是一樣的。

tooltip: {
  trigger: 'axis',
  axisPointer: {
    type: 'cross',
    crossStyle: {
      color: '#999'
    }
  },
  formatter(params) {
    return params.reduce((res, item, index) => {
      if (index === 0) {
        res += `${item.axisValue}
`
      }
      if (item.seriesName === 'Temperature') {
        res += `${item.marker + item.seriesName + item.data.realValue} ℃
`
      } else {
        res += `${item.marker + item.seriesName + item.data} ml
`
      }
      return res
    }, '')
  }
}

因?yàn)橛卸鄠€(gè)數(shù)據(jù)，為了不影響其他數(shù)據(jù)的顯示，所以需要 判斷數(shù)據(jù)標(biāo)識(shí)，也就是 series 中每個(gè)數(shù)據(jù)項(xiàng)配置的 name 字段，這里可以通過 seriesName 獲取。其中的 marker 是本身的 圖例顯示節(jié)點(diǎn)。

當(dāng)匹配到我們需要處理的那一項(xiàng)數(shù)據(jù)時(shí)，可以通過手動(dòng)設(shè)置我們需要的值來回顯，最后返回一個(gè)字符串或者一個(gè) DOM 結(jié)構(gòu)即可。

完整代碼

  var dom = document.getElementById('chart-container');
  var myChart = echarts.init(dom, null, {
    renderer: 'canvas',
    useDirtyRect: false
  });
  var app = {};

  var option;

  const testData = [2.0, 18.2, 3.3, 4.5, 16.3, 10.2, 20.3].map(num => ({value: num >= 15 ? 15 : num, num }))

  option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      },
      formatter(params) {
        console.log(params);
        return params.reduce((res, item, index) => {
          if (index === 0) {
            res += `${item.axisValue}
`
          }
          if (item.seriesName === 'Temperature') {
            res += `${item.marker + item.seriesName + item.data.num} ℃
`
          } else {
            res += `${item.marker + item.seriesName + item.data} ml
`
          }
          return res
        }, '')
      }
    },
    legend: {
      data: ['Evaporation', 'Precipitation', 'Temperature']
    },
    xAxis: [
      {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisPointer: {
          type: 'shadow'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: 'Precipitation',
        min: 0,
        max: 250,
        interval: 50,
        axisLabel: {
          formatter: '{value} ml'
        }
      },
      {
        type: 'value',
        name: 'Temperature',
        min: 0,
        max: 15,
        interval: 5,
        axisLabel: {
          formatter: '{value} °C'
        }
      }
    ],
    series: [
      {
        name: 'Evaporation',
        type: 'bar',
        tooltip: {
          valueFormatter: function (value) {
            return value + ' ml';
          }
        },
        data: [
          2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
        ]
      },
      {
        name: 'Precipitation',
        type: 'bar',
        tooltip: {
          valueFormatter: function (value) {
            return value + ' ml';
          }
        },
        data: [
          2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
        ]
      },
      {
        name: 'Temperature',
        type: 'line',
        yAxisIndex: 1,
        data: testData
      }
    ]
  };

  if (option && typeof option === 'object') {
    myChart.setOption(option);
  }

  console.log(testData);

  window.addEventListener('resize', myChart.resize);

以上就是ECharts實(shí)現(xiàn)數(shù)據(jù)超出Y軸最大值max但不隱藏的詳細(xì)內(nèi)容，更多關(guān)于ECharts數(shù)據(jù)超出Y軸最大值不隱藏的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: