echarts设置柱状图高度（echarts 柱状图滚动）
导读：实现效果：柱形图展示水平滚动条，并且鼠标滚动支持让滚动条平移...
实现效果：柱形图展示水平滚动条 ，并且鼠标滚动支持让滚动条平移
echarts文档里 ，图形的滚动条分两种
内置型 （效果是： 鼠标在图中点击拖动平移 ，在图中滚动缩放） 滚动条型 （效果是：鼠标拖动滚动条平移 ，鼠标拖大缩小滚动条缩放）而我们要实现的就是综合了这两种 。 。
既要内置型的能在图中滚动 ，又要滚动条的样式实现代码
const zoomData=[ // 有滚动条 平移 { type: slider, realtime: true, start: 0, end: 40, // 初始展示40% height: 4, fillerColor: "rgba(17, 100, 210, 0.42)", // 滚动条颜色 borderColor: "rgba(17, 100, 210, 0.12)", handleSize:0, // 两边手柄尺寸 showDetail: false, // 拖拽时是否展示滚动条两侧的文字 top:96%, // zoomLock:true, // 是否只平移不缩放 // moveOnMouseMove:true, //鼠标移动能触发数据窗口平移 // zoomOnMouseWheel :true, //鼠标移动能触发数据窗口缩放 }, { type: "inside", // 支持内部鼠标滚动平移 start: 0, end: 40, zoomOnMouseWheel: false, // 关闭滚轮缩放 moveOnMouseWheel: true, // 开启滚轮平移 moveOnMouseMove: true // 鼠标移动能触发数据窗口平移 } ]moveOnMouseWheel和moveOnMouseMove 记得开启 ，开启后滚轮往下滚数据往后移动
zoomOnMouseWheel 关闭滚轮缩放, 关闭后滚轮滚到最后不会有回弹抖动
再添加到option里即可
dataZoom: zoomData,例子2
dataZoom: [ { // 滚动条以及缩放 type: "inside", // start: 0, // end: endZoom, // 这里end跟数据有关系 数据越多 ，end越小 end是百分比例 startValue: 0, // 从头开始 。 endValue: 6, // 最多六个 minValueSpan: 6, // 放大到最少几个 maxValueSpan: 365, // 缩小到最多几个 }, ],这里的startValue和endValue代表初始只显示七个 ，七组柱子
minValueSpan代表放大到最少到显示几个
maxValueSpan代表缩小到最多显示几个例子3：
垂直方向滚动条
dataZoom=[ { type: "inside", startValue: 0, endValue: 2, minValueSpan: 2, maxValueSpan: 2, yAxisIndex: [0], zoomOnMouseWheel: false, // 关闭滚轮缩放 moveOnMouseWheel: true, // 开启滚轮平移 moveOnMouseMove: true // 鼠标移动能触发数据窗口平移 }, { type: slider, realtime: true, startValue: 0, endValue: 2, width: 3.5, height: 80%, yAxisIndex: [0], // 控制y轴滚动 fillerColor: "rgba(154, 181, 215, 1)", // 滚动条颜色 borderColor: "rgba(17, 100, 210, 0.12)", backgroundColor: #cfcfcf,//两边未选中的滑动条区域的颜色 handleSize:0, // 两边手柄尺寸 showDataShadow: false,//是否显示数据阴影 默认auto showDetail: false, // 拖拽时是否展示滚动条两侧的文字 top:1%, right:5, } ]创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！