企业官网建设流程全解析

如何用一张画布讲清多维数据：ECharts多图表组合实战拆解

【免费下载链接】echartsApache ECharts is a powerful, interactive charting and data visualization library for browser项目地址: https://gitcode.com/GitHub_Trending/echa/echarts

数据可视化做到中后期，"多图表组合"几乎是绕不开的坎：一张画布上同时容纳极坐标、直角坐标与多个网格，还得让它们联动起来。这篇文章不空谈概念，直接带你从零搭一个"季度销售看板"，读完你能独立完成多坐标系画布的布局、绑定与交互，让每张图都在讲同一个故事。

开场：一份让领导看不出结论的周报

周五下午，运营负责人把你的成果扫了一遍，问出那句经典问题："所以，我们这季度到底怎么样？"

不怪他。你的周报里躺着六张互不相干的图：两张饼图讲产品占比，一张折线讲销量趋势，三张柱状图讲渠道对比。每张图都正确，但每张图都在用不同的坐标系、不同的"语言"说话。领导需要在六张图之间来回切换上下文，才能拼出完整故事——而人一旦需要"拼图"，注意力就开始流失。

ECharts 的多图表组合，解决的正是这种"上下文断裂"。它允许你在同一张画布内声明多个坐标系：极坐标负责展示周期分布，直角坐标负责趋势，多个网格各自安放独立的子图，再用图例和事件把它们串成一体。图还是那些图，但读者一眼就能建立全局认知。

动手前先拆解：多图表组合的三个拦路虎

先别急着写代码，把大难题拆成三个可以独立解决的小问题：

1. 坐标系共存：占比图通常用极坐标（环形、雷达），趋势图用直角坐标。两种坐标系能同时存在于一个 option 里吗？
2. 空间分配：多个坐标系挤在同一张画布，位置如何划分才不重叠、不遮挡？
3. 交互串联：图多了，图例、点击、高亮如何跨图同步？

下文四步实现，正好一一对应这三个问题。

第一步：在同一个 option 中声明极坐标与直角坐标

一句话目标：先圈出"场地"，让两种坐标系同台共存。

ECharts 的配置哲学是"声明式"：你不需要告诉它怎么画，只需要告诉它有什么。所以第一步只是把 polar 和 grid 各自圈出来：

option = { // —— 场地一：极坐标，占画布左半边 —— polar: { left: '5%', right: '55%' }, // 极坐标占据的区域 angleAxis: {}, // 角度轴（数值轴，决定柱子绕多远） radiusAxis: { // 半径轴（分类轴，决定有几个柱子） type: 'category', data: ['产品A', '产品B', '产品C'] }, // —— 场地二：直角坐标，占画布右半边 —— grid: { left: '50%', right: '5%' }, // 直角坐标占据的区域 xAxis: { type: 'category', data: ['1月', '2月', '3月'] }, yAxis: {}, series: [] // 先空着，下一步再来认领 };

这段代码解决的是"坐标系共存"问题。polar 通过left/right划走左半边，grid 通过left: '50%'从中间起步，两块场地物理上就分开了。这里最常见的坑是：写了polar却忘了配套的angleAxis/radiusAxis，或者 grid 的left没给极坐标留够空间，导致两边叠在一起。记住一个口诀——极坐标等于角度轴加半径轴加容器，三件套缺一不可。

第二步：用 coordinateSystem 把系列绑定到极坐标

一句话目标：让每个系列"认领"属于自己的坐标系。

场地画好了，接下来往里面放数据。关键在于coordinateSystem字段：不写，系列默认进直角坐标系；写上'polar'，就被极坐标接管。继续沿用上一步的 option，把 series 填进去：

series: [ { // 极坐标柱状图：三条"弧柱"并排，结构对比一目了然 type: 'bar', coordinateSystem: 'polar', name: '产品A', data: [120, 132, 101] }, { // 直角坐标折线图：走趋势路线 type: 'line', data: [120, 132, 101] } ]

核心思路是"数据归属"：同一批数据放在不同坐标系下，讲的是完全不同的故事——弧柱的长度对比是"结构"，折线的斜率变化是"节奏"。这一步的高频翻车点有两个：一是把极坐标柱状图的两根轴搞反（记住：radiusAxis是分类轴，决定"有几个柱子"；angleAxis是数值轴，决定"柱子绕多远"）；二是给了某个系列coordinateSystem: 'polar'却忘了配套的轴，系列会静默消失，连报错都没有。官方测试用例 test/bar-polar-multi-series.html 里就是这种"同画布三系列极坐标"的完整配置，可以直接对照跑一遍。

第三步：用 grid 数组实现多网格上下布局

一句话目标：把两套独立的直角坐标系垂直堆叠，做"上趋势、下对比"的复合视图。

当两张图都依赖直角坐标系时，grid从对象变成数组，每个元素就是一块独立画布：

grid: [ { top: '5%', bottom: '55%' }, // 上屏 { top: '50%', bottom: '5%' } // 下屏 ], xAxis: [ { gridIndex: 0, type: 'category', data: ['Mon', 'Tue', 'Wed'] }, // 上屏 X 轴 { gridIndex: 1, type: 'category', data: ['Mon', 'Tue', 'Wed'] } // 下屏 X 轴 ], yAxis: [ { gridIndex: 0 }, { gridIndex: 1 } ], series: [ { type: 'line', xAxisIndex: 0, yAxisIndex: 0, data: [120, 200, 150] }, { type: 'bar', xAxisIndex: 1, yAxisIndex: 1, data: [120, 200, 150] } ]

这一步解决"空间分配"：轴通过gridIndex认领归属，系列通过xAxisIndex/yAxisIndex绑定坐标轴。相比手算像素坐标，百分比定位更抗窗口缩放。常见坑只有一个但很致命：只写了grid: [...]却忘了给每个轴补gridIndex，结果所有轴全部堆到第一块网格上，第二块区域空白一片。自查方法很简单——几个 grid，就该有几套轴，逐一对上号。

第四步：用事件与图例实现跨图联动

一句话目标：让不同坐标系里的系列互相"对话"。

图铺开了，接下来是交互。最轻量的一招是"高亮联动"——点击某个数据项，让其他坐标系里对应的数据项同时亮起：

chart.on('click', function (params) { var idx = params.dataIndex; // 取出点击项在数据里的索引 // 同时高亮两个坐标系中对应的数据项 chart.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: idx }); chart.dispatchAction({ type: 'highlight', seriesIndex: 1, dataIndex: idx }); });

这一步解决"交互串联"。再配合legend的selectchanged事件，可以让图例开关跨网格生效。注意一个细节：多个系列共用一个name时，图例会合并它们，所以联动场景下务必给每个系列起唯一的名字；底层那些不需要响应事件的系列（比如背景网格），记得加silent: true防止事件穿透。更复杂的框选联动可以参考 test/brush.html，图例对多组数据的精细控制可以看 test/legend-action.html。调试这类多坐标系画布时，我习惯在浏览器里直接跑官方测试用例对照排查，效率比盲写高得多：

方案取舍：单画布组合与多实例的对比

写到这里你可能会问：把每张图做成独立的 echarts 实例，再摆到页面上，效果不是一样吗？区别如下：

结论很直接：数据之间的关联性越强，越值得放进同一张画布；只有彼此几乎没有关系时，才适合拆成独立实例。取舍的依据不是"好不好看"，而是"信息是否需要对照"。

发布前的速查清单与高频 FAQ

动手前过一遍这份清单，能帮你少走八成弯路：

• 极坐标必须三件套齐全：polar+angleAxis+radiusAxis
• 系列认领坐标系靠coordinateSystem，不写默认cartesian2d
• 多个 grid 时，每个轴都要写gridIndex，系列写xAxisIndex/yAxisIndex
• 联动场景给系列起唯一name，否则图例会合并它们
• 不想被点击穿透的系列加silent: true
• 布局用百分比定位，优先于固定像素，抗窗口缩放

Q：为什么极坐标柱状图要把半径轴设成 category？因为"多个柱子绕圈排布"的本质，是按类别在半径方向排出一圈位置，角度轴负责承载数值大小。两个轴的类型一旦对调，柱子就会乱成一团，这是极坐标最常见的新手翻车点。

Q：图很多时会不会卡顿？会，但可缓解：大数据系列加sampling采样，更新动画用animationDurationUpdate缩短时长。ECharts 的setOption本身是增量更新，只重绘变化的部分，别用notMerge: true全量重建，那是性能杀手。

Q：想动态把直角坐标切换成极坐标怎么办？setOption支持增量替换：先传入极坐标三件套，再给系列补上coordinateSystem: 'polar'即可，页面不会闪白。参考 test/setOption.html 的写法，稍加改造就是一个坐标切换器。

进阶方向：从多坐标系到地理叠加

多坐标系只是起点。当你熟练布局与联动之后，可以继续探索 dataZoom 作用于极坐标的半径轴、多系列动画编排，甚至把地理坐标系和统计图叠加到同一画布。极坐标的底层实现就藏在 src/coord/polar 目录，读完源码，你对"坐标系"的理解会再上一个台阶。

如果这篇文章帮你省下了一下午的排查时间，不妨收藏一份，下次组看板直接照着抄。下一篇，我们聊大数据量场景下的渲染优化，不见不散。

【免费下载链接】echartsApache ECharts is a powerful, interactive charting and data visualization library for browser项目地址: https://gitcode.com/GitHub_Trending/echa/echarts