设置ECharts为x轴超出的可左右滑动

要实现这个功能，可以使用 ECharts 提供的 dataZoom 组件。dataZoom 组件用于区域缩放和拖动。在 ECharts 中，dataZoom 分为两种类型，一种是基于 x 轴的 dataZoom，另一种是基于 y 轴的 dataZoom。

下面是一个基于 x 轴的 dataZoom 的示例代码：

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [120, 200, 150, 80, 70, 110, 130],
    type: 'line'
  }],
  dataZoom: [{
    type: 'slider', // 滑动条型 dataZoom 组件
    start: 0, // 起始位置
    end: 100, // 结束位置
    xAxisIndex: [0], // 需要控制的 x 轴的索引
    filterMode: 'filter' // 过滤模式，数据范围外的数据将被过滤掉
  }]
};

在这个示例代码中，我们使用了 `dataZoom` 配置项来配置基于 x 轴的 dataZoom 组件。其中，`type` 属性设置为 `slider`，表示使用滑动条型的 dataZoom 组件。`start` 和 `end` 属性分别设置了 dataZoom 的起始位置和结束位置，范围是 0 到 100，表示可视化区域的百分比。`xAxisIndex` 属性指定了需要控制的 x 轴的索引，这里我们只有一个 x 轴，所以设置为 `[0]` 即可。`filterMode` 属性设置为 `filter`，表示数据范围外的数据将被过滤掉，而不是显示在图表的两侧。

当图表的 x 轴数据超出可视化区域时，就会在 x 轴底部出现一个滑动条，可以通过拖动滑动条来控制可视化区域的范围。这样就可以实现 x 轴超出可左右滑动的效果了。