echarts 统计图 x 轴实现拉伸滑动

效果图

核心代码

dataZoom: [{
  type: "slider", // 滑动条型数据区域缩放组件
  show: true, // 是否显示组件(用于 x 轴使用)
  start: 70, // 数据窗口范围的起始百分比(范围是：0 ~ 100。表示 0% ~ 100%)
  end: 100, // 数据窗口范围的结束百分比(范围是：0 ~ 100。表示 0% ~ 100%)
  height: 30, // 组件的高度(水平布局默认 30，竖直布局默认自适应)
  handleSize: '30%', // 控制手柄的尺寸，可以是像素大小，也可以是相对于 dataZoom 组件宽度的百分比，默认跟 dataZoom 宽度相同
  handleStyle: {
    // color: '#fff', // 图形的颜色
    // borderColor: 'red', // 图形的描边颜色
    // borderWidth: 1, // 描边线宽。为 0 时无描边
    borderType: 'solid' // 描边类型 solid.实线(默认) dashed.虚线 dotted.点虚线
  }, // 两侧缩放手柄的样式配置
  showDataShadow: false, // 是否在 dataZoom-silder 组件中显示数据阴影。数据阴影可以简单地反应数据走势
}, {
  type: "inside", // 内置型数据区域缩放组件(即在坐标系内平移与缩放)
  start: 70, // 数据窗口范围的起始百分比(范围是：0 ~ 100。表示 0% ~ 100%)
  end: 100 // 数据窗口范围的结束百分比(范围是：0 ~ 100。表示 0% ~ 100%)
}, {
  type: "slider", // 滑动条型数据区域缩放组件
  show: false, // 是否显示组件(用于 y 轴使用)
  width: "5%", // 组件的宽度(竖直布局默认 30，水平布局默认自适应)
  height: "70%", // 组件的高度(水平布局默认 30，竖直布局默认自适应)
  yAxisIndex: 0, // 组件控制的 y 轴(即下方 yAxis 数组的索引值)
  filterMode: "empty", // none.不过滤数据只改变数轴范围 empty.当前数据窗口外的数据设置为空，不影响其他轴的数据范围 其他访问https://echarts.apache.org/zh/option.html#dataZoom-slider.filterMode
  handleSize: '30%', // 控制手柄的尺寸，可以是像素大小，也可以是相对于 dataZoom 组件宽度的百分比，默认跟 dataZoom 宽度相同
  handleStyle: {
    // color: '#fff', // 图形的颜色
    // borderColor: 'red', // 图形的描边颜色
    // borderWidth: 1, // 描边线宽。为 0 时无描边
    borderType: 'solid' // 描边类型 solid.实线(默认) dashed.虚线 dotted.点虚线
  }, // 两侧缩放手柄的样式配置
  showDataShadow: false, // 是否在 dataZoom-silder 组件中显示数据阴影。数据阴影可以简单地反应数据走势
  left: "93%" // 组件离容器左侧的距离
}], // 区域缩放

完整代码