echarts折线图滚动

您可以使用 echarts 提供的数据区域缩放和滚动功能来实现折线图的滚动效果。以下是一个示例代码，演示了如何在 echarts 中实现折线图的滚动：

// 初始化echarts实例
var myChart = echarts.init(document.getElementById('chart'));

// 模拟数据
var dataX = [];
var dataY = [];
for (var i = 0; i < 1000; i++) {
  dataX.push('data' + i);
  dataY.push(Math.random() * 100);
}

// 指定图表的配置项和数据
var option = {
  xAxis: {
    type: 'category',
    data: dataX,
    boundaryGap: false, // 去除边界空白
    axisLabel: {
      interval: function (index, value) {
        // 控制横轴标签显示间隔，可根据需求调整
        return index % 50 === 0 ? true : false;
      }
    }
  },
  yAxis: {
    type: 'value'
  },
  dataZoom: [
    { // 数据区域缩放
      type: 'inside',
      start: 0,
      end: 100
    },
    { // 滚动条
      type: 'slider',
      show: true,
      start: 0,
      end: 100,
      height: 15,
      bottom: 10
    }
  ],
  series: [{
    name: '折线图',
    type: 'line',
    smooth: true,
    data: dataY
  }]
};

// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);

在上述代码中，首先通过 `echarts.init` 方法初始化了一个 echarts 实例，并指定了图表要渲染到的容器。

然后，根据需求构建了 x 轴和 y 轴的配置项，并在 x 轴上设置了 `boundaryGap: false`，这样可以去除横轴两端的空白。

接下来，使用 `dataZoom` 配置项来定义数据区域缩放和滚动条。其中，`type: 'inside'` 表示数据区域缩放，`type: 'slider'` 表示滚动条。通过设置 `start` 和 `end` 属性来控制显示的数据范围。

最后，使用 `setOption` 方法将配置项应用于图表实例，从而显示出折线图。

您可以根据实际需求调整各个配置项的数值和样式，以满足您的需求。希望对您有帮助！