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控制categorystartValue: [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