ECharts折线图缩放后仅显示区内线段的问题及解决咨询

这个问题我之前也碰到过，其实不是line类型的锅，是ECharts默认的dataZoom行为导致的——默认情况下dataZoom会过滤掉视图范围外的数据点，所以折线只会在可见的点之间绘制线段。下面给你两种可行的解决方案：

方案1：修改dataZoom的过滤模式 #

直接给dataZoom配置filterMode: 'none'，这个设置会让dataZoom只调整图表的视图范围，不过滤任何数据点。这样折线会完整显示所有线段，包括视图外延伸的部分。

修改后的代码示例：

option = {
  xAxis: {},
  yAxis: {},
  toolbox: {
    left: 'center',
    feature: {
      dataZoom: { 
        yAxisIndex: 'none',
        filterMode: 'none' // 关键配置
      },
      restore: {},
      saveAsImage: {}
    }
  },
  series: [{
    data: [
      [0.0, 2.26], [4.0, 4.26], [5.0, 5.68], [6.0, 7.24],
      [7.0, 4.82], [8.0, 6.95], [9.0, 8.81], [10.0, 8.04],
      [11.0, 8.33], [12.0, 10.84], [13.0, 7.58], [14.0, 9.96]
    ],
    type: 'line'
  }]
};

方案2：双Series叠加（兼顾性能与完整折线） #

如果你的数据集很大，filterMode: 'none'可能会有性能问题，这时可以用两个series叠加：

• 一个line类型的series，设置silent: true（不响应交互）、lineStyle: {opacity: 0.5}（半透明），用来显示完整的折线；
• 另一个line或scatter类型的series，正常响应dataZoom的过滤，用来显示视图内的点和交互元素。

代码示例：

option = {
  xAxis: {},
  yAxis: {},
  toolbox: {
    left: 'center',
    feature: {
      dataZoom: { yAxisIndex: 'none' },
      restore: {},
      saveAsImage: {}
    }
  },
  series: [
    // 底层完整折线，不响应交互
    {
      data: [
        [0.0, 2.26], [4.0, 4.26], [5.0, 5.68], [6.0, 7.24],
        [7.0, 4.82], [8.0, 6.95], [9.0, 8.81], [10.0, 8.04],
        [11.0, 8.33], [12.0, 10.84], [13.0, 7.58], [14.0, 9.96]
      ],
      type: 'line',
      silent: true,
      lineStyle: { opacity: 0.5 },
      symbol: 'none' // 隐藏底层的点
    },
    // 上层交互用的series，只显示视图内的点和线段
    {
      data: [
        [0.0, 2.26], [4.0, 4.26], [5.0, 5.68], [6.0, 7.24],
        [7.0, 4.82], [8.0, 6.95], [9.0, 8.81], [10.0, 8.04],
        [11.0, 8.33], [12.0, 10.84], [13.0, 7.58], [14.0, 9.96]
      ],
      type: 'line'
    }
  ]
};

另外你提到的scatter类型没有连线选项，确实ECharts里scatter本身只显示点，要连线的话还是得用line类型，或者用上面双series的方式结合。

内容的提问来源于stack exchange，提问作者ys4503