★ FEATURED ARTICLE 1. 倒挂柱状图到底是个什么场景第一次接到“Y轴指向下方”这个需求的时候我盯着产品原型看了半天。那是一个能耗对比页面产品经理画了一组柱子从顶部往下垂像冰锥一样挂在一条水平线上。当时我脑子里第一反应是这不就是把普通柱状图上下翻转吗但真正动手用 uni-app 配合 ucharts 实现的时候才发现事情没那么简单。先说清楚这个需求的核心普通柱状图的柱子是从底部基线往上长Y轴刻度从下往上递增而倒挂图也有人叫瀑布式倒挂、负向柱状图的柱子是从顶部基线往下垂Y轴刻度从上往下递增。这种图表在能耗监测、预算消耗、库存下降、流量漏斗等场景里特别常见因为人的视觉习惯是“往下掉”代表减少或消耗比看一根向上的柱子再脑补“这是消耗量”要直观得多。为什么不用普通的负值柱状图因为负值柱状图虽然柱子朝下了但Y轴刻度还是从下往上递增的零线在中间读起来需要做一次心理换算。而真正的倒挂图零线在顶部刻度往下越来越大视觉上就是“从满到空”的过程一眼就能看懂剩余量或者消耗进度。这个需求适合谁参考如果你正在用 uni-app 做跨端应用图表库选了 ucharts然后产品或者设计给了你一张“柱子朝下”的图那这篇内容就是给你准备的。我会把从思路到落地的完整过程拆开讲包括我踩过的坑和最后跑通的方案。2. 为什么 ucharts 默认做不到以及我的选型思路2.1 ucharts 的坐标系逻辑ucharts 的底层绘制逻辑是基于 Canvas 的它的坐标系原点在左上角X轴向右延伸Y轴向下延伸。但它在绘制柱状图的时候做了一层“业务坐标”到“画布坐标”的映射业务上的Y值越大画布上的Y坐标越小越靠上。这个映射关系是写死在它的柱状图绘制流程里的。我翻过 ucharts 的源码柱状图的绘制核心在drawColumnData这个函数里。它计算柱子高度的时候用的是yAxisMax - value这样的逻辑然后从底部基线往上画。也就是说它默认认为“值越大柱子越高基线在底部”。你要让它反过来要么改源码要么用一些“曲线救国”的办法。2.2 三种可选方案的对比我当时列了三个方案逐个试了一遍方案思路优点缺点最终选择方案A改源码直接修改 ucharts 的绘制逻辑把Y轴映射反转效果最彻底配置最简单升级库版本时改动会丢失维护成本高否方案B数据取负自定义Y轴把数据取负值让柱子朝下然后自定义Y轴刻度显示不改源码升级安全Y轴刻度需要手动处理零线位置要调是方案C用CSS翻转容器把整个图表容器用transform: scaleY(-1)翻转实现最快文字和提示框也会被翻转需要再翻转回来交互会乱否方案C我试了十分钟就放弃了因为 tooltip 弹出来是倒着的X轴文字也是倒着的虽然可以再对文字做一次翻转但点击热区和滚动方向全乱了属于“看起来聪明实际上给自己挖坑”的做法。方案B是我最终采用的。核心思路是把真实数据取负值传给 ucharts这样柱子就会朝下画然后通过yAxis.format把负的刻度显示成正的数值最后调整padding和yAxis.min/max让零线落在顶部。2.3 为什么方案B最稳方案B的好处在于它完全在 ucharts 的配置层面解决问题不碰源码不依赖任何 hack。你升级 ucharts 版本只要它的配置项没大改这套方案就一直能用。而且它保留了 ucharts 原生的交互能力tooltip、点击事件、动画都是正常的。当然它也有代价你的数据在传入之前要做一次取负处理Y轴的格式化函数要写对零线的位置要精确控制。但这些都是一次性的工作封装好之后复用起来很方便。注意如果你的图表还需要显示正负值混合的情况比如既有收入又有支出方案B会变得很复杂因为取负之后你分不清原始正负了。这种场景建议直接改源码或者换图表库。3. 核心实现细节从数据到配置的完整拆解3.1 数据预处理取负的时机和边界取负这个操作看起来简单但有几个细节要注意。第一取负的时机应该在数据组装成 ucharts 需要的格式之后、调用setOption之前。第二如果数据里有null或者undefined取负会变成NaNucharts 会直接不画那根柱子所以要先做过滤。我封装了一个小函数function negateSeriesData(series) { return series.map(item { if (item.data null || item.data undefined) { return { ...item, data: [] }; } return { ...item, data: item.data.map(v (typeof v number ? -v : 0)) }; }); }这里把非数字的值转成0而不是保留NaN是因为 ucharts 对NaN的处理是直接跳过会导致柱子数量对不上X轴标签看起来像数据丢了。转成0至少能画出一根高度为0的柱子视觉上不会错位。3.2 Y轴格式化把负刻度显示成正数数据取负之后Y轴的刻度也会变成负数。比如你原来的最大值是100取负之后最小值是-100ucharts 会自动算出刻度像0, -20, -40, -60, -80, -100这样。你要做的就是通过yAxis.format把这个负号去掉yAxis: { format: (val) { return Math.abs(val); } }但这里有个坑ucharts 的format函数在某些版本里接收到的val已经是格式化后的字符串不是原始数字。如果你直接Math.abs(val)可能会得到NaN。稳妥的做法是先转数字format: (val) { const num Number(val); return isNaN(num) ? val : Math.abs(num); }3.3 零线定位让柱子从顶部往下垂这是最关键的一步。默认情况下ucharts 的柱状图基线在底部零线也在底部。你要让柱子从顶部往下垂就需要把Y轴的min和max设置成“最大值在顶部最小值在底部”的状态。因为数据取负了所以真实数据的最大值变成了负数里的最小值。比如真实数据范围是0到100取负后是0到-100。你要让 -100 在顶部0 在底部那么yAxis: { min: -100, // 对应真实最大值显示在顶部 max: 0, // 对应真实最小值0显示在底部 format: (val) Math.abs(Number(val)) }等等这里要小心。ucharts 的Y轴min和max是业务坐标不是画布坐标。业务坐标里max永远在顶部min永远在底部。所以如果你设min: -100, max: 0那么 -100 在底部0 在顶部柱子会从顶部的0往下画到-100这正是我们要的效果。但刻度显示的时候顶部是0底部是100因为取了绝对值读起来就是“从上往下越来越大”完美符合倒挂图的视觉逻辑。3.4 完整配置示例把上面的点串起来一个完整的倒挂柱状图配置大概长这样const chartData { categories: [一月, 二月, 三月, 四月, 五月], series: [ { name: 消耗量, data: [30, 50, 80, 60, 90] } ] }; // 取负处理 const negatedSeries chartData.series.map(s ({ ...s, data: s.data.map(v -v) })); const maxVal Math.max(...chartData.series[0].data); const yAxisMax Math.ceil(maxVal / 10) * 10; // 向上取整到10的倍数 const option { categories: chartData.categories, series: negatedSeries, yAxis: { min: -yAxisMax, max: 0, format: (val) Math.abs(Number(val)), gridType: dash, dashLength: 4 }, extra: { column: { width: 30, barBorderCircle: true } } };这里yAxisMax我做了向上取整到10的倍数是为了让刻度好看一点。如果你直接传最大值ucharts 可能会算出-87这样的刻度读起来很别扭。4. 实操过程中遇到的坑和排查记录4.1 柱子跑到画布外面去了第一次跑通的时候柱子是朝下了但有一部分超出了画布底部被截断了。排查了半天发现是padding的问题。ucharts 默认的padding是[15, 15, 0, 5]底部没有留空间。柱子朝下画的时候最长的柱子会顶到画布边缘。解决办法是在extra里加paddingextra: { padding: [10, 15, 30, 5] // 上、右、下、左 }底部的30是给最长的柱子留的空间。具体数值要根据你的图表高度和柱子最大长度来调我的经验是取图表高度的10%到15%比较合适。4.2 tooltip 显示的还是负数数据取负之后tooltip 里显示的值也是负的。这个要在tooltip的format里处理tooltip: { format: (item) { return item.name : Math.abs(item.data); } }注意不同版本的 uchartsitem的结构可能不一样。有的版本是item.data有的是item.value。你可以在format里先console.log(item)看一下实际结构再决定取哪个字段。4.3 X轴标签和柱子对不齐这个问题出现在数据里有null的时候。我前面说了要把null转成0但如果你转成0之后ucharts 还是会画一根高度为0的柱子视觉上就是X轴标签下面空了一块。如果你希望null对应的位置完全不画柱子那就要在series里把那个位置的数据设成null但这样又会导致柱子数量对不上。我的处理方式是如果数据缺失就补0然后在X轴标签上用灰色显示提示用户这个月没有数据。这样既保持了柱子数量对齐又不会让用户误以为消耗量是0。4.4 动画方向反了ucharts 的柱状图默认动画是从下往上长。数据取负之后柱子是从上往下长但动画还是从下往上看起来就像柱子从底部弹上来然后突然翻下去很怪。这个问题的根源是 ucharts 的动画逻辑也是基于“基线在底部”设计的。要改的话只能改源码或者干脆关掉动画animation: false关掉动画虽然少了点灵动感但至少不会出现奇怪的视觉错位。如果你的产品对动画要求不高这是最省事的做法。4.5 常见问题速查表问题现象可能原因排查方向解决方案柱子朝上没变化数据没取负检查series.data是否已取负在setOption前做取负处理柱子超出画布padding底部不够看最长柱子是否被截断增大extra.padding的底部值Y轴刻度显示负数format没生效检查format返回值用Math.abs并处理NaNtooltip 显示负数tooltip 没格式化看tooltip.format是否配置在format里取绝对值柱子位置错乱数据里有null检查数据源把null转成0或过滤掉动画方向不对动画逻辑不匹配观察动画起始方向关闭动画或改源码5. 进阶玩法让倒挂图更好用的几个技巧5.1 顶部加一条基准线倒挂图最上面是零线如果能在零线位置加一条明显的横线视觉上会更有“从这条线往下掉”的感觉。ucharts 本身没有直接提供“在特定Y值画横线”的配置但你可以通过yAxis.gridType和yAxis.gridColor来强化零线yAxis: { min: -yAxisMax, max: 0, gridType: dash, gridColor: #E0E0E0, // 零线单独处理 axisLine: true, axisLineColor: #333333 }如果这样还不够明显可以在图表上方叠一个绝对定位的view画一条横线。虽然有点土但效果最直接。5.2 用渐变色表示消耗程度倒挂图的柱子是从上往下的你可以给柱子加一个从上到下的渐变色顶部深、底部浅视觉上就像“消耗殆尽”的感觉。ucharts 支持linearGradientextra: { column: { linearGradient: { colors: [ [0, #FF6B6B], [1, #FFE0E0] ] } } }这个配置在不同版本的 ucharts 里写法可能略有差异有的版本是linearType: custom配合linearColors。你可以在官方示例里搜一下linearGradient的用法。5.3 多组数据对比如果你需要同时显示“预算”和“实际消耗”两组数据倒挂图也能做。思路是把两组数据都取负然后并排画柱子。但要注意两组数据的最大值可能不一样Y轴的min要取两组里绝对值最大的那个否则短的那组柱子会显得比例不对。const allData [...series1.data, ...series2.data]; const maxVal Math.max(...allData); const yAxisMax Math.ceil(maxVal / 10) * 10;5.4 点击柱子显示详情ucharts 的click事件在倒挂图里是正常的但你要注意点击事件返回的data是取负之后的值。如果你要在详情弹窗里显示真实值记得再取一次绝对值onChartClick(e) { const realValue Math.abs(e.data); // 显示详情 }6. 我个人的实操心得和最后几句这套方案我在三个项目里用过最长的已经跑了半年多没出过问题。核心就是记住三个关键点数据取负、Y轴格式化、零线定位。把这三个点封装成一个通用的函数下次再遇到倒挂图需求直接调用就行。我封装了一个createInvertedBarOption函数接收原始数据和配置返回可以直接传给 ucharts 的 option。这样业务代码里只需要关心数据不用每次都写一遍取负和格式化逻辑。还有一个细节如果你的图表需要支持横屏切换或者响应式布局记得在resize的时候重新计算yAxisMax和padding因为画布尺寸变了柱子的比例和留白也要跟着调。我一般会在onResize里重新调用一次setOption把新的尺寸参数传进去。最后分享一个小技巧调试倒挂图的时候先把animation关掉把yAxis.format暂时去掉让刻度显示原始负值。这样你能清楚地看到数据取负后的真实分布确认零线和柱子方向都对了再把格式化和动画加回来。这个顺序能帮你省掉很多来回试的时间。
阅读完成 · 觉得有帮助？
