《ECharts入门》第 13 章 折线图全解

【本章目标】

学完这一章，你能：

【原理先行】

本章的所有结论都来自同一套探针：把 option 交给 echarts.init(null, null, {renderer:'svg', ssr:true, width:400, height:260})，取 renderToSVGString() 的原文，再把图元拆成属性表。探针代码在 tools/__probe/（第 8 章介绍过 SSR，第 12 章用了它一整章）。除特别说明外，基准 option 都是这一份：

{
xAxis: { type: 'category', data: ['1月','2月','3月','4月','5月','6月'], /* 装饰件全关 */ },
yAxis: { type: 'value', min: 0, max: 100 },
grid: { left: 10, right: 10, top: 10, bottom: 10 },
series: [{ type: 'line', data: [10, 86, 47, 93, 52, 71] }]
}

grid 四边都是 10，所以绘图区是 x∈[10,390]、y∈[10,250]；yAxis 锁 0~100，所以值 v 映射成 y = 250 − 2.4v（值 10 → 226，值 90 → 34）。类目轴 boundaryGap 默认 true，六个点的 x 是 10 + (i+0.5)×63.33，即 41.67 / 105 / 168.33 / 231.67 / 295 / 358.33。下面所有像素读数都能用这两个公式反推——这就是第 12 章教的 convertToPixel 在折线图上的用法。

一、折线由三种图元组成，符号是「单位圆 × 缩放矩阵」

上面那份 option 渲染出来是 2415 字节，里面有 7 个图形元素：1 条折线 + 6 个符号。原文长这样（截断）：

<path d="M41.7 226L105 43.6L168.3 137.2L231.7 26.8L295 125.2L358.3 79.6"
fill="none" pointer-events="visible" stroke="#5070dd" stroke-width="2" stroke-linejoin="bevel">

<path d="M1 0A1 1 0 1 1 1 -0.1A1 1 0 0 1 1 0"
transform="matrix(3,0,0,3,41.6667,226)"
fill="#fff" stroke="#5070dd" stroke-width="0.6666666666666666"
ecmeta_series_index="0" ecmeta_data_index="1">

三个要点：

其一，折线本体是 fill="none" + stroke。 默认线宽 2、连接处 bevel（第 12 章的 1px 线同理，但折线是 2px，所以没有 .5 半像素对齐问题）。

其二，符号不是 <circle>。 ECharts 把每个符号画成半径 1 的单位路径，再用 matrix(sx,0,0,sy,tx,ty) 缩放平移到数据点。所以 symbolSize:6 对应 matrix(3,…)：直径 = 2 × scale。symbolSize:[30,10] 对应 matrix(15,0,0,5,…)，是个 30×10 的椭圆。想按数据点改大小，回调 symbolSize:(v,params)=>params.dataIndex*4 实测得到 scale 序列 [0,2,4,6,8,10]。

其三，空心圆那一圈「边框」永远是 2 个像素。 注意符号上的 stroke-width：scale=3 时是 0.6667，scale=10（symbolSize:20）时是 0.2。库把线宽除回了缩放，使得「局部线宽 × scale ≡ 2」。这条规律在 5.6.0 和 6.1.0 上都成立，意味着你把符号放大到 40px，那圈描边也不会跟着变粗——想改描边得用别的办法（见第十一节的坑）。

顺带把 itemStyle.borderWidth 的无效性钉死：对 symbol:'emptyCircle' 写 borderWidth:6、borderColor:'blue'，实测 scale 仍是 3、局部线宽仍是 0.6667、描边色仍是系列色。折线的符号不接受 itemStyle 的边框配置（柱状图接受，第 14 章会对比）。

元素在内部的类型名是 ec-polyline / ec-polygon / ec-symbol，写在 el.type 上而不是 el.name 上；DOM 层面它们是 SVG 的 <path>。探针第一次跑这件事时读 el.name 读成一片空，白找了半小时。

二、折线和柱状图共用同一套坐标系：改一个词就换图

把基准 option 的 series[0].type 从 'line' 改成 'bar'，其余一个字都不动，实测两份 SVG 的坐标轴文本：

刻度文本逐字相同。这不是巧合：坐标系属于 grid/xAxis/yAxis 这三件组件，series 只是把自己的数据投进去。所以第 12 章学到的轴配置——boundaryGap、min/max/interval、axisLabel、双轴、breaks——对折线图全部适用，本章只讲折线专属的那些键：lineStyle、symbol*、areaStyle、smooth、step、sampling、connectNulls、stack、showAllSymbol、clip、三件套标记。

不过 boundaryGap 在折线上的观感和柱状图相反：类目轴 boundaryGap:false 时六个点的 x 变成 10/86/162/238/314/390——首尾两点正好压在绘图区边界上。折线常用 false（时间序列首尾不留白），柱状图必须 true（否则边柱溢出，第 12 章坑 4）。

三、smooth 的真身：一段 Catmull-Rom 式的三次贝塞尔 + 两次夹逼

LineView.js 里把配置值转成曲率只有一行：

// echarts/lib/chart/line/LineView.js
var getSmooth = function (smooth) {
return isNumber(smooth) ? smooth : (smooth ? 0.5 : 0);
};

对照实测（B1 组）：

两件事值得注意。第一，负数是数字，按数字处理，但 poly.js 里画曲线的分支是 if (smooth > 0)，所以 -1 走 else ctx.lineTo()，结果是直线。第二，1/2/3 之所以和 0.5 一字不差，是因为控制点被夹逼了。源码（echarts/lib/chart/line/poly.js，非单调分支）：

cpx1 = x – vx * smooth * (1 – ratioNextSeg);
cpy1 = y – vy * smooth * (1 – ratioNextSeg);
nextCpx0 = x + vx * smooth * ratioNextSeg;
nextCpy0 = y + vy * smooth * ratioNextSeg;
// 夹进「当前点 ~ 下一点」的包围盒
nextCpx0 = mathMin(nextCpx0, mathMax(nextX, x));
nextCpy0 = mathMin(nextCpy0, mathMax(nextY, y));
nextCpx0 = mathMax(nextCpx0, mathMin(nextX, x));
nextCpy0 = mathMax(nextCpy0, mathMin(nextY, y));

smooth 越大，未夹逼前的控制点跑得越远，但夹逼之后它被死死按在相邻两个点的包围盒角上——曲率超过某个阈值后继续加大数字，结果不再变化。三次贝塞尔的极值一定落在四个控制点的凸包里，控制点被关在数据点包围盒里，就推出「默认平滑不会越过数据的最大/最小值」。

把这条推理拿数据验一遍（锯齿 10/90/10/90/10，数据边界 y=34 与 226，用正确采样三次曲线的算法求极值，不是只看端点）：

结论要说得比网上多数文章准确：默认的 smooth 不会过冲，它只是让线在相邻点之间「鼓」一下，峰值不超过真实峰值。会过冲的是 smoothMonotone:'y'——单调分支在源码里是另一套公式，没有那两次夹逼：

} else if (smoothMonotone === 'y') {
lenPrevSeg = Math.abs(dy0);
var dir_2 = vy > 0 ? 1 : –1;
cpy1 = y – dir_2 * lenPrevSeg * smooth; // 方向取自 prev→next 的净方向
nextCpy0 = y + dir_2 * lenNextSeg * smooth;
}

在局部极值点（波峰/波谷），prev→next 的净方向和「进峰」「离峰」两段的方向相反，于是控制点被推到极值点的外侧，曲线就冲出去了。'x' 分支没这个问题（它只把控制点沿 x 方向偏移，y 恒等于锚点 y）。

最后拿单调上升的数据做一次手算对账，证明公式没读错。数据 [10,30,50,70]（映射后 y 依次 226/178/130/82），smooth:true 实测：

d = M57.5 226 C 57.5 226, 105 202, 152.5 178 C 200 154, 200 154, 247.5 130 C 295 106, 342.5 82, 342.5 82

按公式手算第二段起点的前一个控制点：vx = 248−58 = 190，vy = 130−226 = −96，lenPrevSeg = lenNextSeg → ratio = 0.5 → nextCpx0 = 152.5 + 190×0.5×0.5 = 200.0，nextCpy0 = 178 − 96×0.25 = 154.0 → (200.5, 154) 与 SVG 里的 (200, 154) 在显示精度内一致。书里给的公式能算出库的输出，这一节就过关了。

四、step：把折点拆成直角，三种形态有 5 个名字

实测（数据 10/86/47/93/52/71，六点的直线是 6 个折点）：

LineView.js 的 turnPointsIntoStep 用 switch 处理 'middle'/'end'，default: 分支就是 'start' 的画法——这解释了为什么 true、'start'、'abc' 三者一模一样。

step 与 smooth 同时打开时，step 赢：实测 d 变成一串首尾重合的 C 命令（C41.7 226, 41.7 43.6, 41.7 43.6，控制点恰好是段的两端），画出来仍是直角折线。源码注释也写了这一点（LineSeries.js 的 // Disabled if step is true，指 smooth）。所以「step + smooth 想要圆角台阶」是不存在的，要做圆角台阶只能自己把数据密采后用 smooth。

五、areaStyle：面积的封底在哪、颜色怎么来、透明度默认多少

只写 areaStyle:{} 时，实测面积图元是 fill="#5070dd" + fill-opacity="0.7"——默认 0.7，不是 1。颜色默认吃系列色；渐变两种写法都实测通过：

origin 决定「从哪儿往上/往下填」。规则是：取 origin 指定的值和 0/轴界的某个组合，作为面积路径闭合边的 y。把 d 原文拆开看封底 y（绘图区 y∈[10,250]，值→y = 250−2.4v）：

数字 origin 有效这件事官方类型里是 'auto'|'start'|'end'，但源码 getValueStart 会原样把数字当基准值用。跨零数据默认贴 0 线是故意的：正负两边会分别往上、往下填，形成「蝴蝶」而不是整块糊满——这正是很多人做正负面积图时觉得「颜色怎么从中间断开」的原因。

origin 不是 6.1 新增：同一份 option 在 5.6.0 上实测封底 y 完全一致（undefined→214、'start'→250、'end'→10 三个数字两版相同）。

六、缺失值：六种写法全都断线，'-' 和 null 没有区别

yAxis 0~100、六点数据，把第 3 个点换成各种「缺失」写法，实测折线被切成几段（一段 = 折线 d 里的一个 M 子路径）、以及符号落在哪些 dataIndex。这里有个数法上的陷阱要先交代：ECharts 把断开的线段塞进同一个 <path> 元素，段与段之间用第二个 M 分隔。实测中间缺点的那条线是 1 个 <path>、d="M41.7 226L105 43.6M231.7 26.8L295 125.2L358.3 79.6"——两个 M，所以算 2 段。按 <path> 个数去数会数出 1，然后误判成「库根本没有断线」：

三条结论：「缺失」= 值转成数字后非有限值，null/undefined/'-'/''/NaN 一律等价，没有 '-' 更「正式」这种区别；缺失点连符号都不画（showSymbol 也救不回来）；数组长度不够只是尾巴上没有，不会断线。两头缺失时段数仍是 1——因为断掉的空段不产生图元。

connectNulls:true 只改变连线行为，实测：段数从 2 变 1，但符号集合照旧是 0,1,3,4,5（缺口那个点仍然没有符号）。面积图在这件事上差别更直观：

connectNulls:false 面积 2 段 d=M41.7 226L105 43.6L105 250L41.7 250Z M231.7 26.8…L231.7 250Z
connectNulls:true 面积 1 段 d=M41.7 226L105 43.6L231.7 26.8…L231.7 250L168.3 250L105 250L41.7 250Z

true 时缺口处的 x=168.3（缺失点）仍然出现在封底序列里——面积跨过缺口，但形状按「点在基线上」处理，所以视觉上会看到一个「V 形塌到基线」的假象，这不是数据错了，是 connectNulls 的补偿方式。真实项目里，缺两天数据用 connectNulls:true 连线比让它断开更容易误导读者（第 25 章讲图表伦理时会回到这个例子）。

七、堆叠：series[0] 在最底层，stackStrategy 管正负怎么叠

三条线 stack 同名（A=[10,12,14,16,18,20]、B=[2,3,4,5,6,7]、C=[1,1,1,1,1,1]），实测三条线首点的 y 值反推出的数据：

两版（5.6.0 / 6.1.0）都是 series[0] 当底，逐条往上加。所以「6.x 把堆叠顺序反过来了」这个说法是错的（大纲里原来就是这么写的，已经改掉）。图例从上到下通常列的是 series[0..]，而画出来 series[0] 在最下面——这是很多人觉得「图例顺序和图形反了」的根源。想让某个系列在顶部，就把它写在数组最后。

正负值混合时由 stackStrategy 决定，源码默认值是 get('stackStrategy') || 'samesign'（processor/dataStack.js）。判定条件就写在源码那一个 if 里：从自己往前逐条回看，第一个「满足条件的上一系列结果」就是自己的落点，找不到就落在基线（0）上：

// echarts/lib/processor/dataStack.js（节选）
if (stackStrategy === 'all' // 无条件叠上去
|| stackStrategy === 'positive' && val > 0 // 只往「正列」叠
|| stackStrategy === 'negative' && val < 0 // 只往「负列」叠
|| stackStrategy === 'samesign' && sum >= 0 && val > 0 // 自己非负 → 找正列
|| stackStrategy === 'samesign' && sum <= 0 && val < 0) // 自己非正 → 找负列

注意条件里的 val 是前面那条系列叠完之后的结果，不是它自己的原始值；而 positive/negative 不看自己正负，只看目标列。于是三条线 A=−10、B=+10、C=+5 同一 stack 的实测落点（两版一致）：

最后一行是本节最重要的坑：stackStrategy 拼错时，库不报错、不打警告，而是让整组堆叠全部失效——三条线各自从 0 画起，图形的形状变了，但你从控制台得不到任何提示。这类「静默改变语义」的错误只有类型门禁能拦（第 15 章讲 EChartsOption 时说明为什么）。

拿真实数据再验一次，才看得出 positive 和 samesign 到底差在哪。品类月销的 2025 年 10 月环比增量（万元）：经典美式 +6.87、燕麦拿铁 +8.45、卡布奇诺 +8.55、冷萃冰沙 −12.52（data/sales-category-month.json，四条系列按这个顺序进 stack）。实测每条线在 10 月那一列的高度换算回数值（轴锁 −40~40，像素→值用 convertFromPixel，SVG 只保留两位小数，所以读数有 ±0.03 的抖动）：

第四行顺带证实了本节开头那条：堆叠是从 series[0] 往上长的。同一份数据只把数组顺序倒过来，顶部总量仍是 23.87，但每条线待的层级全变了——经典美式从最底下（6.87）换到最顶上（23.87），卡布奇诺从顶上换到贴着基线（8.55）。「谁当 series[0]」在带负值的堆叠图里决定的是谁贴着基线、谁压在顶上，不是图形的总高度。

stack 与 areaStyle/smooth 组合都正常；stack 与 step 组合时，台阶是逐条累加后画的，观感上会出现「台阶叠台阶」，不建议混用。

八、showAllSymbol：符号数量被类目轴的标签抽稀绑架了

50 个类目点、宽度 400px，实测（轴标签保持可见、字号 6px 旋转，避免把「标签没了」和「符号没了」混为一谈）：

LineSeries.js 的默认值是 showAllSymbol: 'auto'，注释写着「If possible, show all symbols, otherwise follow the label interval strategy」。实现方式是把符号的可见性和轴标签的抽稀结果绑在一起：轴标签被抽稀成每两个显示一个，符号就跟着只剩一半。想让符号全出来，写 showAllSymbol:true（代价：字节数从 11965 → 18230，翻半倍）；想彻底关掉符号，写 showSymbol:false（5635 字节）。数据点少于轴能容纳的数量时（10 点那行），三种写法没有区别。

九、sampling：不是「大数据就自动降采样」，而是「点比像素多才降」

LineSeries.js 的默认值是 sampling: 'none'。真正的开关写在 processor/dataSample.js 里，条件有三个：

var count = data.count();
if (count > 10 && coordSys.type === 'cartesian2d' && sampling) {
var extent = baseAxis.getExtent();
var size = Math.abs(extent[1] – extent[0]) * (dpr || 1);
var rate = Math.round(count / size);
if (isFinite(rate) && rate > 1) { /* 才真的采样 */ }
}

把这三行翻译成人话：数据条数要大于 10；坐标系必须是直角坐标（极坐标/地理上的折线不吃这套）；而且点数要超过基准轴的像素长度（rate = round(点数 / 轴像素长) 必须 > 1）。rate 就是「几个点合成一个」的帧长，1/rate 作为降采样比例传给数据层。

实测扫描（400×260 画布、绘图区宽 380px、正弦数据、showSymbol:false）：

也就是说，你画 400 个点的月度趋势，sampling 一个字也不会生效；只有到几千点以上才有意义。另一组实测（1000 点、400px 宽）给出各取值的对比：

注意 'none' 那一行的 960 而不是 1000：源码会跳过「长度平方 < 0.5」的极短线段（if (dx*dx + dy*dy < 0.5) continue），40 个点因为像素上重合被合并掉了。这条规则会影响你对 SVG 元素计数的一切预期。

lttb（Largest-Triangle-Three-Buckets）走的是另一条路：data.lttbDownSample()，在 rate > 1 时先执行，之后还会再跑一遍普通 sampler（源码里没有 return），所以它的字节数最低但形状保持最好——适合股价/传感器这种「要看趋势但不要毛刺」的场景。

两个没写在文档表里但实测有效的取值：'minmax'（1000 点 → 652 点，专门保留极值，比 average 胖但峰谷不丢）和直接传函数：

sampling: function (frame) { return Math.max.apply(null, frame); } // 等价于 'max'

isString(sampling) 走查表，isFunction(sampling) 直接把回调当 sampler。这两条在 5.6.0 上同样可用（实测两版数字一致：334 / 652 / 334）。

十、symbol 家族：六个键的真实语义与「无效值不报错」清单

path:// 自定义符号在折线上是可以用的，实测 'path://M0,0 L10,10 L0,10 Z' 被归一化成单位路径 d="M-1 -1L1 1L-1 1Z" 再乘 scale——库会把你画的形状塞进 2×2 的单位盒，所以自定义 path 的坐标尺度不重要，比例才重要。

十一、lineStyle：宽度为 1 时属性消失，虚线长度由线宽决定

dashed 的 8,4 和 dotted 的 2 会随 width 等比放大（zrender 里虚线模板按线宽缩放），所以 width:6 + 'dotted' 的点会明显变粗——想让点保持细小，只能自己写 type:[2,2] 并把 width 压低。

颜色优先级实测（G2 组，折线本体的 stroke）：

最后两行是同一个事实的两面：按数据项染色时，emptyCircle 的 fill 永远是白的，所以你的颜色只能出现在描边；换成 circle 才会出现在填充。默认描边宽就是第 12 章说的 2px，想让按项颜色显眼，要么改 symbol，要么把 symbolSize 拉大。

十二、clip：裁的不是路径，是「可见性」

LineSeries.js 默认 clip: true。把 yAxis.min/max 收成 20~80（数据 10~93 有点出界）实测：

真相是两件事叠加：折线路径本身不裁剪，靠 <g clip-path="url(#zrN-c0)"> 把整组裁掉（clip:false 时这个 <g> 还在但 clip 形状被放大到能容下越界符号）；符号则是逐个判断、界外的直接不创建（LineView.js 的 clipShapeForSymbol，注释明确 gated on clip）。所以 clip:false 的副作用是「超出范围的点重新出现」，而 clip:true 下你永远数不到那些符号——排查「数据有 6 个点但图上只有 4 个圈」时先想到这里。

出界还有第三种成因：轴被数据撑开后又被 min/max 收窄（本例）；第一种是 boundaryGap:false 时首尾点压在边界上（第十节）；第二种是 log 轴静默丢弃非正值（第 12 章坑 5，那种情况连线都画不出来，与 clip 无关）。

十三、标记三件套：markLine 会炸图，markPoint 会把均值挪到最近点

三者的 defaultOption（源码 component/marker/Mark*Model.js）：

合法 type 只有 average/min/max/median（markerHelper.js 的 markerTypeCalculator 就这四个键）。写错的后果两类完全不同：

markLine 之所以炸，是因为 MarkLineView 的 filter 会读 item[0].coord，而 type 认不出来时数据项没被转换成 coord。这是本章最危险的一个坑——一个拼写错误让整块图消失，控制台只有一行堆栈。类型门禁能拦住它（第 15 章）。

统计值的落点也有讲究。markerTypeCalculatorWithExtent 算出统计值后，用 seriesModel.indicesOfNearest(…) 找回最接近的真实数据点，并把 item.value 强制成那个点的值。于是同一个「平均值」在两个组件里表现不同（数据 10/86/47/93/52/71，均值 59.83）：

• markLine {type:'average'}：横线画在 y=106.5（值 59.83 处），标签显示 59.83（precision:2 生效）。
• markPoint {type:'average'}：图钉落在 52 那个点（第 5 个数据点，最接近 59.83），标签显示 52。

markLine 的横向拉伸也是实测出来的：data:[{yAxis:80}] 画出的路径是 M10 106.5L390 106.5——横跨整个绘图区，两端各挂一个 symbol（左 circle、右 arrow）：

<path d="M10 106.5L390 106.5" fill="none" stroke="#5070dd" stroke-dasharray="4,2">
<path d="M4 0A4 4 0 1 1 4 -0.4…" transform="matrix(0,-1,1,0,10,106.408)" fill="#5070dd">
<path d="M0 0L5.3 16L0 12L-5.3 16L0 0Z" transform="matrix(0,1,-1,0,390,106.408)" fill="#5070dd">

标签在 x=395，也就是跑到绘图区右边框之外（position:'end' + distance:5）。窄图里它会被容器裁掉，这时候要么写 label:{position:'insideEndTop'}，要么把 grid.right 留大一点。

markArea 画的是 <polygon>，不是 <path>——第一次找它的时候按 <path 搜，一无所获，还以为功能没生效：

<polygon points="105 250 231.7 250 231.7 10 105 10"
fill="rgb(80,112,221)" fill-opacity="0.4" stroke="#5070dd" stroke-width="0">

三件事：默认填充是系列色 + fill-opacity:0.4；itemStyle.color/opacity/borderColor/borderWidth 都能覆盖（实测变 fill="#ff0" fill-opacity="0.9" stroke="red" stroke-width="2"）；只给 {xAxis:'2月'}→{xAxis:'4月'} 时 y 自动铺满整个绘图区（10~250），只给 {yAxis:20}→{yAxis:60} 时 x 自动铺满（10~390）。

类目轴上的区间是「贴着刻度」而不是「贴着格子」：2月~4月 的 x 是 105→231.7，正好是 2 月和 4 月两个点的 x 位置，而不是「2 月格子的左边 ~ 4 月格子的右边」（那应该是 73.3→263.3）。想在类目轴上标出「整个 2 月到整个 4 月」，得自己扩边界：把起点写成 {xAxis:'1月'} 再靠 coord 微调，或者换 time 轴——实测 time 轴上 xAxis: 2025-01-02 → 2025-01-03 得到 points="136.7 … 263.3 …"，与那两个数据点的 x 完全一致，边界精确到日。第 4 节的促销标注就靠这个。

markArea 的 z:1 意味着它默认画在折线底下（系列 z=3），这正是我们想要的效果：底色不遮线。

十四、triggerEvent：6.1 新增，'line' 与 'area' 能分开点

LineView.js 的最后几行决定了事件挂在哪：

var triggerEvent = seriesModel.get('triggerEvent');
var triggerLineEvent = seriesModel.get('triggerLineEvent');
if (process.env.NODE_ENV !== 'production') {
triggerLineEvent && warnDeprecated('triggerLineEvent', 'Use the `triggerEvent` option instead.');
}
var shouldTriggerLineEvent = triggerLineEvent === true || triggerEvent === true || triggerEvent === 'line';
var shouldTriggerAreaEvent = triggerLineEvent === true || triggerEvent === true || triggerEvent === 'area';
this.packEventData(seriesModel, polyline, shouldTriggerLineEvent);
polygon && this.packEventData(seriesModel, polygon, shouldTriggerAreaEvent);

packEventData 往图元的 ecData.eventData 里塞 {componentType:'series', componentSubType:'line', seriesIndex, seriesName, seriesType:'line', selfType: el === this._polygon ? 'area' : 'line'}。

这件事可以不用浏览器就验证：SSR 实例照样有 chart.getZr()，可以拿到图元列表并手动触发：

var list = chart.getZr().storage.getDisplayList();
var targets = list.filter(el => /polyline|polygon/.test(el.type));
targets.forEach(el => chart.getZr().trigger('click', { target: el, topTarget: el }));

实测结果（chart.on('click', …) 里打印 componentType/seriesType/dataIndex/name/value/selfType）：

三点结论：triggerEvent 是 6.1 新增；'line'/'area' 的粒度、以及事件参数里的 selfType 都是 6.1 才有的；triggerLineEvent 在 6.1 仍然能用（向后兼容），但 dev 包会打废弃警告、min 包静默。默认不写时折线本体根本不接受点击——很多人以为「ECharts 的线点不动是 bug」，其实是这个键没开。注意它和 tooltip.trigger:'axis' 无关：轴触发的 tooltip 不需要 triggerEvent。

十五、多条线、颜色槽位与图例联动

6.1 的默认调色板在 visual/tokens.js：

theme: ['#5070dd','#b6d634','#505372','#ff994d','#0ca8df','#ffd10a','#fb628b','#785db0','#3fbe95']

（5.6.0 是 #5470c6, #91cc75, #fac858, …。同一份最简折线在两版的差异只有两处：线色，以及符号 scale 2 vs 3，即 symbolSize 从 4 变成了 6。）

显式写 color 的系列不占调色板槽位。四条线、第 2/3 条写死 red/blue，实测：["#5070dd","red","blue","#b6d634"]——第四条拿到的是色板第 2 色 #b6d634 而不是第 4 色。含义是：给中间某条线写死颜色，后面所有线的颜色都会往前挪一位。跨图表想固定「外卖永远是橙色」，要么按名字 color 数组对齐、要么给每条线都写死。

图例联动方面实测：legend.selected:{'A':false} 时 A 的线根本不产生图元（只剩 #b6d634 一条）；legend.data 里写了不存在的名字（'C'）不会把已有系列藏起来，也不会警告。还有一条容易吃暗亏的：被图例关掉的系列从堆叠组里整个消失，不是「挪到基线上」——实测把 stack 组里那条 −12.52 的系列关掉，其余三条从 −5.63 / 2.8 / 11.37 变成 6.87 / 15.33 / 23.87，全体上移 12.52 万（原因写在 dataStack.js:106 的注释里：stack 分组列表本身依赖图例选择）。更细的图例规则在第 18 章。

十六、SSR 测不出来的三件事：emphasis、progressive、hoverLayerThreshold

诚实交代探针的边界。用 chart.dispatchAction({type:'highlight', seriesIndex:0, dataIndex:2}) 之后再取一次 renderToSVGString()，实测两次字符串完全相同（差异字节 = 0），无论 emphasis.focus 是 'series' 还是 'self'、blur.itemStyle.opacity 写不写。原因：高亮/淡出是 zrender 的 state 样式（el.currentStates），只在真实绘制时参与合成，SSR 序列化只写 normal 状态。所以 emphasis 的效果必须在浏览器里看——本章实验台的按钮就是给你亲手点/悬停用的。

progressive 与 large 在折线上同样「写了没用」：3000 点的折线，progressive:1000/large:true/hoverLayerThreshold:0 三种写法的 SVG 都是 28478 或 28484 字节，图元数一样。这不是探针的问题，是设计如此——LineSeries.js 里写得很明白：

// Disable progressive
progressive: 0,
hoverLayerThreshold: Infinity,

折线默认就关掉渐进渲染（渐进是给散点/关系图那种「几十万个独立图元」准备的，见第 15 章）；hoverLayerThreshold 是 canvas 渲染器的分层阈值，对 SVG 渲染器无意义。给折线写 large:true 不会报错，但也不会变快——这是从散点图章节抄配置过来时的常见事故。

【最小可跑】

这一页不用服务器、不用 fetch，双击就能跑。它把本章最重要的一个能力交到你手上：用 renderToSVGString() 把折线拆成图元，再自己数一遍。每按一个按钮，日志里就多一行现场读数——段数、贝塞尔段数、符号数、曲线 y 极值、字节数。你在【原理先行】里看到的每个数字都能在这里复现。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>第 13 章 最小可跑：把一条折线拆开数</title>
<style>
body { font: 14px/1.7 "Microsoft YaHei", sans-serif; margin: 24px; color: #2b2b2b; }
h1 { font-size: 20px; margin: 0 0 4px; }
#chart { border: 1px solid #d9d2c7; background: #fff; }
#log { background: #f6f4f1; border: 1px solid #d9d2c7; padding: 12px; margin: 12px 0 0;
white-space: pre; overflow: auto; font: 12px/1.7 Consolas, monospace; min-height: 12em; }
button { padding: 6px 12px; margin: 12px 8px 0 0; cursor: pointer; }
</style>
</head>
<body>
<h1>把一条折线拆开数：段数 / 贝塞尔段 / 符号 / 曲线极值</h1>
<div id="chart" style="width:640px; height:340px;"></div>
<p>
<button id="b1">① 默认直线</button>
<button id="b2">② smooth:true</button>
<button id="b3">③ smooth + monotone:'y'</button>
<button id="b4">④ smooth:2</button>
<button id="b5">⑤ step:'middle'</button>
<button id="b6">⑥ areaStyle</button>
<button id="b7">⑦ 中间缺点</button>
<button id="b8">⑧ 缺点 + connectNulls</button>
</p>
<pre id="log"></pre>

<script src="../../lib/echarts.min.js"></script>
<script>
// 用 SVG 渲染器：只有它能把图元当文本读出来（canvas 读不到）。
var chart = echarts.init(document.getElementById('chart'), null, { renderer: 'svg' });
var logEl = document.getElementById('log');
function log(msg) { logEl.textContent += msg + '\\n'; }

var CATS = ['1月', '2月', '3月', '4月', '5月', '6月'];
var DATA = [10, 86, 47, 93, 52, 71];

function baseOpt() {
return {
grid: { left: 46, right: 24, top: 24, bottom: 34 },
xAxis: { type: 'category', data: CATS.slice() },
yAxis: { type: 'value', min: 0, max: 100 },
series: [{ type: 'line', data: DATA.slice() }]
};
}

// SVG 原文 → 图元统计。折线本体 = fill="none" 且有 stroke 且 d 较长的那个 path。
function analyze(svg) {
var body = svg.replace(/<defs[\\s\\S]*?<\\/defs>/g, '');
var lines = [], areas = [], symbols = 0, m;
var rePath = /<path([^>]*)>/g;
while ((m = rePath.exec(body))) {
var a = m[1];
var d = (/d="([^"]*)"/.exec(a) || [])[1] || '';
if (!d) continue;
if (/transform="matrix/.test(a)) { symbols++; continue; } // 符号：单位路径 + 缩放矩阵
var fill = (/fill="([^"]*)"/.exec(a) || [])[1];
var stroke = (/stroke="([^"]*)"/.exec(a) || [])[1];
if (fill === 'none' && stroke && d.length > 24) lines.push(d); // 轴线/网格线只有两个点，被长度筛掉
else if (fill && fill !== 'none' && d.length > 10) areas.push(d);
}
var polyPts = [];
var rePoly = /<polygon[^>]*points="([^"]*)"/g;
while ((m = rePoly.exec(body))) polyPts.push(m[1]);
lines.sort(function (x, y) { return y.length – x.length; });
var main = lines[0] || '';
return {
// 段数 = d 里 M 的个数。ECharts 把断开的线段塞进同一个 <path>，
// 所以「数 <path> 元素」得到的是 1，而真实段数是 2（⑦ 那一行就是证据）。
segments: main ? (main.match(/M/g) || []).length : 0,
paths: lines.length, main: main,
turns: main ? (main.match(/[ML]/g) || []).length : 0,
bezier: main ? (main.match(/C/g) || []).length : 0,
symbols: symbols, areas: areas.length, polygons: polyPts.length,
bytes: svg.length
};
}

// 三次贝塞尔的真实 y 极值：必须按参数方程采样，只看端点会漏掉曲线鼓出去的部分。
function bezierY(d) {
var lo = Infinity, hi = –Infinity, py = 0;
var re = /([MLC])([^MLC]+)/g, m;
while ((m = re.exec(d))) {
var a = m[2].trim().split(/[\\s,]+/).filter(function (s) { return s.length; }).map(Number);
if (m[1] !== 'C') {
for (var i = 0; i + 1 < a.length; i += 2) { py = a[i + 1]; lo = Math.min(lo, py); hi = Math.max(hi, py); }
} else {
for (var j = 0; j + 5 < a.length; j += 6) {
var c0y = a[j + 1], c1y = a[j + 3], ey = a[j + 5];
for (var k = 0; k <= 200; k++) {
var t = k / 200, u = 1 – t;
var y = u * u * u * py + 3 * u * u * t * c0y + 3 * u * t * t * c1y + t * t * t * ey;
lo = Math.min(lo, y); hi = Math.max(hi, y);
}
py = ey;
}
}
}
return { min: Math.round(lo * 100) / 100, max: Math.round(hi * 100) / 100 };
}

function draw(label, mut) {
var opt = baseOpt();
mut(opt);
chart.setOption(opt, true);
var svg = typeof chart.renderToSVGString === 'function' ? chart.renderToSVGString() : '';
var s = analyze(svg);
var ext = s.main ? bezierY(s.main) : { min: 0, max: 0 };
log(label.padEnd(22) +
' 段数=' + s.segments +
' 折点=' + s.turns +
' 贝塞尔=' + s.bezier +
' 符号=' + s.symbols +
' 面积=' + (s.areas + s.polygons) +
' 曲线y=[' + ext.min + ',' + ext.max + ']' +
' 字节=' + s.bytes);
log(' d=' + (s.main.slice(0, 76) + (s.main.length > 76 ? '…' : '')));
}

draw('① 默认直线', function (o) { });
draw('② smooth:true', function (o) { o.series[0].smooth = true; });
draw("③ smooth+monotone:'y'", function (o) { o.series[0].smooth = true; o.series[0].smoothMonotone = 'y'; });
draw('④ smooth:2', function (o) { o.series[0].smooth = 2; });
draw("⑤ step:'middle'", function (o) { o.series[0].step = 'middle'; });
draw('⑥ areaStyle', function (o) { o.series[0].areaStyle = {}; });
draw('⑦ 中间缺点', function (o) { o.series[0].data = [10, 86, null, 93, 52, 71]; });
draw('⑧ 缺点+connectNulls', function (o) {
o.series[0].data = [10, 86, null, 93, 52, 71];
o.series[0].connectNulls = true;
});
log('数据边界：值 10 → 某 y，值 90 → 更小的 y。③ 那一行的曲线 y 会越过数据端点，这就是唯一真的「过冲」。');
log('提示：本页面用 SVG 渲染器（third arg 的 renderer:"svg"），所以能把图元当文本读出来。');
</script>
</body>
</html>

跑法：双击 code/ch13/min.html（extract.mjs 会把它重建出来）。日志里能直接对上正文的几组数字：①②两行段数都是 1、折点分别是 6 和 6，但 贝塞尔 从 0 变 4；③ 的「曲线 y」会突破数据端点；⑤ 折点从 6 涨到 16；⑦ 段数 2、符号 5；⑧ 段数 1、符号仍是 5。

【逐步加料】

最小可跑那页只拆了一条线。实验台要把前面十六节里每一条能读出来的结论做成面板上的数字：符号的 scale 与环宽、平滑的曲线极值、台阶的折点数、面积的封底、缺失值切出的段数、堆叠的落点、采样的开关阈值，以及标记三件套在真实数据上的位置。九个实例全部用 SVG 渲染器（echarts.init(dom, null, {renderer:'svg'})）——只有 SVG 能把图元当文本读出来，这是本章一切验证的前提。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>第 13 章 折线图实验台</title>
<style>
body { font: 14px/1.7 "Microsoft YaHei", sans-serif; margin: 24px; color: #2b2b2b; }
h1 { font-size: 20px; margin: 0 0 6px; }
h2 { font-size: 15px; margin: 28px 0 6px; border-left: 4px solid #8a5a2b; padding-left: 8px; }
#status { background: #eef5fb; border-left: 4px solid #3d7ab8; padding: 8px 12px; margin: 10px 0 14px;
white-space: pre-wrap; }
.readout { background: #fff8ea; border-left: 4px solid #b6902f; padding: 8px 12px; margin: 8px 0 0;
font: 13px/1.7 Consolas, monospace; min-height: 3.4em; white-space: pre-wrap; }
button { padding: 6px 12px; margin: 0 8px 6px 0; cursor: pointer; }
.chart { border: 1px solid #d9d2c7; background: #fff; }
.hint { font-size: 12px; color: #6f675c; margin: 4px 0 0; }
</style>
</head>
<body>
<h1>折线图实验台：符号 / 平滑 / 台阶 / 面积 / 缺失 / 堆叠 / 采样 / 标记</h1>
<p id="status">正在加载数据……</p>

<h2>面板一 · symbol 家族：数 scale 和环宽</h2>
<div id="p1" class="chart" style="width:640px; height:280px;"></div>
<p>
<button id="b1a">emptyCircle（默认）</button>
<button id="b1b">circle</button>
<button id="b1c">rect</button>
<button id="b1d">roundRect</button>
<button id="b1e">triangle</button>
<button id="b1f">diamond</button>
<button id="b1g">pin</button>
<button id="b1h">arrow</button>
<button id="b1i">'none'</button>
<button id="b1j">'nonex'（拼错）</button>
<button id="b1k">symbolSize:20</button>
<button id="b1l">symbolSize:[30,10]</button>
<button id="b1m">symbolSize 回调</button>
<button id="b1n">symbolPosition:'inside'</button>
<button id="b1o">itemStyle.borderWidth:6</button>
</p>
<p class="hint">看第二行那个「局部线宽 × scale」：不管符号多大，它永远是 2。</p>
<p id="p1Info" class="readout"></p>

<h2>面板二 · smooth 实验室：曲线到底会不会冲出数据范围</h2>
<div id="p2" class="chart" style="width:640px; height:280px;"></div>
<p>
<button id="b2a">false</button>
<button id="b2b">0.2</button>
<button id="b2c">true（≡0.5）</button>
<button id="b2d">0.8</button>
<button id="b2e">1</button>
<button id="b2f">3</button>
<button id="b2g">'abc'（非法）</button>
<button id="b2h">true + monotone:'x'</button>
<button id="b2i">true + monotone:'y'</button>
</p>
<p class="hint">数据是锯齿 10/90/10/90/10/90。只有最后一行的「过冲」会是「是」。</p>
<p id="p2Info" class="readout"></p>

<h2>面板三 · step 的五种写法</h2>
<div id="p3" class="chart" style="width:640px; height:260px;"></div>
<p>
<button id="b3a">false</button>
<button id="b3b">true</button>
<button id="b3c">'start'</button>
<button id="b3d">'middle'</button>
<button id="b3e">'end'</button>
<button id="b3f">'abc'（非法）</button>
<button id="b3g">step + smooth 同时开</button>
</p>
<p id="p3Info" class="readout"></p>

<h2>面板四 · areaStyle.origin：跨零数据的封底在哪儿</h2>
<div id="p4" class="chart" style="width:640px; height:280px;"></div>
<p>
<button id="b4a">不写</button>
<button id="b4b">'auto'</button>
<button id="b4c">'start'</button>
<button id="b4d">'end'</button>
<button id="b4e">数字 20</button>
<button id="b4f">'yAxis'（旧写法）</button>
<button id="b4g">全正数据 + 不写</button>
</p>
<p class="hint">默认那组数据是 −20/15/−8/30/−12/25，轴 −40~60，所以 0 线在绘图区中间。</p>
<p id="p4Info" class="readout"></p>

<h2>面板五 · 缺失值（真实数据：2025 年 365 天，4 天为 null）</h2>
<div id="p5" class="chart" style="width:900px; height:300px;"></div>
<p>
<button id="b5a">默认（断线）</button>
<button id="b5b">connectNulls:true</button>
<button id="b5c">connectNulls + 面积</button>
<button id="b5d">把 null 换成 0（错误做法）</button>
<button id="b5e">保留符号</button>
</p>
<p id="p5Info" class="readout"></p>

<h2>面板六 · 堆叠与 stackStrategy（真实数据：2025 品类环比增量，有正有负）</h2>
<div id="p6" class="chart" style="width:900px; height:340px;"></div>
<p>
<button id="b6a">不堆叠</button>
<button id="b6b">stack，strategy 不写</button>
<button id="b6c">'samesign'</button>
<button id="b6d">'all'</button>
<button id="b6e">'positive'</button>
<button id="b6f">'negative'</button>
<button id="b6g">'abc'（非法，静默）</button>
<button id="b6h">series 数组倒序</button>
</p>
<p class="hint">读数盯 2025-10 那一列：经典美式 +6.87、燕麦拿铁 +8.45、卡布奇诺 +8.55、冷萃冰沙 −12.52（万元）。</p>
<p id="p6Info" class="readout"></p>

<h2>面板七 · sampling 的阈值：点比像素多才采样</h2>
<div id="p7" class="chart" style="width:640px; height:260px;"></div>
<p>
<button id="b7a">11 点 average</button>
<button id="b7b">580 点 average</button>
<button id="b7c">1000 点 none</button>
<button id="b7d">1000 点 average</button>
<button id="b7e">1000 点 max</button>
<button id="b7f">1000 点 min</button>
<button id="b7g">1000 点 sum</button>
<button id="b7h">1000 点 lttb</button>
<button id="b7i">1000 点 minmax</button>
<button id="b7j">1000 点 函数</button>
<button id="b7k">3000 点 average</button>
</p>
<p class="hint">绘图区宽 580 CSS 像素；源码里阈值用的是设备像素，所以同一页在不同 dpr 的屏幕上结果不同。</p>
<p id="p7Info" class="readout"></p>

<h2>面板八 · 实战：36 个月趋势 + 标记三件套 / 2025 与 2024 同期对比</h2>
<div id="p8a" class="chart" style="width:900px; height:360px;"></div>
<p>
<button id="b8a1">全部标记</button>
<button id="b8a2">无标记</button>
<button id="b8a3">只 markPoint</button>
<button id="b8a4">只 markArea（类目轴）</button>
<button id="b8a5">markLine type:'avg'（炸图演示）</button>
</p>
<p id="p8aInfo" class="readout"></p>
<div id="p8b" class="chart" style="width:900px; height:340px; margin-top:18px;"></div>
<p>
<button id="b8b1">triggerEvent 不写</button>
<button id="b8b2">true</button>
<button id="b8b3">'line'</button>
<button id="b8b4">'area'</button>
<button id="b8b5">重新生成图（清日志）</button>
</p>
<p class="hint">切换上面四个按钮之后，用鼠标点折线本体或色块，日志会记下事件参数。</p>
<p id="p8bLog" class="readout">等待点击……</p>

<script src="../../lib/echarts.min.js"></script>
<script src="app.js"></script>
</body>
</html>

// 第 13 章实验台：八个面板、九个实例，全部 SVG 渲染器，读数是当场从 SVG 里拆出来的。
var statusEl = document.getElementById('status');
var daily = null; // data/sales-daily.json：1096 行（2023-01-01 ~ 2025-12-31）
var catMonth = null; // data/sales-category-month.json：288 行（36 月 × 8 品类）

fetch('../../data/sales-daily.json')
.then(function (r) { return r.json(); })
.then(function (d) { daily = d; return fetch('../../data/sales-category-month.json'); })
.then(function (r) { return r.json(); })
.then(function (c) {
catMonth = c;
statusEl.textContent = '数据加载完成：日销 ' + daily.length + ' 行、品类月销 ' + catMonth.length + ' 行。'
+ '每个面板下面的黄框是从 renderToSVGString() 的原文里数出来的，不是写死的。';
initAll();
})
.catch(function (e) {
statusEl.textContent = '数据加载失败：' + e.message + '。请用 node tools/serve.mjs 启动服务器后访问本页。';
});

function initAll() {
var panels = [initPanel1, initPanel2, initPanel3, initPanel4, initPanel5, initPanel6, initPanel7, initPanel8];
for (var i = 0; i < panels.length; i++) {
try { panels[i](); }
catch (e) { statusEl.textContent += '\\n' + panels[i].name + ' 初始化抛错：' + e.message; }
}
}

/* ===== 读数小工具：把 SVG 原文拆成图元 ===== */

function svgOf(chart) {
return typeof chart.renderToSVGString === 'function' ? chart.renderToSVGString() : '';
}

function r2(n) { return Math.round(n * 100) / 100; }

function eachPath(svg, cb) {
var body = svg.replace(/<defs[\\s\\S]*?<\\/defs>/g, ''); // <defs> 里有 clipPath 的矩形，会混进统计
var m, re = /<path([^>]*)>/g;
while ((m = re.exec(body))) {
var a = m[1];
var d = (/d="([^"]*)"/.exec(a) || [])[1] || '';
if (d) cb(d, a);
}
}

function nums(d) {
return (d.match(/-?\\d+(?:\\.\\d+)?(?:e-?\\d+)?/gi) || []).map(Number);
}

// 折线本体：fill="none" 且有 stroke，且整条路径的坐标对 ≥ 3（轴线只有两个点，被这条筛掉）。
// 关键：ECharts 把一条系列的多个线段塞进**同一个 <path>**，段与段之间用 M 分隔。
// 所以先按 path 筛，再把 d 拆成子路径——数 <path> 元素的人会永远数出「1 段」。
function lineDs(svg) {
var out = [];
eachPath(svg, function (d, a) {
if (/transform="matrix/.test(a)) return;
if (!(/fill="none"/.test(a) && /stroke=/.test(a))) return;
if (nums(d).length < 6) return; // 整条路径太短 → 不是折线本体
var parts = d.split(/(?=M)/); // 按 M 拆成子路径
for (var i = 0; i < parts.length; i++) {
if (nums(parts[i]).length >= 4) out.push(parts[i]); // 两个点的短段要保留
}
});
return out;
}

function mainD(svg) {
var l = lineDs(svg);
l.sort(function (x, y) { return y.length – x.length; });
return l[0] || '';
}

function areaD(svg) {
var best = '';
eachPath(svg, function (d, a) {
if (/transform="matrix/.test(a)) return;
var f = (/fill="([^"]*)"/.exec(a) || [])[1];
if (!f || f === 'none') return;
if (d.length > best.length) best = d;
});
return best;
}

// 符号 = 单位路径 + matrix(sx,0,0,sy,tx,ty)
function symbolList(svg) {
var out = [];
eachPath(svg, function (d, a) {
var t = /transform="matrix\\(([^)]*)\\)/.exec(a);
if (!t) return;
var p = t[1].split(',').map(Number);
out.push({
sx: p[0], sy: p[3], x: p[4], y: p[5], raw: t[1],
sw: parseFloat((/stroke-width="([^"]*)"/.exec(a) || [])[1]),
d0: d
});
});
return out;
}

// 三次贝塞尔的真实 y 极值：必须按参数方程采样，只看端点会漏掉鼓出去的部分
function bezierY(d) {
var lo = Infinity, hi = –Infinity, py = 0;
var m, re = /([MLC])([^MLC]+)/g;
while ((m = re.exec(d))) {
var a = nums(m[2]);
if (m[1] !== 'C') {
for (var i = 1; i < a.length; i += 2) { py = a[i]; lo = Math.min(lo, py); hi = Math.max(hi, py); }
} else {
for (var j = 5; j < a.length; j += 6) {
var c0y = a[j – 4], c1y = a[j – 2], ey = a[j];
for (var k = 0; k <= 200; k++) {
var t = k / 200, u = 1 – t;
var y = u * u * u * py + 3 * u * u * t * c0y + 3 * u * t * t * c1y + t * t * t * ey;
lo = Math.min(lo, y); hi = Math.max(hi, y);
}
py = ey;
}
}
}
return { min: r2(lo), max: r2(hi) };
}

// 把像素 y 反算成轴上的数值。finder 必须同时给两个轴，只给 yAxisIndex 会返回 null。
function yToValue(chart, y) {
try {
var v = /** @type {any} */ (chart).convertFromPixel({ xAxisIndex: 0, yAxisIndex: 0 }, [0, y]);
return (v && isFinite(v[1])) ? r2(v[1]) : null;
} catch (e) { return null; }
}

function bind(id, fn) { document.getElementById(id).onclick = fn; }

/* ===== 面板一：symbol 家族 ===== */
function initPanel1() {
var chart = echarts.init(document.getElementById('p1'), null, { renderer: 'svg' });
var info = document.getElementById('p1Info');
var CATS = ['1月', '2月', '3月', '4月', '5月', '6月'];
var DATA = [10, 86, 47, 93, 52, 71];

function draw(mode) {
var opt = {
grid: { left: 40, right: 20, top: 24, bottom: 34 },
xAxis: { type: 'category', data: CATS.slice() },
yAxis: { type: 'value', min: 0, max: 100 },
series: [{ type: 'line', data: DATA.slice() }]
};
var s = /** @type {any} */ (opt.series[0]);
if (mode === 'b') s.symbol = 'circle';
else if (mode === 'c') s.symbol = 'rect';
else if (mode === 'd') s.symbol = 'roundRect';
else if (mode === 'e') s.symbol = 'triangle';
else if (mode === 'f') s.symbol = 'diamond';
else if (mode === 'g') s.symbol = 'pin';
else if (mode === 'h') s.symbol = 'arrow';
else if (mode === 'i') s.symbol = 'none';
else if (mode === 'j') s.symbol = 'nonex';
else if (mode === 'k') s.symbolSize = 20;
else if (mode === 'l') s.symbolSize = [30, 10];
else if (mode === 'm') s.symbolSize = function (value, params) { return params.dataIndex * 4; };
else if (mode === 'n') s.symbolPosition = 'inside';
else if (mode === 'o') s.itemStyle = { borderWidth: 6, borderColor: 'blue' };

chart.setOption(/** @type {import('echarts').EChartsOption} */ (opt), true);
var syms = symbolList(svgOf(chart));
var f = syms[0];
info.textContent =
'写法=' + mode + ' 符号数=' + syms.length +
' 单位路径 d=' + (f ? f.d0.slice(0, 46) : '—') + '\\n' +
'直径序列=[' + syms.map(function (x) { return r2(x.sx * 2); }).join(',') + ']' +
' 高度序列=[' + syms.map(function (x) { return r2(x.sy * 2); }).join(',') + ']\\n' +
'第一条 matrix=' + (f ? f.raw : '—') +
' 局部线宽=' + (f ? f.sw : '—') +
' 局部线宽×scale=' + (f ? r2(f.sw * f.sx) : '—') + ' ← 恒等于 2，放大符号不会让环变粗';
}

bind('b1a', function () { draw('a'); });
bind('b1b', function () { draw('b'); });
bind('b1c', function () { draw('c'); });
bind('b1d', function () { draw('d'); });
bind('b1e', function () { draw('e'); });
bind('b1f', function () { draw('f'); });
bind('b1g', function () { draw('g'); });
bind('b1h', function () { draw('h'); });
bind('b1i', function () { draw('i'); });
bind('b1j', function () { draw('j'); });
bind('b1k', function () { draw('k'); });
bind('b1l', function () { draw('l'); });
bind('b1m', function () { draw('m'); });
bind('b1n', function () { draw('n'); });
bind('b1o', function () { draw('o'); });
draw('a');
}

/* ===== 面板二：smooth 实验室 ===== */
function initPanel2() {
var chart = echarts.init(document.getElementById('p2'), null, { renderer: 'svg' });
var info = document.getElementById('p2Info');
var CATS = ['1月', '2月', '3月', '4月', '5月', '6月'];
var SAW = [10, 90, 10, 90, 10, 90];

function draw(mode) {
var opt = {
grid: { left: 40, right: 20, top: 24, bottom: 34 },
xAxis: { type: 'category', data: CATS.slice() },
yAxis: { type: 'value', min: 0, max: 100 },
series: [{ type: 'line', data: SAW.slice(), symbolSize: 8 }]
};
var s = /** @type {any} */ (opt.series[0]);
if (mode === 'b') s.smooth = 0.2;
else if (mode === 'c') s.smooth = true;
else if (mode === 'd') s.smooth = 0.8;
else if (mode === 'e') s.smooth = 1;
else if (mode === 'f') s.smooth = 3;
else if (mode === 'g') s.smooth = 'abc';
else if (mode === 'h') { s.smooth = true; s.smoothMonotone = 'x'; }
else if (mode === 'i') { s.smooth = true; s.smoothMonotone = 'y'; }

chart.setOption(/** @type {import('echarts').EChartsOption} */ (opt), true);
var d = mainD(svgOf(chart));
var cy = bezierY(d);
var ys = symbolList(svgOf(chart)).map(function (x) { return x.y; });
var dy = ys.length ? { min: r2(Math.min.apply(null, ys)), max: r2(Math.max.apply(null, ys)) } : { min: NaN, max: NaN };
var over = cy.min < dy.min – 0.5 || cy.max > dy.max + 0.5;
info.textContent =
'写法=' + mode + ' C 段数=' + (d.match(/C/g) || []).length +
' 线段数=' + lineDs(svgOf(chart)).length + '\\n' +
'数据点 y=[' + dy.min + ',' + dy.max + ']（值 ' + yToValue(chart, dy.max) + ' ~ ' + yToValue(chart, dy.min) + '）\\n' +
'曲线 y=[' + cy.min + ',' + cy.max + ']（值 ' + yToValue(chart, cy.max) + ' ~ ' + yToValue(chart, cy.min) + '）' +
' 过冲=' + (over ? '是' : '否') + '\\n' +
'd 片段=' + d.slice(0, 80) + '…';
}

bind('b2a', function () { draw('a'); });
bind('b2b', function () { draw('b'); });
bind('b2c', function () { draw('c'); });
bind('b2d', function () { draw('d'); });
bind('b2e', function () { draw('e'); });
bind('b2f', function () { draw('f'); });
bind('b2g', function () { draw('g'); });
bind('b2h', function () { draw('h'); });
bind('b2i', function () { draw('i'); });
draw('a');
}

/* ===== 面板三：step ===== */
function initPanel3() {
var chart = echarts.init(document.getElementById('p3'), null, { renderer: 'svg' });
var info = document.getElementById('p3Info');
var CATS = ['1月', '2月', '3月', '4月', '5月', '6月'];
var DATA = [10, 86, 47, 93, 52, 71];

function draw(mode) {
var opt = {
grid: { left: 40, right: 20, top: 24, bottom: 34 },
xAxis: { type: 'category', data: CATS.slice() },
yAxis: { type: 'value', min: 0, max: 100 },
series: [{ type: 'line', data: DATA.slice() }]
};
var s = /** @type {any} */ (opt.series[0]);
if (mode === 'b') s.step = true;
else if (mode === 'c') s.step = 'start';
else if (mode === 'd') s.step = 'middle';
else if (mode === 'e') s.step = 'end';
else if (mode === 'f') s.step = 'abc';
else if (mode === 'g') { s.step = 'middle'; s.smooth = true; }

chart.setOption(/** @type {import('echarts').EChartsOption} */ (opt), true);
var d = mainD(svgOf(chart));
info.textContent =
'写法=' + mode + ' 折点数=' + (d.match(/[MLC]/g) || []).length +
' 坐标对=' + (nums(d).length / 2) + '\\n' +
'd=' + d.slice(0, 96) + '…';
}

bind('b3a', function () { draw('a'); });
bind('b3b', function () { draw('b'); });
bind('b3c', function () { draw('c'); });
bind('b3d', function () { draw('d'); });
bind('b3e', function () { draw('e'); });
bind('b3f', function () { draw('f'); });
bind('b3g', function () { draw('g'); });
draw('a');
}

/* ===== 面板四：areaStyle.origin ===== */
function initPanel4() {
var chart = echarts.init(document.getElementById('p4'), null, { renderer: 'svg' });
var info = document.getElementById('p4Info');
var CATS = ['1月', '2月', '3月', '4月', '5月', '6月'];
var CROSS = [–20, 15, –8, 30, –12, 25];
var POS = [10, 22, 14, 30, 18, 26];

function draw(mode) {
var cross = mode !== 'g';
var opt = {
grid: { left: 44, right: 20, top: 24, bottom: 34 },
xAxis: { type: 'category', data: CATS.slice() },
yAxis: { type: 'value', min: cross ? –40 : 0, max: cross ? 60 : 60 },
series: [{ type: 'line', data: (cross ? CROSS : POS).slice(), areaStyle: {} }]
};
var s = /** @type {any} */ (opt.series[0]);
if (mode === 'b') s.areaStyle.origin = 'auto';
else if (mode === 'c') s.areaStyle.origin = 'start';
else if (mode === 'd') s.areaStyle.origin = 'end';
else if (mode === 'e') s.areaStyle.origin = 20;
else if (mode === 'f') s.areaStyle.origin = 'yAxis';