echart柱状图的柱子不见了?

本文记录了在app端使用ECharts柱状图遇到的显示问题及解决过程。作者发现调整barCategoryGap参数可解决柱状图不显示的问题,分享了从本地测试到线上部署的调试经验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

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

过程:

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

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

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

 

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

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

原本

被我调成

barCategoryGap:10,

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

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

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

总之就先这样了。

结贴,撒花。

### 设置 ECharts 柱状图中的柱子颜色 #### 使用单一渐变色 为了使所有的柱子具有相同的渐变效果,可以使用 `LinearGradient` 函数定义线性渐变,并将其赋值给 `series.itemStyle.color` 属性。这允许创建从一种颜色平滑过渡到另一种颜色的效果[^1]。 ```javascript option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ name: 'Sales', type: 'bar', itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ {offset: 0, color: '#ffeca8'}, {offset: 1, color: '#f56e97'} ]) }, data: [120, 200, 150, 80, 70, 110, 130] }] }; ``` #### 给单个柱子设置特定颜色 如果希望只改变某些特定柱子的颜色,则可以在数据数组内针对这些特殊的数据项单独配置 `itemStyle.color` 属性。这样就可以精确控制每一个柱形的具体外观[^3]。 ```javascript option = { ... series: [{ name: 'Sales', type: 'bar', data: [ {value: 120}, {value: 200}, {value: 150, itemStyle: {color: '#b6dcb6'}}, // 特定柱子颜色 {value: 80}, {value: 70} ] }] }; ``` #### 应用多种不同颜色于各柱子上 当需要让图表内的每一根柱子都显示不同的颜色时,可以通过自定义函数返回对应索引位置的颜色值来达成目的。这里展示了一个通过取模运算符(`%`)循环应用预设色彩列表的方法[^4]。 ```javascript var colors = ['#C1232B','#B5C334','#FCCE10','#E87C25','#27727B']; ... data: (function (){ var res = []; for(var i=0; i<7; i++){ res.push({ value : Math.round(Math.random()*100), itemStyle :{color:colors[i % colors.length]} }); } return res; })() ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值