[echarts图]:设置柱状图的Y轴滚动条+效果图

 

 

效果：

代码：

html:

<div class="layui-col-md12" id="echart-tsrqlxtj" style="height:100%"></div>

JS: (滚动条属性)

dataZoom: [
            {
               start:0,//默认为0
               end: 100,//默认为100
               type: 'slider',
               maxValueSpan:9,//显示数据的条数(默认显示10个)
               show: true,
               yAxisIndex: [0],
               handleSize: 0,//滑动条的 左右2个滑动条的大小
               height: '80%',//组件高度
               left: 600, //左边的距离
               right: 8,//右边的距离
               top: 50,//上边边的距离
               borderColor: "rgba(43,48,67,0.8)",
               fillerColor: '#33384b',//滑动块的颜色
               backgroundColor: 'rgba(13,33,117,0.5)',//两边未选中的滑动条区域的颜色
               showDataShadow: false,//是否显示数据阴影 默认auto
               showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
               realtime:true, //是否实时更新
               filterMode: 'filter',
               yAxisIndex: [0,1],//控制的y轴
            },
            //滑块的属性
            {
               type: 'inside',
               show: true,
               yAxisIndex: [0,1],
               start: 1,//默认为1
               end: 9,//默认为100
            },
        ],