在echarts的option{}中添加如下内容即可:
dataZoom: [{type: 'slider',realtime: true,start: 0,end: 5, // 数据窗口范围的结束百分比。范围是：0 ~ 100。height: 5, //组件高度left: 5, //左边的距离right: 5, //右边的距离bottom: 10, //下边的距离show: true, // 是否展示fillerColor: "rgba(17, 100, 210, 0.42)", // 滚动条颜色borderColor: "rgba(17, 100, 210, 0.12)",handleSize: 0,//两边手柄尺寸showDetail: false, //拖拽时是否展示滚动条两侧的文字zoomLock: true, //是否只平移不缩放moveOnMouseMove: false //鼠标移动能触发数据窗口平移//zoomOnMouseWheel: false, //鼠标移动能触发数据窗口缩放},{type: "inside", // 支持内部鼠标滚动平移start: 0,end: 5,zoomOnMouseWheel: false, // 关闭滚轮缩放moveOnMouseWheel: true, // 开启滚轮平移moveOnMouseMove: true // 鼠标移动能触发数据窗口平移 }]
