echart柱状图的柱子不见了?

背景:需要用到echarts的柱状图,然后效果是这样的

(我不会告诉你这个效果就是解决好问题以后才出现的)

过程:

首先要说一下我为什么会有这个问题,第一二开的页面只能在app端查看,后来因为这个死穴所以才导致这个问题卡

了差不多两三个钟。而且很无解,明明在本地测试可以,一到线上修改就不能显示柱子。给你们看一下我当初看到

的样子,(我又不会告诉你这个效果是我调回去然后页面显示出来的效果)

 

之后我就去官网的实例里面自己乱调,呵呵然后无意间发现柱子被我调没了。因为我看到有个单词Gap,这个好像是空隙的意思,现在去查,发现

果真然后在官网实例里面调了下,变大变小,然后变小的时候小到消失,然后就是下到线上的调下,“bar(条)Category(目录)Gap(间隙)”意思就是目录条间隙。自己看实际图理解这词。

原本

被我调成

barCategoryGap:10,

然后就出来了。之前还查到个很奇葩的问题,自己也看不懂,幸好不是那些问题。

综合的分析就是自己开大的网页没有web端,只能用开发工具,而且还没有那种ipad界面试调的习惯,不然造早发现

这是因为web页面转app端上样式渲染显示出现的差异。

总之就先这样了。

结贴,撒花。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Echart柱状图中,可以通过设置属性`barCategoryGap`来调整柱子之间的间距。默认情况下,`barCategoryGap`的值为'20%'。如果想要将柱子之间的间距设置为0或者'0%',可以在坐标系中的柱状图的配置中添加`barCategoryGap:0`。例如: ``` series: \[ { type: 'bar', barCategoryGap: 0, data: \[1, 2, 3, 4, 3, 5, 1\], coordinateSystem: 'polar', name: 'A', stack: 'a', emphasis: { focus: 'series' } }, { type: 'bar', data: \[2, 4, 6, 1, 3, 2, 1\], coordinateSystem: 'polar', name: 'B', stack: 'a', emphasis: { focus: 'series' } }, { type: 'bar', data: \[1, 2, 3, 4, 1, 2, 5\], coordinateSystem: 'polar', name: 'C', stack: 'a', emphasis: { focus: 'series' } } \] ``` 通过将`barCategoryGap`设置为0,可以使得柱子之间的间距为0。这样柱子就会紧密排列在一起。 #### 引用[.reference_title] - *1* [echart 设置柱子之间的间距](https://blog.csdn.net/Smy_0114/article/details/82752355)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [解决Echart极坐标系下的堆叠柱状图各系列有间隔问题](https://blog.csdn.net/Shiny_boy_/article/details/127757073)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值