echarts折线图中横坐标数据太多导致坐标重合问题

一、问题描述

问题：echarts line图横坐标数据太多，密密麻麻被挤压在一起，如下：

二、解决方法

方法一：可以参考官方例子，配置datazoom，echarts.apache.org/examples/zh…

dataZoom: [
    {
      type: 'inside',
      realtime: true,
      start: 30,
      end: 70,
      xAxisIndex: 0
    }
  ],

1. type: 'inside' ：

   • 类型：string
   • 描述：指定 dataZoom 的类型。'inside' 表示内置的数据区域缩放，用户可以通过鼠标滚轮或触摸屏手势进行缩放和平移。

2. realtime: true：

   • 类型：boolean
   • 描述：是否实时更新视图。如果设置为 true，则在拖动或缩放过程中会实时更新视图；如果设置为 false，则在拖动或缩放结束后更新视图。

3. start: 30：

   • 类型：number
   • 描述：初始显示的数据窗口的起始位置，单位是百分比。30 表示从数据的 30% 处开始显示。

4. end: 70：

   • 类型：number
   • 描述：初始显示的数据窗口的结束位置，单位是百分比。70 表示到数据的 70% 处结束显示。

5. xAxisIndex: 0：

   • 类型：number 或 Array<number>
   • 描述：指定 dataZoom 控制的 x 轴的索引。0 表示控制第一个 x 轴。如果需要控制多个 x 轴，可以传入一个数组，例如 [0, 1]。

方法二：根据横左边轴的长度动态设置间隔interval，参考

效果如下图：