Echarts dataZoom x轴横坐标缩放

https://echarts.apache.org/zh/option.html#dataZoom

Echarts dataZoom x轴横坐标缩放

把 dataZoom 房子 option下的第一级, 和 xAxis , yAxis , series 等 同级;

dateZoom 可以是一个Object, 也可以是Object数组

dataZoom的type 有两种值

• "slider" 游标, 为默认值, 图表外部会出现缩放条 , 因为"slider"是默认值,所以 type: 'slider'存在和去掉,效果是一样的
• "inside" 内部, 外部看不到变化, 通过鼠标滚轮可以缩放图表

  dataZoom: [
    {
      textStyle: {
        color: '#8392A5'
      },
      handleIcon: //绘制游标的样式
        'path://M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
      dataBackground: {
        areaStyle: {
          color: '#8392A5'
        },
        lineStyle: {
          opacity: 0.8,
          color: '#8392A5'
        }
      },
      brushSelect: true
    },
    {
      type: 'inside'
    }
  ],

 {
                type: 'slider',
                id : 'sliderX',
                show: true,//是否显示组件。如果设置为false，不会显示，但是数据过滤的功能还存在
                backgroundColor: 'rgba(47,69,84,0)',//组件的背景颜色
                dataBackground: {//数据阴影的样式。
                    lineStyle: {...},//阴影的线条样式
                    areaStyle: {...},//阴影的填充样式
                },
                selectedDataBackground: {//选中部分数据阴影的样式
                    lineStyle: {...},//选中部分阴影的线条样式
                    areaStyle: {...},//选中部分阴影的填充样式
                },
                fillerColor: 'rgba(167,183,204,0.4)',//选中范围的填充颜色
                borderColor: '#ddd',//边框颜色。
                handleIcon:'',//两侧缩放手柄的 icon 形状，支持路径字符串
                handleSize: '100%',//控制手柄的尺寸，可以是像素大小，也可以是相对于 dataZoom 组件宽度的百分比，默认跟dataZoom宽度相同
                handleStyle: {...},//两侧缩放手柄的样式配置
                moveHandleIcon : '',//移动手柄中间的icon，支持路径字符串
                moveHandleSize: 7,//移动手柄的尺寸高度
                moveHandleStyle: {...},//移动手柄的样式配置
                labelPrecision: 'auto',//显示label的小数精度。默认根据数据自动决定
                labelFormatter : '',//显示的label的格式化器
                showDetail: true,//是否显示detail，即拖拽时候显示详细数值信息
                showDataShadow: 'auto',//是否在 dataZoom-silder组件中显示数据阴影。数据阴影可以简单地反应数据走势
                realtime: true,//拖动时，是否实时更新系列的视图。如果设置为false，则只在拖拽结束的时候更新。
                textStyle: {...},//dataZoom文本样式
                xAxisIndex: 0,
                yAxisIndex: [0, 2],
                radiusAxisIndex: 0,
                angleAxisIndex: [0, 2],
                filterMode: 'filter',
                start: 0,
                end: 100,
                startValue ...,
                endValue ...,
                minSpan ...,
                maxSpan ...,
                minValueSpan ...,
                maxValueSpan ...,
                orient ...,
                zoomLock: false,
                throttle: 100,
                rangeMode ...,
                zlevel: 0,//所有图形的zlevel值。zlevel大的Canvas会放在zlevel小的Canvas的上面
                z: 2,//组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖
                left: 'auto',//dataZoom-slider组件离容器左侧的距离
                top: 'auto',//dataZoom-slider组件离容器上侧的距离
                right: 'auto',//dataZoom-slider组件离容器右侧的距离
                bottom: 'auto',//dataZoom-slider组件离容器下侧的距离
                brushSelect: true,//是否开启刷选功能。在下图的brush区域你可以按住鼠标左键后框选出选中部分
                brushStyle: {...},//刷选框样式设置
                emphasis: {//高亮样式设置
                    handleStyle: {...},
                    moveHandleStyle: {...}
                }
            }

Echarts dataZoom xy双轴横坐标缩放

  dataZoom: [
    {
      type: 'slider',
      show: true,
      xAxisIndex: [0],
      start: 1,
      end: 35
    },
    {
      type: 'slider',
      show: true,
      yAxisIndex: [0],
      left: '93%',
      start: 29,
      end: 36
    },
    {
      type: 'inside',
      xAxisIndex: [0],
      start: 1,
      end: 35
    },
    {
      type: 'inside',
      yAxisIndex: [0],
      start: 29,
      end: 36
    }
  ],