echarts可视化之起点归零+左右0轴对齐

自领导从竞品看到起点归零功能开始 基本每个折线图都有这个需求 还会两个不同指标放在左右轴对比查看的需求 因此整理一份出来留档(思路)

参考

1. 默认状态

2. 具体需求

  1. 拖动时间轴 起点始终归零 计算策略:每条线+1 之后, 拖动时间轴范围内的数据除以该范围的起点,再-1, 即可实现拖动时间轴起点归零
  2. 左右轴要求 0 轴严格对齐 便于参照

3. 代码实现

3.1. 起点归零

既然给了策略,那就是一个算法实现的问题了。首先触发条件是拖动时间轴 那自然在 echarts 的dataZoom 方法里去实现 。

3.1.1. 第一步拿到最新时间范围的起始点下标 (s,e)

ini 复制代码
 echartsInstance.on("dataZoom", () => {
  let xAxis = echartsInstance.getModel().option.dataZoom[0];
  let s = xAxis.startValue;
  let e = xAxis.endValue;
  operateData(s, e);
});

3.1.2. 根据(s,e)重新赋值

ini 复制代码
// 简化版
const operateData = (arr: any[], s?: number, e?: number) => {
  // arr 即为需要起点归零的项
  const sIdx = s ?? 0;
  const eIdx = e ?? arr.length - 1;
  for (let i = s; i < eIdx; i++) {
    const el = arr[i];
    arr[i] = (el / arr[sIdx] - 1).toFixed(2);
  }
};
// 处理完后重新setOption

3.2. 0 轴对齐

3.2.1. 根据两组数据计算出最大最小值

ini 复制代码
const maintainScale = (originData: any) => {
  const res: any = {};
  // 1.计算每个Y轴的最大值和最小值
  originData.forEach((item: any) => {
    const yAxisIndex = item.yAxisIndex;
    const values = item.temp.map((value: any) => {
      return value;
    }); // 确保转换为整数
    if (!res[yAxisIndex]) {
      res[yAxisIndex] = {
        max: Math.max(...values),
        min: Math.min(...values),
      };
    } else {
      res[yAxisIndex].max = Math.max(res[yAxisIndex].max, ...values);
      res[yAxisIndex].min = Math.min(res[yAxisIndex].min, ...values);
    }
  });
  // 2.如果只有一个Y轴或没有Y轴,不需要调整
  if (Object.keys(res).length !== 2) {
    return false;
  }
  // 3.获取两个Y轴的最大值和最小值
  const max1 = res[0].max || 1;
  const min1 = res[0].min || 0;
  const max2 = res[1].max || 1;
  const min2 = res[1].min || 0;
  // 4.如果两个Y轴的最小值都不小于零,不需要调整
  if (min1 >= 0 && min2 >= 0) {
    return false;
  }
  // 5.计算两个Y轴数据范围的比例
  const ratio = (max1 - min1) / (max2 - min2);
  const minMax: any = {};
  if (max1 < max2 * ratio) {
    minMax.y1Max = max2 * ratio;
    minMax.y2Max = max2;
  } else {
    minMax.y1Max = max1;
    minMax.y2Max = max1 / ratio;
  }

  if (min1 < min2 * ratio) {
    minMax.y1Min = min1;
    minMax.y2Min = min1 / ratio;
  } else {
    minMax.y1Min = min2 * ratio;
    minMax.y2Min = min2;
  }

  // 6.扩展数据范围,避免数据点紧贴 Y 轴
  function gap(value: any) {
    return value * 1.05;
  }
  minMax.y1Min = gap(minMax.y1Min);
  minMax.y2Min = gap(minMax.y2Min);
  minMax.y1Max = gap(minMax.y1Max);
  minMax.y2Max = gap(minMax.y2Max);

  return minMax;
};

3.2.2. 赋值重新渲染

arduino 复制代码
const scaleNum = maintainScale(transformedData);
// 如果scaleNum不存在即用默认最大最小值
tempObj = {
  ...tempObj,
  yAxis: [
    {
      ...options.yAxis[0],
      max: (value: any) => {
        const { max } = value;
        return scaleNum ? scaleNum.y1Max : max;
      },
      min: (value: any) => {
        const { min } = value;
        return scaleNum ? scaleNum.y1Min : min;
      },
    },
    {
      ...options.yAxis[1],
      max: (value: any) => {
        const { max } = value;
        return scaleNum ? scaleNum.y2Max : max;
      },
      min: (value: any) => {
        const { min } = value;
        return scaleNum ? scaleNum.y2Min : min;
      },
    },
  ],
};
// 更新图表数据
chartInstance?.current?.setOption(tempObj);

4. 效果

相关推荐
tester Jeffky12 分钟前
JavaScript 高级特性与 ES6 新特性:正则表达式的深度探索
javascript·正则表达式·es6
谢斯27 分钟前
【electron】electron forge + vite + vue + electron-release-server 自动更新客户端
javascript·vue.js·electron
伊丶二29 分钟前
echarts图表自定义配置(二)——代码封装
javascript·vue·echarts·自定义echarts
雯0609~31 分钟前
vue3-tp8-Element:对话框实现
前端·javascript·vue.js
神膘护体小月半3 小时前
el-table 动态计算合并行
前端·javascript·vue.js
墨·殇3 小时前
vue2实现在el-table里插入el-tag
javascript·vue.js·elementui
小丸子灬7 小时前
clipboard----封装复制组件
开发语言·javascript
licy__9 小时前
Vue 2 中 v-text 和 v-html 指令的使用详解
开发语言·前端·javascript
tester Jeffky9 小时前
深入探索 jQuery:解锁前端开发的高效工具
前端·javascript·jquery
장숙혜10 小时前
elementui进度条Progress组件
javascript·elementui·ecmascript