Ucharts混合图实战：stack堆叠柱状图与折线图的完美融合

1. 为什么我们需要混合图？从真实需求说起

我做了这么多年数据可视化，发现一个特别有意思的现象：产品经理和老板们总是希望在一张图里看到“所有”信息。他们既想看到不同品类的销售额对比（柱状图），又想看到整体销售额的趋势变化（折线图），还想知道每个品类内部不同子项的构成（堆叠柱状图）。这时候，如果你摊开三张图给他们看，他们大概率会皱眉头，觉得不够直观，信息不聚合。

这就是混合图存在的核心价值——用最节省的屏幕空间，讲述最丰富的业务故事。比如一个经典的电商数据看板，横轴是时间（月份），我们既想用堆叠柱状图展示每个月“服装”、“数码”、“家居”这三大品类的销售额构成，同时又想用一条折线图叠加展示每个月整体的“利润率”变化趋势。这样一来，一眼就能看出哪个品类贡献大，以及利润水平是否健康，关联性一目了然。

Ucharts 本身是个非常优秀的跨端图表库，尤其在 UniApp 这种多端开发场景下，它的性能和兼容性表现确实很“稳”。官方也提供了混合图（Mix）的能力，允许你将折线图和柱状图放在同一个坐标系里展示。但是，当我兴冲冲地打开文档，准备实现上面那个“堆叠柱状图+折线图”的需求时，却发现官方混合图里的柱状图，并不支持 stack（堆叠）属性。这就好比给你了一把多功能瑞士军刀，却发现它缺了最常用的那个小剪刀，瞬间就有点尴尬了。

所以，这篇文章就是来解决这个“小剪刀”问题的。我不会劝你换一个图表库，因为Ucharts在其他方面真的很好用；我们也不去等官方更新，因为项目进度不等人。我的思路很直接：既然官方没提供，那我们就自己动手，给Ucharts“加个班”，让它具备这个能力。整个过程涉及对源码的小范围修改，但别担心，我会把每一步都掰开揉碎了讲，哪怕你之前没接触过Ucharts源码，跟着做也能搞定。

2. 动手之前：理解Ucharts的绘制逻辑

在直接修改代码之前，我们得先花点时间搞明白Ucharts是怎么把图表画出来的。这就像修车，你不能连引擎盖都不打开就直接拧螺丝。理解原理之后，修改起来才会心中有数，知道每一行代码动了哪里，为什么这么动。

Ucharts的核心绘制流程，可以粗略地理解为几个大步骤。首先，它需要一个配置项 opts，这个对象里定义了你图表的一切：类型、数据、颜色、坐标轴等等。然后，库内部会根据这个 opts 去计算每一个数据点应该画在画布（Canvas）的哪个位置，计算柱子的宽度、折线点的坐标。最后，调用一系列Canvas的API，比如 fillRect 画柱子，moveTo 和 lineTo 画折线，把图形渲染出来。

对于混合图（type: 'mix'），Ucharts内部有一个关键的绘制方法，通常命名为 drawMixDataPoints 或类似的名字。这个方法就像是一个车间调度员，它会遍历你传入的 series 数据系列数组。当它发现某个系列的 type 是 'column'（柱状图）时，就调用画柱子的方法；当发现是 'line'（折线图）时，就调用画折线的方法。

那么，“堆叠”效果是怎么实现的呢？对于支持 stack 的纯柱状图，它的绘制逻辑是顺序叠加。假设有两个系列A和B，它们属于同一个堆叠组（stack: 'group1'）。Ucharts会先画出系列A的柱子，然后画系列B的时候，它的起点不再是坐标轴的0点，而是系列A柱子的顶部。这样，系列B的柱子就“堆”在了A的上面，两者的高度加起来，就是这组堆叠柱子的总高度。

现在问题来了：在官方的混合图绘制方法里，这个“调度员”在画柱子的时候，并没有去检查和处理 stack 属性，它只是简单地把每个系列的柱子并列画在了一起。所以，我们的修改目标就很明确了：我们需要侵入到这个“调度员”（drawMixDataPoints 方法）的工作流程中，在它画柱子之前，告诉它哪些柱子需要堆叠，以及堆叠的基准位置应该从哪里开始计算。

3. 第一步：准备你的开发环境和源码

俗话说，工欲善其事，必先利其器。我们修改源码，首先得有一份源码。如果你用的是npm安装的Ucharts，可以在项目的 node_modules 目录下找到 qiun-data-charts 这个包（Ucharts在UniApp中常用的包名）。更直接的方式，是去Ucharts的官方GitHub仓库下载最新的源码文件，通常我们只需要核心的 ucharts.js 或 u-c