echarts dataZoom滑动事件

在Echarts中，可以通过dataZoom组件实现滑动事件。dataZoom组件提供了两种类型的滑动事件：slider和inside。

1. slider类型的滑动事件可以通过设置type为'slider'来实现。具体的配置参数包括：
- width：滑动条的宽度，可以是像素值或百分比。
- start：滑动条的起始位置，取值范围为0-100。
- end：滑动条的结束位置，取值范围为0-100。
- showDataShadow：是否显示数据阴影，默认为false。
- fillerColor：滑动条的填充颜色。
- borderRadius：滑动条的圆角半径。
- moveHandleSize：滑动条的移动手柄大小。
- moveHandleStyle：滑动条的移动手柄样式。
- left：滑动条的左边距，可以是像素值或百分比。
- height：滑动条的高度。
- handleSize：滑动条的手柄大小。
- handleIcon：滑动条的手柄图标。
- handleStyle：滑动条的手柄样式。

2. inside类型的滑动事件可以通过设置type为'inside'来实现。它可以在图表内部进行滑动，而不需要显示滑动条。

下面是一个示例代码，演示了如何使用dataZoom组件实现echarts的滑动事件[^2]：

dataZoom: [
  {
    type: 'slider',
    width: '30%',
    start: 0,
    end: 50,
    showDataShadow: false,
    fillerColor: 'rgba(64, 158, 255)',
    borderRadius: '50%',
    moveHandleSize: 0,
    moveHandleStyle: {},
    left: '35%',
    height: 12,
    handleSize: '80%',
    handleIcon: 'path://M512,512m-448,0a448,448,0,1,0,896,0a448,448,0,1,0,-896,0Z',
    handleStyle: {
      borderWidth: 0,
      color: 'rgba(64, 158, 255)'
    }
  },
  {
    type: 'inside'
  }
]