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里面的

相关推荐
WTSolutions24 分钟前
Excel 转 JSON by WTSolutions API 文档
javascript
努力只为躺平27 分钟前
🔥 油猴脚本开发指南:从基础API到发布全流程
前端·javascript
bitbitDown28 分钟前
我用Playwright爬了掘金热榜,发现了这些有趣的秘密... 🕵️‍♂️
前端·javascript·vue.js
DoraBigHead1 小时前
🧠 别急着传!大文件上传里,藏着 Promise 的高级用法
前端·javascript·面试
嘉琪0011 小时前
封装一个有最小化的dialog组件
前端·javascript·css
李明卫杭州1 小时前
希尔排序
前端·javascript
爱学习的茄子1 小时前
JavaScript闭包应用场景完全指南:从基础概念到工程实践
前端·javascript·面试
用户2519162427112 小时前
Canvas之绘制图形
前端·javascript·canvas
gnip2 小时前
99%前端不知道的API WebTransport
前端·javascript
Lazy_zheng2 小时前
React 核心 API 全景实战:从状态管理到性能优化,一网打尽
前端·javascript·react.js