echarts多Y轴刻度保持一致

最新推荐文章于 2024-03-27 09:49:24 发布

码老二

最新推荐文章于 2024-03-27 09:49:24 发布

阅读量1.6k

点赞数

分类专栏： echarts 文章标签： javascript

本文链接：https://blog.csdn.net/Class2Grade3/article/details/103937561

版权

本文介绍了如何在ECharts中保持多Y轴刻度一致。通过计算每组数据的最大值并进行等分，同时对最大值进行适当调整，确保刻度优雅展示。示例代码展示了项目中对ECharts的二次封装关键部分。

摘要由CSDN通过智能技术生成

先展示效果图如下：

实现方法是通过官网提供的配置项
splitNumber
interval

实现的思路为：
算出每组数据的最大值，将每组数据分割为相同的段数，为了每段刻度数据展示优雅，我将每组的数据的最大值向上取整到整十整百等等，根据实际的数据来定，源代码针对项目对echarts做了二次封装，以下展示部分主要代码

// 处理每组数据的类方法
class ChartDataHandle {

  constructor (arr) {
    this.arr = arr
  }

  clacMax () {
    const newArr = this.arr
    newArr.sort((a, b) => a - b)
    return newArr[newArr.length-1]
  }

  interval (count) {
    const theMax = this.clacMax()
    const thisMaxStr = theMax + ''
    const start = Number(thisMaxStr.substr(0, 1))
    if (start < 9) {