echarts横向柱状图设置间距失效

最新推荐文章于 2024-05-14 16:57:24 发布
最新推荐文章于 2024-05-14 16:57:24 发布
阅读量9.1k 收藏 21
点赞数 7
分类专栏： 前端 文章标签： echarts 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JJJ1995/article/details/121608619
版权 
// 柱子之间的距离
barCategoryGap: 60 //原理是减小柱状图的宽度

参考官网的配置项，在最后一个bar里设置间距无效

原图如下：

后来通过设置可以通过设置grid的属性，进行拉伸

grid: {
    left: -45,
    right: -35,
    top: 15,//拉伸距离顶部高度
    bottom: 0,//拉伸距离底部高度
    containLabel: true
},

 成功效果如下：

JJJ1995
关注
  • 7
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Echart横向柱状图
qq_41942913的博客
03-20 1599
<%-- BEGIN BODY --%> <div id="divCond" class="chart" style="width: 350px;height:60px;"></div> <%-- END BODY --%> //BEGIN JS var seriesData = [10, 20]; var colors=["red","yello...
Echarts柱状图设置柱间距不生效
weixin_52443895的博客
07-19 1万+
Echarts柱状图设置柱间距不生效（告诉你为啥设置barGap了也不生效）
echarts图表——条形图（柱状图）的动态横向显示设置_echarts横向条形图(1)
最新发布
2401_85013604的博客
05-14 553
/ window.onresize = function () { //适应页面。
ECharts之横向百分比柱状图
关注最新技术问题并持续维护更新
10-15 1万+
效果图 背景图片 下载ECharts npm install echarts --save 引入并注册全局ECharts     在 main.js 文件里引入并注册 ( 这里是 Vue3.0 的模板 ) import Vue from 'vue' import App from './App.vue' import router from './router' import store f...
echarts柱状图 调节柱子间间距
weixin_44315847的博客
10-19 3万+
以 官网图为例：
echarts调整柱状图之间间距
zxs123csdn的博客
12-21 3万+
将y轴200平均成5个点，每个点的间距就是40 yAxis : [ { // 纵轴标尺固定 type : 'value', scale : true, max : 200, min : 0, splitNumber : 5, boundaryGap : [ 0.2, 0.2 ] } ], ...
echarts柱状图设置柱子的间距（barGap属性）
博客简介
12-05 7690
【代码】echarts柱状图设置柱子的间距（barGap属性）
echarts横向柱状图
10-12
设置echarts多个柱状图重叠或者叠加情况，堆叠是数据不会叠加，可以设置堆叠(stack)，否则没有，是叠加横向柱状图，柱形图显示数值，以及设置隐藏一段方案（关联和不关联）,鼠标移动上去显示的提示内容，动态改变...
使用echarts实现双向柱状图
09-02
1、文件夹下载下来后直接双击html文件即可... 2、项目中多次使用，保证稳定； 3、代码中有详细的介绍说明； 4、可以单独拿出来作为插件使用； 5、echarts基本图例里面不存这个图形; 6、有问题欢迎留言，看到会解答；
echarts横向堆叠柱状图.zip
10-11
设置echarts多个柱状图重叠或者叠加情况，堆叠是数据不会叠加，可以设置堆叠(stack)，否则没有，是叠加横向柱状图，设置隐藏一段方案
Echarts动态排名柱状图(自适应电脑和手机端)源代码
10-09
Echarts动态排名柱状图(自适应电脑和手机端)源代码，参见：https://blog.csdn.net/weixin_41290949/article/details/120672844
echarts-柱状图
06-26
柱状图：坐标轴刻度与标签对齐。适合于网页，app等。里面的标签内容，需按照要求进行更改。详情可以查看更多关于echart的信息。也可以查看我更多关于echart的介绍和心得。
echarts，type：bar 柱形图的行高和宽度（条间距离）设置
热门推荐
fairyier
11-08 14万+
type：bar 柱形图的行高和宽度（条间距离）设置 百度图表柱形图的bar之间的行高？好像在文档没找到对应属性，只有barGap和barCategoryGap，但单独设置这两个一般还达不到我们想要的“条间距”显示效果，可以试试以下设置： 关键代码： yAxis:{ type:'category', data:['周一','周二','周三','周四','周五'], max:20 //...
mpvue-echarts柱状图数据偏少时不自适应拉开柱子间距
weixin_47581490的博客
10-22 1250
UI设计图是这样的，放6个数据， 但是调接口时，数据偏少时，echarts就会自适应加大柱子之间间距，3个数据时看着还好，一条两条数据时它自己在空白区域居中或者分散就比较单调稍微影响美观，这时想让图表展示出从上向下不扩大间距的依次排列，怎么办呢？百度上竟然没百度出来有什么属性来控制，那就只能自己创造条件来实现了 调完接口，给数组赋值时，判断如果没有达到6个数据时就push空字符串，这样就出来了想要的效果了。 if (this.flowRankData.typeName.length &l.
如何让echarts中柱状图的柱子与坐标轴有一定的间距
y_yyyym的博客
11-27 2万+
实现echarts中柱状图的柱子与坐标轴有一定的间距，效果如下： 因为第一次用echarts，一开始下意识想官方应该有这个属性，就一直在柱状图的属性中反复找，后面实在找不到类似的属性，索性就不找了。既然此路不通，那就换一条路试试。但是不管怎么说，就算没有这个属性，效果还是要想办法实现的，要不然产品和测试那里怎么过得去嘛。 虽说查了很多遍的官方文档也没找到，但是也并不是没有收获，在看文档的过...
echarts 柱状图/折线图x轴坐标间隔
Y2000104的博客
01-24 1103
【代码】echarts 柱状图/折线图x轴坐标间隔。
echart柱状图横向_柱状图 | ECharts 数据可视化实验室
weixin_35636570的博客
02-06 1749
介绍柱状图是最常见的图表类型，通过使用水平或垂直方向柱子的高度来显示不同类别的数值，其中柱状图的一个轴显示正在比较的类别，而另一个轴代表对应的刻度值。适合的数据类型A18B30C12D20纵向柱状图的柱是垂直方向的，横向柱状图的柱是水平方向的，又称条形图。条形图与横向柱状图表达数据的形式是一样的，不过，当图表的数据标签很长或者有超过10个项目进行比较时，横向柱状图会无法完全显示完标签，或者只能倾斜...
echarts如何设置柱形图的间距
qq_37299479的博客
01-14 1万+
barCategoryGap和barWidth 不能同时使用，否则barCategoryGap不起作用
echart柱图 柱子之间的间距、不显示X轴Y轴网格线
m0_63057114的博客
06-25 1万+
barCategoryGap:'0%', /*多个并排柱子设置柱子之间的间距*/show: false, //不显示坐标轴线、坐标轴刻度线和坐标轴上的文字。show: false, //不显示坐标轴上的文字。{name: '平均值',type: 'average'}barGap:'0%', /*多个并排柱子设置柱子之间的间距，{name: '最大值',type: 'max'},{name: '最小值',type: 'min'}//barWidth:20, //设置柱子的宽度。
echarts 柱状图横向
09-13
可以使用 ECharts 中的 bar 图表来实现横向柱状图。 首先，你需要在 HTML 文件中引入 ECharts 的库文件。可以从 ECharts 的官方网站上下载最新版本的库文件，并在 HTML 文件中添加如下代码： ```html <script src="echarts.min.js"></script> ``` 接下来，在 JavaScript 文件中，你可以创建一个容纳图表的 DOM 元素，并使用 ECharts 的 API 初始化图表对象： ```javascript var myChart = echarts.init(document.getElementById('chart-container')); ``` 然后，你可以配置图表的数据和样式，使用 ECharts 提供的 API 来实现横向柱状图： ```javascript var option = { tooltip: {}, // 鼠标悬停时显示提示框 xAxis: { // x 轴配置 type: 'value', show: false // 不显示 x 轴 }, yAxis: { // y 轴配置 type: 'category', data: ['A', 'B', 'C', 'D', 'E'], // y 轴上的数据 axisLine: { show: false }, // 不显示 y 轴线 axisTick: { show: false }, // 不显示刻度线 axisLabel: { show: true } // 显示刻度标签 }, series: [{ type: 'bar', // 使用柱状图 data: [10, 20, 30, 40, 50], // 柱状图的数据 barWidth: 20, // 设置柱状图的宽度 itemStyle: { // 设置柱状图的样式 color: 'blue' } }] }; // 使用配置项显示图表 myChart.setOption(option); ``` 最后，将图表容器放在 HTML 文件中的合适位置： ```html <div id="chart-container" style="width: 600px; height: 400px;"></div> ``` 通过以上步骤，你就可以实现一个横向柱状图了。你可以根据需要修改数据和样式来自定义你的柱状图。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值