如果你已经能把 ECharts 折线图、柱状图和饼图摆得明明白白下一步最容易卡住的地方往往不是 API而是不知道该在什么场景用哪种图。桑基图就是数据可视化里很典型的一种“一眼看懂流向”的图表从哪儿来、经过哪一步、在哪儿流失、最终落到哪儿宽度直接代表量级。这篇内容围绕 ECharts 桑基图入门展开适合已经会一点 ECharts 配置、但还没系统用过桑基图的前端、数据分析或运营同学。我会从数据结构、核心配置、完整可运行示例一路写到企业级大屏和 Vue3 项目里的踩坑点尽量让你看完就能把桑基图接进自己的项目。很多人第一次接触桑基图是因为看到别人做的用户路径、归因分析或者资金流向大屏觉得效果很高级。真正动手时才发现难的不是 series.type 写成 sankey而是数据怎么组织、节点怎么保持守恒、线条怎么不糊成一团。下面按我实际项目里的使用顺序来拆先把适用边界讲清楚再进配置和代码。1. 先搞清楚桑基图适合表达什么不适合表达什么1.1 从折线、柱状、饼图到流向图什么时候该换桑基图折线图擅长看趋势柱状图擅长做对比饼图擅长看静态占比这三种图在 ECharts 里几乎是最常用的基础图形。桑基图的定位不太一样它更像一张“带权重的流程图”核心表达的是流转关系。比如用户从不同渠道进入商品详情再分流到加购、直接购买、流失最后到支付成功和复购这一整条链路用柱状图很难表达清楚因为柱状图只能告诉你每个环节有多少人却看不出人是从哪里流过来的。桑基图的价值在于把“量级”和“路径”绑在一起。每一条连线的粗细代表数值大小节点的位置代表所处层级流向代表转移方向。做企业级数据可视化时桑基图经常出现在归因分析、订单转化、供应链流转、资金流向、能量损耗这些场景里。它的阅读门槛比普通图表高一点但一旦数据设计对了业务方往往能比看表格更快发现问题比如某个渠道进量很大但中途流失特别严重。桑基图也不是万金油。如果你的目标只是比较“今年和去年销售额谁高”柱状图更直接如果只是看“各品类占比”饼图或环形图更轻。桑基图适合多级流转不适合单点对比。节点一多交叉线会迅速变成一团毛线所以实际项目里我一般控制在 30 个节点以内超过就先聚合把次要路径合并成“其他”否则图好看但没人看得懂。1.2 节点、边、权重和守恒桑基图的四根支柱桑基图的数据由节点和边组成。节点就是流转中的状态比如“搜索广告”“商品详情”“支付成功”边就是状态之间的转移比如“搜索广告”到“商品详情”有多少人。ECharts 里节点写在 series.data 里边写在 series.links 里每条边必须有 source、target、value 三个字段。source 和 target 用的是节点名称不是索引这一点和关系图有点区别写错一个字就会导致连线不显示。权重是桑基图的灵魂。它决定了线条宽度也决定了视觉上的注意力分配。比如搜索广告到商品详情是 1800 人社交媒体到商品详情是 900 人那么前者的线宽就是后者两倍左右。读者不需要看数字也能感知到主次。这也是桑基图在汇报时特别好用的原因业务方先看到哪条线粗注意力自然就跟过去了。守恒是桑基图最容易被忽略的规则。所谓守恒就是中间节点的流入总量应该等于流出总量。比如“商品详情”流入了 5000 人那么它流出的“加入购物车”“直接购买”“未支付流失”加起来也应该是 5000。叶子节点可以只进不出也可以只出不进。ECharts 不会强制校验守恒所以你不守恒也能画出来但视觉上会出现节点宽度和连线对不上、流向像凭空产生的问题。真实项目里我建议先在 Excel 或 SQL 里把守恒表拉平再喂给 ECharts。1.3 入门 ECharts 桑基图之前要准备什么版本上建议直接用 ECharts 5.x。旧版本虽然也有桑基图但配置项、按需引入和文档示例差异不小新手很容易搜到旧代码后跑不起来。项目里可以用 npm 安装 echarts也可以先用 CDN 单页测试。如果走按需引入别忘记注册 SankeyChart、TooltipComponent 和 CanvasRenderer否则会遇到“图表空白但控制台没明显报错”的情况。容器准备是第二个关键。ECharts 初始化时如果容器宽高为 0会直接提示 cant get DOM width or height。很多人写 Vue 或 React 时把图表容器放在 v-if 或 tab 里初始化时容器还没渲染出来自然拿不到尺寸。我的习惯是等 DOM 挂载完成、容器有明确高度后再 init并且用 ResizeObserver 监听容器变化而不是只监听 window.resize。数据准备上先拿 10 到 20 个节点做最小闭环。不要一上来就把生产库里的几十万行明细直接塞进去桑基图布局计算比折线图重得多。先用聚合后的数据验证节点关系、守恒和视觉可读性再去接真实数据源。官方文档和社区示例是最好的起点但要注意示例数据往往简化过复制到项目里要改字段名和层级。2. ECharts 桑基图的数据结构和核心配置项2.1 nodes 和 links 的字段约定与常见错误先看一份最小数据结构const nodes [ { name: 搜索广告 }, { name: 社交媒体 }, { name: 商品详情 } ]; const links [ { source: 搜索广告, target: 商品详情, value: 1800 }, { source: 社交媒体, target: 商品详情, value: 900 } ];节点数组里最重要的是 name必须唯一。如果你写了两个“商品详情”ECharts 无法判断边到底连到哪一个布局会异常。节点上还可以挂 itemStyle、label、depth 等字段但入门阶段先把 name 写对。边里的 source 和 target 必须能在节点 name 里找到value 必须是正数字符串数字在某些版本里可能被容忍但不要依赖这个行为最好在数据层就转成 Number。下面这张表是我在排查桑基图数据时最常遇到的几类问题现象常见原因处理方式图完全空白容器无高度或没注册 SankeyChart给容器明确宽高检查按需引入节点出现但没连线source/target 和 name 不匹配逐字比对必要时用 map 校验连线方向奇怪数据存在环桑基图不适合循环先打断环或换图节点宽度异常value 为负数、NaN 或守恒被破坏清洗数据检查中间节点流入流出控制台提示 cyclic链路形成闭环找出 A→B→C→A 这类路径并拆分还有一个常见坑是“节点没声明但边里用了”。比如 links 里写了 source: 首页推荐但 nodes 里没有这个 nameECharts 可能不会报很明确的错误只是图上看不到。我的做法是写一个校验函数遍历 links把 source 和 target 都收集起来再和 nodes 的 name 做差集差集不为空就直接在开发环境抛错。2.2 series 里最该先调的 8 个参数series 是桑基图配置的核心下面这些参数我几乎每次都会调参数作用入门建议type指定图表类型固定写 sankeydata节点数组每个节点至少 { name }links边数组必须有 source、target、valuenodeAlign节点对齐方式常用 justify让布局更紧凑orient流向方向横向用 horizontal窄屏可试 verticallayoutIterations布局迭代次数默认 32节点多时降到 16 或 8draggable是否可拖拽节点演示可开生产看需求emphasis.focus高亮相邻关系设为 adjacency 很实用nodeAlign 这个参数值得单独说。它控制节点在水平方向上的对齐策略。justify 会让节点尽量均匀分布整体更饱满left 和 right 会让节点靠某一侧适合强调起点或终点。实际项目里如果发现图右侧空了一大块通常是节点层级和 nodeAlign 不匹配换成 justify 往往就能改善。layoutIterations 影响布局质量和性能。迭代次数越高节点和连线的交叉可能越少但计算时间也越长。节点少于 20 个时我一般保持默认节点到 50 个左右会降到 16并关闭动画。draggable 在演示时很好用业务方可以自己拖节点看流向但生产大屏上如果没人操作最好关掉减少误触和性能开销。emphasis.focus 设为 adjacency 后鼠标移到节点上只高亮相关连线能大幅降低“毛线团”的阅读压力。2.3 tooltip、label、edgeLabel 的信息设计桑基图的 tooltip 需要区分节点和边。节点上显示名称和总量边上显示来源、去向和数值。ECharts 的 tooltip formatter 接收的 params 里dataType 可以判断是 node 还是 edge。下面是一个可直接用的写法tooltip: { trigger: item, triggerOn: mousemove, confine: true, extraCssText: white-space: normal; max-width: 280px; word-break: break-all;, formatter: function (params) { if (params.dataType edge) { return params.data.source → params.data.target br/人数 params.data.value; } return params.name br/节点总量 (params.value || 0); } }热词里经常有人问 ECharts tooltip 自动换行。默认 tooltip 往往不换行长文案会撑得很宽。解决方式就是 extraCssText 里加 white-space: normal 和 max-width再配合 word-break。如果文案里有中文和英文混排word-break: break-all 更稳。confine: true 能让 tooltip 限制在图表容器内大屏边缘的节点就不会把提示框顶出去。label 控制节点文字。节点多的时候不要把所有信息都堆上去。我一般只显示名称必要时用 formatter 拼一个简短数值。文字太长可以用 overflow: truncate再配合 width 限制。edgeLabel 是边上的文字默认关闭因为边一多就会互相遮挡。只有节点很少、汇报需要直接看数值时才打开。打开后也要调 fontSize 和 color否则线条上的文字会非常脏。2.4 配色和线条让流向可读而不是一团毛线桑基图好不好看配色占一半。最稳的做法是按层级上色同一层的节点用同一种颜色连线用渐变或 source 颜色。ECharts 的 lineStyle.color 支持 source、target、gradient也支持具体颜色值。gradient 会让线条从源节点颜色过渡到目标节点颜色视觉上更顺但节点多时颜色可能过花。我一般先用 source再调低 opacity让线条退到背景层。lineStyle: { color: source, curveness: 0.5, opacity: 0.45 }, nodeWidth: 14, nodeGap: 10curveness 控制线条弯曲程度0 是直线0.5 左右比较自然。opacity 很关键1 会糊成实心色块0.3 到 0.5 通常更舒服。深色大屏背景下opacity 可以稍高一点但不要超过 0.6。nodeWidth 和 nodeGap 分别控制节点宽度和节点间距节点多的时候要适当减小 nodeGap否则画布不够用。levels 可以按深度统一配置样式levels: [ { depth: 0, itemStyle: { color: #5B8FF9 }, lineStyle: { color: source, opacity: 0.45 } }, { depth: 1, itemStyle: { color: #61DDAA }, lineStyle: { color: source, opacity: 0.45 } }, { depth: 2, itemStyle: { color: #F6BD16 }, lineStyle: { color: source, opacity: 0.45 } } ]depth 从 0 开始对应第一层节点。用 levels 的好处是配色统一不会因为节点顺序变化而乱掉。如果背景是浅色颜色饱和度要低一些如果是深色大屏节点可以亮一点但连线要暗下去。别小看这一点很多桑基图看起来乱不是布局问题而是线条和节点抢了同样的视觉权重。3. 手把手做一个可运行的桑基图3.1 页面骨架与 ECharts 引入方式先给一份完整 HTML直接保存成 .html 文件就能跑。这里用 CDN 引入 ECharts 5适合快速验证。项目里再换成 npm 按需引入。!DOCTYPE html html langzh-CN head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1 / titleECharts 桑基图入门示例/title style html, body { margin: 0; padding: 0; height: 100%; background: #0b1020; } #chart { width: 100vw; height: 100vh; } /style /head body div idchart/div script srchttps://cdn.jsdelivr.net/npm/echarts5/dist/echarts.min.js/script script // 图表代码放在这里 /script /body /html容器必须有宽高这是硬条件。上面用 100vw 和 100vh简单直接。真实项目里可能是父级 div 控制高度这时要确保父级高度不是 auto也不是 0。很多人把图表放在 flex 布局里父级高度由内容撑开结果 ECharts 初始化时量到 0。解决办法是给父级明确高度或者等布局稳定后再 init。3.2 准备一份守恒的电商转化数据这份数据我设计成从渠道到商品详情再到加购、购买、支付和复购的链路。每个中间节点的流入和流出都保持相等。你可以先用这份数据跑通再替换成自己的业务数据。来源去向人数首页推荐商品详情1200搜索广告商品详情1800社交媒体商品详情900活动页商品详情1100商品详情加入购物车2600商品详情直接购买1400商品详情未支付流失1000加入购物车支付成功1800加入购物车未支付流失800直接购买支付成功1400支付成功复购800支付成功完结2400检查一下守恒四个来源进入商品详情总计 5000商品详情流出 2600 1400 1000 5000。加入购物车流入 2600流出 1800 800 2600。直接购买流入 1400流出 1400。支付成功流入 1800 1400 3200流出 800 2400 3200。未支付流失是叶子节点流入 1800。复购和完结也是叶子节点。这样的数据画出来节点宽度和线条宽度会非常自然。真实业务数据往往不守恒比如订单表里同一个用户被多端记录或者退款、取消状态没纳入。这时候要么补全状态要么在数据层做归因拆解。不要直接把不守恒的数据丢给 ECharts然后靠调样式掩盖那样业务方一看细节就会问出问题。3.3 完整配置代码与逐段说明下面是完整初始化代码放在 script 标签里即可。const chartDom document.getElementById(chart); const chart echarts.init(chartDom); const nodes [ { name: 首页推荐 }, { name: 搜索广告 }, { name: 社交媒体 }, { name: 活动页 }, { name: 商品详情 }, { name: 加入购物车 }, { name: 直接购买 }, { name: 未支付流失 }, { name: 支付成功 }, { name: 复购 }, { name: 完结 } ]; const links [ { source: 首页推荐, target: 商品详情, value: 1200 }, { source: 搜索广告, target: 商品详情, value: 1800 }, { source: 社交媒体, target: 商品详情, value: 900 }, { source: 活动页, target: 商品详情, value: 1100 }, { source: 商品详情, target: 加入购物车, value: 2600 }, { source: 商品详情, target: 直接购买, value: 1400 }, { source: 商品详情, target: 未支付流失, value: 1000 }, { source: 加入购物车, target: 支付成功, value: 1800 }, { source: 加入购物车, target: 未支付流失, value: 800 }, { source: 直接购买, target: 支付成功, value: 1400 }, { source: 支付成功, target: 复购, value: 800 }, { source: 支付成功, target: 完结, value: 2400 } ]; const option { backgroundColor: #0b1020, tooltip: { trigger: item, triggerOn: mousemove, confine: true, extraCssText: white-space: normal; max-width: 280px; word-break: break-all;, formatter: function (params) { if (params.dataType edge) { return params.data.source → params.data.target br/人数 params.data.value; } return params.name br/节点总量 (params.value || 0); } }, series: [ { type: sankey, data: nodes, links: links, nodeAlign: justify, orient: horizontal, layoutIterations: 32, draggable: true, emphasis: { focus: adjacency }, nodeWidth: 14, nodeGap: 10, lineStyle: { color: source, curveness: 0.5, opacity: 0.45 }, label: { show: true, color: #e8f0ff, fontSize: 12, formatter: {b} }, edgeLabel: { show: false }, levels: [ { depth: 0, itemStyle: { color: #5B8FF9 }, lineStyle: { color: source, opacity: 0.45 } }, { depth: 1, itemStyle: { color: #61DDAA }, lineStyle: { color: source, opacity: 0.45 } }, { depth: 2, itemStyle: { color: #F6BD16 }, lineStyle: { color: source, opacity: 0.45 } }, { depth: 3, itemStyle: { color: #FF9845 }, lineStyle: { color: source, opacity: 0.45 } } ] } ] }; chart.setOption(option); window.addEventListener(resize, function () { chart.resize(); });逐段看几个点。backgroundColor 设成深色是为了大屏效果浅色背景改成对应颜色即可。tooltip 的 formatter 里判断了 dataType这样节点和边不会显示同样的信息。series 里 data 和 links 直接对应前面两个数组。nodeAlign 用 justify横向布局更饱满。emphasis.focus 设成 adjacency鼠标悬停时只高亮相邻节点和边避免整张图都在抢注意力。levels 按 depth 配置颜色第一层渠道一种色第二层商品详情一种色第三层加购和购买一种色第四层支付成功一种色。注意 depth 是根据数据计算出来的不是手动指定。如果发现颜色没按预期生效先检查节点是否真的处于对应层级。最后一个 window.resize 监听只是保底真实项目更推荐 ResizeObserver。3.4 自适应、resize 和 pxtorem 不生效的处理热词里有人问 pxtorem 对 ECharts 没起到效果Vue3 项目里尤其常见。原因不复杂PostCSS 的 pxtorem 只处理 CSS 文件里的 px 值ECharts 的图形是画在 Canvas 里的选项里的 fontSize、nodeWidth、nodeGap 这些数值都是 JavaScript 对象pxtorem 根本看不到。容器宽高可以用 rem但 Canvas 内部绘制仍然按 px 算。处理思路有三步。第一步容器宽高用 CSS 百分比、vw、vh 或 rem 控制ECharts 只负责填满容器。第二步ECharts 内部的字体和间距用 JS 根据根字号动态计算。比如const rootFontSize parseFloat( getComputedStyle(document.documentElement).fontSize ); const option { series: [{ label: { fontSize: rootFontSize * 0.75 }, nodeWidth: rootFontSize * 0.9, nodeGap: rootFontSize * 0.6 }] };这样根字号变化时你重新计算 option 并 setOption再调用 chart.resize()就能让 Canvas 内部也跟着缩放。第三步如果项目用 transform: scale 做大屏适配要特别小心鼠标事件。ECharts 内部的坐标计算和外层缩放叠加后tooltip 位置可能偏移。能不用 scale 就不用优先用响应式容器加动态字号。另外resize 不要监听得太频繁。window.resize 触发很密集桑基图布局又比较重最好加 100 到 200 毫秒防抖。Vue3 里可以在 onMounted 创建 ResizeObserver在 onBeforeUnmount 里 disconnect避免组件销毁后还在触发重绘。4. 放进真实项目Vue3、大屏、性能和交互4.1 Vue3 组件封装按需引入与响应式更新真实项目里不建议每个页面都全量引入 echarts。按需引入的写法如下import * as echarts from echarts/core; import { SankeyChart } from echarts/charts; import { TooltipComponent } from echarts/components; import { CanvasRenderer } from echarts/renderers; echarts.use([SankeyChart, TooltipComponent, CanvasRenderer]);组件里用 ref 拿到 DOMonMounted 初始化onBeforeUnmount 销毁。数据变化时用 watch 监听重新 setOption。注意桑基图更新数据时旧节点状态可能残留可以传第二个参数 true 做 notMerge 合并或者先 clear 再 setOption。下面是一个简化版 Vue3 组件结构template div refchartRef classsankey-chart/div /template script setup import { ref, onMounted, onBeforeUnmount, watch, nextTick } from vue; import * as echarts from echarts/core; import { SankeyChart } from echarts/charts; import { TooltipComponent } from echarts/components; import { CanvasRenderer } from echarts/renderers; echarts.use([SankeyChart, TooltipComponent, CanvasRenderer]); const props defineProps({ chartData: { type: Object, required: true } }); const chartRef ref(null); let chart null; function buildOption() { return { tooltip: { trigger: item, confine: true, extraCssText: white-space: normal; max-width: 280px; word-break: break-all; }, series: [{ type: sankey, data: props.chartData.nodes, links: props.chartData.links, nodeAlign: justify, emphasis: { focus: adjacency }, lineStyle: { color: source, curveness: 0.5, opacity: 0.45 }, label: { show: true, fontSize: 12 } }] }; } onMounted(async () { await nextTick(); chart echarts.init(chartRef.value); chart.setOption(buildOption()); }); watch( () props.chartData, () { if (!chart) return; chart.setOption(buildOption(), true); }, { deep: true } ); onBeforeUnmount(() { if (chart) { chart.dispose(); chart null; } }); /script style scoped .sankey-chart { width: 100%; height: 100%; min-height: 420px; } /style这里有两个经验点。第一init 之前加 nextTick确保 DOM 有尺寸。第二onBeforeUnmount 里 dispose否则页面切换多次后内存会持续上涨大屏项目尤其明显。如果容器尺寸会变再加 ResizeObserver不要只依赖 window.resize。4.2 企业级大屏适配rem、px、DPR 和 ECharts 的边界大屏适配里rem 方案很常见根据设计稿宽度设置根字号页面元素用 rem。ECharts 容器可以用 rem但图表内部是 Canvas需要单独处理。前面讲过 pxtorem 不生效这里再补一个 DPR 的点。ECharts 初始化时可以指定 devicePixelRatiochart echarts.init(chartRef.value, null, { renderer: canvas, devicePixelRatio: window.devicePixelRatio || 1 });高分辨率屏幕上合适的 devicePixelRatio 能让文字和线条更清晰。但如果页面被浏览器缩放或者大屏用 transform: scale 整体缩放DPR 和鼠标坐标可能对不上。我的建议是大屏尽量按真实分辨率布局用 vw、vh、百分比和动态字号适配少用整体 scale。如果非要用 scale至少把 ECharts 放在 scale 容器外层或者测试 tooltip 和点击事件是否偏移。字号适配可以用一个比例函数。比如设计稿宽 1920当前窗口宽 2560比例是 1.333那么 fontSize 也从 12 变成 16。注意不要只改容器大小不改 option否则容器变大了文字还是很小。每次尺寸变化时先算新字号再 setOption 合并最后 resize。这个过程要防抖不然大屏窗口拖动时会卡。4.3 节点一多就卡桑基图性能治理清单桑基图布局是计算密集型的节点和边一多浏览器主线程压力很明显。下面这张表是我遇到卡顿时的排查顺序现象优先检查处理建议首次渲染慢节点数、边数聚合次要节点合并为“其他”鼠标移动卡tooltip、emphasis简化 formatter关闭复杂 HTML tooltip拖拽不流畅draggable、动画生产关闭 draggableanimation 设 false数据更新白屏notMerge、重复 init复用实例setOption 更新页面切换内存涨未 disposeonBeforeUnmount 调用 dispose节点数超过 50、边数超过 200 后我会默认关闭动画把 layoutIterations 降到 16 甚至 8。布局质量会略有下降但交互流畅度提升很明显。如果业务方不需要拖拽draggable 直接设为 false。tooltip 如果用了很复杂的 HTML 结构也会拖慢悬停响应尽量用轻量字符串。还有一个容易忽略的点是数据更新频率。大屏如果每 3 秒刷新一次不要每次都重新 init也不要用全量深拷贝。复用 chart 实例只更新变化的 nodes 和 links。如果数据结构稳定甚至可以只更新 links 的 value但桑基图布局依赖节点关系关系变了还是要重新 setOption。4.4 交互增强下钻、联动、导出和状态保持桑基图点击节点做下钻很常见。比如点击“商品详情”右侧展示该节点的明细来源。代码上监听 clickchart.on(click, function (params) { if (params.dataType node) { // 根据 params.name 请求明细数据 // 然后 chart.setOption(newOption, true) } });联动其他图表时可以用 dispatchAction 高亮对应节点。导出图片用 chart.getDataURL()设置 pixelRatio 和 backgroundColor。状态保持稍微麻烦一点因为桑基图更新数据后布局会重算用户拖拽过的节点位置默认不会保留。如果业务上需要保留可以在拖拽结束事件里记录节点位置但 ECharts 对桑基图节点位置的直接控制能力有限实际项目里我更建议用固定数据顺序和 nodeAlign 来稳定布局而不是依赖用户拖拽。5. 常见问题排查与实战避坑5.1 空白、报错、警告的排查路径桑基图空白时按这个顺序查容器有没有宽高、ECharts 有没有初始化成功、SankeyChart 有没有注册、nodes 和 links 是否为空、source/target 是否匹配、数据是否成环。控制台如果提示 cyclic说明链路闭环了桑基图不适合直接画循环流需要先拆环或换图。如果提示 cant get DOM width or height九成是容器高度为 0先给父级和自身明确高度。按需引入漏注册也很常见。全量引入 echarts.min.js 时不会遇到但 npm 按需引入只写echarts.use([TooltipComponent])没写 SankeyChart就会空白。检查方法是看控制台有没有 “Component series.sankey not exists” 之类的提示。版本不匹配也会导致配置项无效比如从旧文档复制过来的 edgeLabel 写法在新版本里行为不同最好以当前使用的版本文档为准。5.2 布局乱、连线交叉、文字溢出怎么调布局乱的第一反应不要是调颜色而是调数据和 nodeAlign。节点顺序会明显影响连线交叉把同一来源的节点放一起把主要流向放在中间往往比调 layoutIterations 更有效。nodeAlign 用 justify 可以让层级分布更均匀。orient 改成 vertical 适合窄屏但纵向布局节点多时会更拥挤。文字溢出用 label.overflow: truncate 配合 width。如果名称太长可以在数据层做短名映射tooltip 里再显示全称。边上的文字默认别开开了就要接受遮挡风险。连线太密时降低 opacity、用 source 颜色、减小 curveness都能让图干净一些。但如果节点数量本身超标任何样式都是治标不治本聚合数据才是根本。问题调整项经验值连线交叉多节点顺序、layoutIterations先调顺序再降迭代节点挤在一起nodeGap、nodeWidth节点多时减小 nodeGap文字看不清label.fontSize、overflow名称短化宽度限制线条太糊lineStyle.opacity、curvenessopacity 0.35 到 0.5整体太散nodeAlign优先试 justify5.3 与热词相关的零散问题饼图、柱状图、地图、社区资源热词里还有很多 ECharts 相关问题这里顺带说清楚。饼图 labelLine 末尾小圆点偏移通常和 labelLine.length、labelLine.length2、label.offset 有关调整这几个值可以让引导线和文字对齐。柱状图柱子用自定义图片普通柱状图可以通过 itemStyle.color 传图片对象实现重复填充想要更复杂的形状可以用 pictorialBar。地图类图表要注意底图来源和授权合规不是拿到一份边界数据就能直接商用这部分单独评估。tooltip 自动换行前面已经给了 extraCssText 方案。pxtorem 对 ECharts 不生效是因为 Canvas 绘制不走 CSS 转换解决思路是动态计算字号并重新 setOption。社区资源很好用但复制示例时一定先看 ECharts 版本再改数据字段。很多“跑不起来”的问题不是代码错了而是版本和引入方式不一致。5.4 我的避坑清单先做守恒表再写 option。数据不守恒后面调什么都是白费。节点 name 必须唯一source 和 target 必须与 name 完全一致。中间节点流入等于流出叶子节点可以只进不出或只出不进。桑基图不画环出现环先拆环或换关系图。容器必须有明确宽高Vue3 里 init 前加 nextTick。按需引入别漏 SankeyChart否则图会空白。节点超过 30 个先考虑聚合超过 50 个基本要牺牲交互换性能。生产环境关闭 draggable 和 animation大屏会更稳。pxtorem 管不到 Canvas字号和间距要 JS 动态算。组件销毁时 dispose避免内存泄漏和重复实例。我个人在项目里最先做的一件事往往不是调样式而是先拿一份守恒的数据把流向跑通。只要节点和边的关系是对的后面配色、大屏适配、下钻都只是工程问题。桑基图真正的门槛不在 ECharts API而在你是否愿意先把业务链路拆清楚。
