Echarts的Category轴滑动

Echarts的Category轴滑动

效果，滚轮上下可拖动

配置项

dataZoom: [
    // {
    //     // disabled: false,
    //     start: 100, //默认为0
    //     end: 80, //默认为100
    //     // startValue: [xArr.length - 1],
    //     // endValue: [xArr.length - 4],
    //     type: 'slider',
    //     // maxValueSpan: 5, //显示5条数据(默认显示10个)
    //     show: true,
    //     yAxisIndex: [0],
    //     width: 12,
    //     height: '70%', //组件高度
    //     right: 5, //右边的距离
    //     showDataShadow: false, //是否显示数据阴影 默认auto
    //     showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
    //     realtime: true, //是否实时更新
    //     zoomLock: true
    // },
    {
        type: 'inside',
        yAxisIndex: [0],
        // zoomOnMouseWheel: true,
        // moveOnMouseMove: true,
        // moveOnMouseWheel: true,
        // 通过数值控制category
        // start: 0,
        // end: 20,
        // 通过index控制category
        startValue: [xArr.length - 1],
        endValue: [xArr.length - 4],
        // preventDefaultMouseMove: true,
        // 通过窗口值控制(重0开始)
        minValueSpan: 4,
        maxValueSpan: 4
    }
],

注意点

• slider类型的滑块基本不需要用到，可以直接无视
• inside类型的内置滑块
  • zoomOnMouseWheel 如果关闭，部分版本的moveOnMouseWheel配置将无效（Bug），因此导致了我调试很久始终找不到问题原因
  • start和end属性不需要配置
  • 为了实现不缩放，但是滚轮上下滑动，只需四个配置：
    • startValue 起始类目轴数据index，从上到下就是array末尾开始
    • endValue 当前屏的终止index，差距start几个就是默认显示几条category数据轴
    • minValueSpan 当前窗口（可视的echart图内容）显示category轴数量的最小值
    • maxValueSpan
    • 当 minValueSpan = maxValueSpan时，等同于窗口往下拖动时不被缩放（zoomOnMouseWheel =false），因此可以实现滑动效果，绕开bug