echarts 柱状图 X轴数据过多时横向拉动展示

﹏ヽ暗。殇╰゛Y 2024-04-18 22:19 111阅读 0赞

使用echarts 柱状图数据过多时，容易挤到一起，导致排版很不清楚。  
就像下图这样：

![20180503212941323][]  
到网上找了很多，答案都不尽人意，后来就到官网查API文档，被我给找到了  
先出效果图，再上答案

![20180503213121198][]

没错就是这种横向X轴拖动  
配置代码就是

dataZoom : \[  
            \{  
                type: 'slider',  
                show: true,  
                start: 94,  
                end: 100,  
                handleSize: 8  
            \},  
            \{  
                type: 'inside',  
                start: 94,  
                end: 100  
            \},  
            \{  
                type: 'slider',  
                show: true,  
                yAxisIndex: 0,  
                filterMode: 'empty',  
                width: 12,  
                height: '70%',  
                handleSize: 8,  
                showDataShadow: false,  
                left: '93%'  
            \}  
        \]  
官网API 地址 [http://echarts.baidu.com/option.html\#dataZoom-slider][http_echarts.baidu.com_option.html_dataZoom-slider]

[20180503212941323]: https://img-blog.csdn.net/20180503212941323
[20180503213121198]: https://img-blog.csdn.net/20180503213121198
[http_echarts.baidu.com_option.html_dataZoom-slider]: http://echarts.baidu.com/option.html#dataZoom-slider

发表评论取消回复

表情：

评论列表（有 0 条评论，111人围观）

还没有评论，来说两句吧...

相关阅读

相关 echarts 柱状图 X轴数据过多时横向拉动展示

用echarts 柱状图数据过多时，容易挤到一起，导致排版很不清楚。就像下图这样： ![20180503212941323][] 到网上找了很多，答案都不尽人...

﹏ヽ暗。殇╰゛Y/ 2024年04月18日 22:19/ 0 赞/ 112 阅读

相关 Echarts 柱状图横向展示和竖向展示

![在这里插入图片描述][198b80c65c724e61a9b1ac41f8ca946e.png_pic_center] 第021个 [点击查看专栏目录][Link 1]

朴灿烈づ我的快乐病毒、/ 2024年03月26日 12:34/ 0 赞/ 132 阅读

相关 echarts 实现横向柱状图

1 原始效果图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

Dear 丶/ 2023年10月05日 16:50/ 0 赞/ 62 阅读

相关 Echarts之横向柱状图

[https://gallery.echartsjs.com/editor.html?c=xhmv-1o6XS][https_gallery.echartsjs.com_edi

太过爱你忘了你带给我的痛/ 2023年07月18日 09:42/ 0 赞/ 34 阅读

相关使用echarts画横向柱状图

在html页面中使用echarts的话，需要使用script先引入 echarts.min.js 或者 echarts.js文件； <script src="echa

客官°小女子只卖身不卖艺/ 2023年06月21日 10:12/ 0 赞/ 26 阅读

相关 echarts 柱状图如何横向展示

将xAxis与yAxis里面的内容互换，可以横纵切换展示 xAxis: { type: 'value',

约定不等于承诺〃/ 2022年12月23日 11:07/ 0 赞/ 523 阅读

相关 echarts 双柱状图，X轴带滚动条的柱状图

echarts 双柱状图：[https://www.makeapie.com/editor.html?c=xTJyYkJflT][https_www.makeapie.com_

快来打我*/ 2022年11月06日 14:56/ 0 赞/ 485 阅读

相关 Echarts-横向柱状图实现

╰半橙微兮°/ 2022年11月06日 14:52/ 0 赞/ 340 阅读

相关 Echarts双Y轴柱状图

var option = { title: { text: '一周推送及完成率'

Bertha 。/ 2022年02月16日 11:59/ 0 赞/ 759 阅读

相关 ECharts之横向百分比柱状图

效果图 ![在这里插入图片描述][20191015094349429.gif] 背景图片 ![20190725170845879.png][] 下载EChar

古城微笑少年丶/ 2021年08月13日 12:40/ 0 赞/ 1459 阅读