echarts中如何给柱状图增加滚动条

需求:当后台传递过来的数据过多的时候 页面的柱图就会很拥挤 如下图:

所以我们需要有一个横向的滚动条,让所有的柱子都能够展示

1.echarts 中有一个dataZoom 属性 可以给图形增加一个横向的滚动条

javascript 复制代码
 dataZoom:[  
                    {
                        type: 'slider', //滑动条型数据区域缩放组件
                        realtime: true, //拖动时,是否实时更新系列的视图。如果设置为 false,则只在拖拽结束的时候更新。
                        height: 4,
                        endValue: 13,  //数据窗口范围的结束数值。如果设置了 dataZoom-inside.end 则 endValue 失效
                        fillerColor:ref == 'zhu1' ? " rgba(0,0,0,0.3)" :"transparent" , // 滚动条颜色
                        borderColor: "transparent",
                        handleSize:0, // 两边手柄尺寸
                        showDetail: false, // 拖拽时是否展示滚动条两侧的文字
                        top:'96%', //组件离容器上侧的距离
                        zoomLock:true, // 是否只平移不缩放
                    },
                    {
                        
                        type: "inside",  //内置型数据区域缩放组件
                        endValue: 13,  // 最多14个
                        zoomOnMouseWheel: false,  // 关闭鼠标滚轮缩放
                        moveOnMouseWheel: true, // 开启鼠标滚轮窗口平移
                        moveOnMouseMove: true  // 开启鼠标移动窗口平移
                        }
                    ],

最终效果:

2.当图像是纵向的时候 我们就需要增加一个纵向的滚动条 如图

javascript 复制代码
 dataZoom: [//滚动条
                {
                    yAxisIndex: 0,//这里是从X轴的0刻度开始
                    show: true,//是否显示滑动条,不影响使用
                    weight:2,
                    type: 'inside', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                    // startValue: value.length-1, // 从头开始。
                    // endValue: (value.length-1)+4, // 一次性展示5个。
                    startValue: 0, // 从头开始。
                    endValue: 4,
                    zoomOnMouseWheel: false,  // 关闭滚轮缩放
                    moveOnMouseWheel: true, // 开启滚轮平移
                    moveOnMouseMove: true  // 鼠标移动能触发数据窗口平移 
                },
               {
                   yAxisIndex: 0,//这里是从X轴的0刻度开始
                    show: true,//是否显示滑动条,不影响使用
                    type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                    realtime: false,
                    fillerColor: " rgba(0,0,0,0.15)", // 滚动条颜色
                    borderColor: "transparent",
                    zoomLock:false, // 是否只平移不缩放
                    handleSize:0, // 两边手柄尺寸
                    width:this.getFontSize(8),
                    heigh:this.getFontSize(8),
                    bottom: this.getFontSize(25),
                    backgroundColor: 'transparent',
                    // borderRadius: 5,
                    brushSelect:false,
                    showDetail:false,
                    showDataShadow:false,
                }
            ],

注意:这个属性是写在option里面的

相关推荐
烛阴33 分钟前
开发者神器:如何在浏览器控制台玩转第三方库,让调试效率翻倍!
前端·javascript
拉不动的猪1 小时前
JQ常规面试题
前端·javascript·面试
新中地GIS开发老师2 小时前
三维GIS开发cesium智慧地铁教程(5)Cesium相机控制
javascript·arcgis·智慧城市·大学生·gis开发·webgis·地理信息科学
Shimeng_19892 小时前
前端如何通过(手机)扫描二维码下载app
前端·javascript·vue.js·二维码·扫描二维码下载软件app
Mr...Gan2 小时前
TypeScript
开发语言·javascript·typescript
前端 贾公子3 小时前
《Vuejs设计与实现》第 8 章(挂载与更新)
开发语言·前端·javascript
半碗水4 小时前
缝缝补补
前端·javascript
用户2519162427114 小时前
ES6之类的其他书写方式
javascript·ecmascript 6
咔咔库奇4 小时前
axios取消请求
开发语言·前端·javascript
Jinxiansen02114 小时前
Nuxt + Pinia + Element Plus 后台管理系统搭建教程(含源码)
前端·javascript·vue.js