0
点赞
收藏
分享

微信扫一扫

echarts横轴展示不全使用滚动条(dataZoom)的方法


这个是option里需要配置的东西          

dataZoom: [
                    {
                        orient: "horizontal",
                        show: this.zoomShow,//控制滚动条显示隐藏
                        realtime: true, //拖动滚动条时是否动态的更新图表数据
                        height: 25, //滚动条高度
                        start: 0, //滚动条开始位置(共100等份)
                        end: this.endValue,//滚动条结束位置
                        bottom: "4%",
                        zoomLock: true, //控制面板是否进行缩放
}]

if (this.xData.length > 10) {//this.xData是横轴的数据,通过后台动态获取的
                    this.zoomShow = true;//通过横轴数据多少来判断滚动条是否显示(官网说滚动条不显示,但过滤数据的功能还在,过滤数据请移步官网去看具体配置项说明)
                    this.endValue = (10 / this.xData.length) * 100;
                } else {
                    this.zoomShow = false;
                    this.endValue = 100;//这里一定要注意不显示滚动条的时候一定要把滚动条结束位置设置一下,不然会有bug
                }

 

举报

相关推荐

0 条评论