Echarts 自定义y轴value值

news2024/9/23 15:26:00

在CSDN问答区，碰到一个有意思的问题，解决思路在这里记录一下。

需求为：进行四等份展示，即中间价差值 = (最大值 - 最小值) / 4，左侧数据从上到下分别为：最大值、最大值 - (最大值 - 最小值) / 4、最大值 - (最大值 - 最小值) / 2、最小值 + (最大值 - 最小值) / 4、最小值

例如有一组数据[260, 132, 232, 123, 69, 33, 134]，默认显示是如下效果。

Echarts y轴的value值，会根据series的值来自动计算得出，此时设置yAxis.data.value是无效的。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #chart {
      width: 800px;
      height: 600px;
      margin: 40px auto;
    }
  </style>
</head>

<body>
  <div id="chart"></div>
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.2/echarts.min.js"></script>
  <script>
    const data = [260, 132, 232, 123, 69, 33, 134]

    const chart = echarts.init(document.getElementById('chart'))
    chart.setOption({
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          data: data,
          type: 'line'
        }
      ]
    })
  </script>
</body>
</html>

无法设置data的value值，想来想去只能通过axisLabel的formatter 来做手脚了~

先写个方法把 y 轴值计算出来

// 通过规则计算得出 y 轴值
function computedNum(maxNum, minNum) {
  const num1 = Math.round(minNum + (maxNum - minNum) / 4)
  const num2 = Math.round(maxNum - (maxNum - minNum) / 2)
  const num3 = Math.round(maxNum - (maxNum - minNum) / 4)

  return [minNum, num1, num2, num3, maxNum]
}

const maxNum = Math.max(...data)
const minNum = Math.min(...data)
const numArr = computedNum(maxNum, minNum)

通过 formatter 强制渲染计算出的值

yAxis: {
  type: 'value',
  max: maxNum,
  min: minNum,
  splitNumber: 4,
  axisLabel: {
    formatter: (val, index) => {
      // 通过这里强制返现自己计算出的数值
      return numArr[index]
    }
  }
}

在这里插入图片描述
就变成上图这个样子，好像不太对劲，splitNumber不好使啊，官方是这么说明的

如何显示指定段数呢，这里固定了最大、最小值，计算出x段的分割间隔，是不是就能按照自定义段数显示了？

// 计算间隔值
function getInterval(arr, splitNumber) {
  // 排序 sort会改变原数组，这里slice浅拷贝一下
  const tempArr = arr.slice().sort((a, b) => a - b)
  // 最大和最小值的距离
  const distance = tempArr[tempArr.length - 1] - tempArr[0]
  // 计算等分间隔值
  const interval = distance / splitNumber
  return interval
}
const interval = getInterval(data, 4)

// yAxis 配置改为如下
yAxis: {
  type: 'value',
  max: maxNum,
  min: minNum,
  interval: interval,
  axisLabel: {
    formatter: (val, index) => {
      // 通过这里强制返现自己计算出的数值
      return numArr[index]
    }
  }
}

最终实现了需求要的效果
在这里插入图片描述

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #chart {
      width: 800px;
      height: 600px;
      margin: 40px auto;
    }
  </style>
</head>

<body>
  <div id="chart"></div>
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.2/echarts.min.js"></script>
  <script>
    const data = [260, 132, 232, 123, 69, 33, 134]

    // 通过规则计算得出 y 轴值
    function computedNum(maxNum, minNum) {
      const num1 = Math.round(minNum + (maxNum - minNum) / 4)
      const num2 = Math.round(maxNum - (maxNum - minNum) / 2)
      const num3 = Math.round(maxNum - (maxNum - minNum) / 4)

      return [minNum, num1, num2, num3, maxNum]
    }

    const maxNum = Math.max(...data)
    const minNum = Math.min(...data)
    const numArr = computedNum(maxNum, minNum)
    // 计算间隔值
    function getInterval(arr, splitNumber) {
      // 排序  sort会改变原数组，这里slice浅拷贝一下
      const tempArr = arr.slice().sort((a, b) => a - b)
      // 最大和最小值的距离
      const distance = tempArr[tempArr.length - 1] - tempArr[0]
      // 计算等分间隔值
      const interval = distance / splitNumber
      return interval
    }
    const interval = getInterval(data, 4)

    const chart = echarts.init(document.getElementById('chart'))
    chart.setOption({
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value',
        max: maxNum,
        min: minNum,
        interval: interval,
        axisLabel: {
          formatter: (val, index) => {
            // 通过这里强制返现自己计算出的数值
            return numArr[index]
          }
        }
      },
      series: [
        {
          data: data,
          type: 'line'
        }
      ]
    })
  </script>
</body>
</html>