《ECharts入门》第 20 章 缩放与时间：dataZoom 与 timeline（下）：实验台（下）～小结

本篇是第 20 章的第 3/3 篇，接上篇《第 20 章 缩放与时间：dataZoom 与 timeline（中）：实验台（上）：index.html、app.js》。

（代码接上篇）

/* ===== 面板八：slider 的两条几何定律（第十四节） ===== */

function initPanel8() {
var p = makePanel('p8');
/** @type {any[][]} */
var V = [
['① 默认（B0）', baseOpt()],
['② brushSelect:false ⇒ 没有拖动条，整组下移 7（轨道顶 208→215）', dzOpt([slider(25, 75, { brushSelect: false })])],
['③ moveHandleSize:0', dzOpt([slider(25, 75, { moveHandleSize: 0 })])],
['④ moveHandleSize:8', dzOpt([slider(25, 75, { moveHandleSize: 8 })])],
['⑤ moveHandleSize:20', dzOpt([slider(25, 75, { moveHandleSize: 20 })])],
['⑥ moveHandleSize:30（轨道顶出画布）', dzOpt([slider(25, 75, { moveHandleSize: 30 })])],
['⑦ height:12 + bottom:4 + left:20 + right:20',
dzOpt([slider(25, 75, { height: 12, bottom: 4, left: 20, right: 20 })])],
['⑧ 竖条 orient:vertical', /** @type {any} */ ({
animation: false, xAxis: { type: 'value' },
yAxis: { type: 'category', data: CAT12.slice() },
series: [{ type: 'bar', data: A12.slice() }],
dataZoom: [{ type: 'slider', yAxisIndex: 0, orient: 'vertical', start: 25, end: 75 }]
})]
];
function std(svg, c) {
return [geometryRow(svg), shadowRow(svg), gridRow(c), dzRow(c, 0)];
}
for (var i = 0; i < V.length; i++) {
(function (idx) {
bind('b8' + String.fromCharCode(97 + idx), function () { p.run(V[idx][0], V[idx][1], std); });
})(i);
}
bind('b8i', function () {
p.run('⑨ 两条定律逐档对账：moveHandleSize 从 0 扫到 33', baseOpt(), function (svg, c) {
var out = [' 定律一（纵向）组顶 = 画布高 − 30 − edgeGap(15) − (brushSelect ? 7 : 0)，那个 7 写死在源码里，不读你的 moveHandleSize',
' 定律二（横向）轨道起 x = grid.x + max(2.5, 0.4 × moveHandleSize)；厚度上沿 = 组顶 + max(0, moveHandleSize − 0.5)'];
var mhs = [null, 0, 1, 2, 3, 4, 5, 6, 7, 8, 10, 12, 15, 20, 25, 30, 33];
var inst = echarts.init(null, null, { renderer: 'svg', ssr: true, width: 400, height: 260 });
var bad1 = 0, bad2 = 0;
try {
for (var j = 0; j < mhs.length; j++) {
var extra = mhs[j] == null ? {} : { moveHandleSize: mhs[j] };
inst.setOption(/** @type {any} */ (dzOpt([slider(25, 75, extra)])), true);
var svg2 = svgOf(inst);
var rs = rectShapes(svg2);
var track = null;
for (var t = 0; t < rs.length; t++) {
if (rs[t].沿轴 && String(rs[t].op) !== '0.2') track = rs[t];
}
if (!track) { out.push(' ' + JSON.stringify(mhs[j]) + ' ⇒ 轨道读不到'); continue; }
var mh = mhs[j] == null ? 7 : mhs[j];
var handX = 60 + Math.max(2.5, 0.4 * mh);
var handY = 208 + Math.max(0, mh – 0.5);
var okX = Math.abs(track.沿轴[0] – handX) < 0.011;
var okY = Math.abs(track.厚度[0] – handY) < 0.011;
if (!okX) bad2++;
if (!okY) bad1++;
out.push(' moveHandleSize=' + JSON.stringify(mhs[j]) + ' 轨道沿轴=' + frs(track.沿轴) +
' 厚度=' + frs(track.厚度) + ' 手算起x=' + r2(handX) + ' ' + (okX ? '✓' : '✗') +
' 手算上沿=' + r2(handY) + ' ' + (okY ? '✓' : '✗') +
' 拖动条=' + (moveHandleBox(svg2) ? '在' : '不在') + ' 字节=' + svg2.length);
}
out.push(' ⇒ ' + mhs.length + ' 档：纵向不符 ' + bad1 + ' 档，横向不符 ' + bad2 + ' 档'
+ '（null 那一档就是「不写这个键」，库里那份 defaultOption 写的是 7）');
} catch (e) {
out.push(' ⇒ 扫描中途抛错：' + e.message);
} finally { try { inst.dispose(); } catch (e2) { } }
return out;
});
});
p.run(V[0][0], V[0][1], std);
}
/* ===== 面板九：手柄十档、图标、三个填充色、SSR 读不到的 cursor（第十五节） ===== */

// 模型里的 handleIcon 原串（黄框要印它，别靠记忆）
function handleStyleRow(c) {
var m = modelOf(c), out = [];
if (!m) return ' 手柄配置 = ' + NO_MODEL;
for (var i = 0; i < 4; i++) {
var zm = null;
try { zm = m.getComponent('dataZoom', i); } catch (e) { break; }
if (!zm) break;
var g = function (k) { try { return zm.get(k); } catch (e) { return '读不到'; } };
out.push(' dz' + i + ' handleIcon=' + dash(g('handleIcon')) + '\\n moveHandleIcon=' + dash(g('moveHandleIcon')) +
' handleSize=' + JSON.stringify(g('handleSize')) + ' showDetail=' + JSON.stringify(g('showDetail')) +
' labelPrecision=' + JSON.stringify(g('labelPrecision')) + ' labelFormatter=' + JSON.stringify(g('labelFormatter')) +
'\\n backgroundColor=' + dash(g('backgroundColor')) + ' fillerColor=' + dash(g('fillerColor')) +
' borderColor=' + dash(g('borderColor')) + ' brushStyle=' + JSON.stringify(g('brushStyle')));
}
return out.join('\\n') || ' （没有 dataZoom 组件）';
}
// cursor 只活在 zrender 的显示列表里：SVG 串一个字符都不写（面板九 ⑦）
function cursorRow(chart) {
var out = [], by = {};
try {
var list = chart.getZr().storage.getDisplayList(true) || [];
out.push(' 显示列表图元=' + list.length + ' 个');
for (var i = 0; i < list.length; i++) {
var el = list[i], cur = el.cursor;
if (cur == null || cur === 'pointer') continue;
var lb = null;
try { lb = el.getBoundingRect(); } catch (e) { }
by[cur] = (by[cur] || 0) + 1;
if ((by[cur] || 0) <= 3) {
out.push(' cursor=' + cur + ' 类型=' + (el.type || el.constructor.name) +
(lb ? ' 局部=' + [r2(lb.x), r2(lb.y), r2(lb.width), r2(lb.height)].join(',') : ''));
}
}
} catch (e) { out.push(' 显示列表读不到：' + e.message); }
out.push(' 计数=' + JSON.stringify(by));
out.push(' ⇒ 对照源码：手柄 cursor=getCursor(orient)（SliderZoomView.js:860，横 ew-resize / 竖 ns-resize）、'
+ '拖动条 cursor:"grab"(:527)、拖动中改 "grabbing"(:686)、点击面板 "crosshair"(:247)。');
out.push(' ⇒ inside 那两根：roams.js:156-157 先声明成 undefined，:169-170 用 retrieve2 逐根覆盖 ⇒ '
+ '同一根轴被多根 dataZoom 盖住时生效的是**最后声明**的那一根（:167-168 的注释原话）——跟 hostedBy 的「先来者称王」相反；'
+ '两根都不写时由 component/helper/RoamController.js:105-106 兜底成 grab / grabbing。');
out.push(' ⇒ 光标不落盘的机制：zrender/lib/Handler.js:95 只在鼠标移动那一刻把 hoveredTarget.cursor 交给 '
+ 'zrender/lib/dom/HandlerProxy.js:277，那句是 dom.style.cursor = … ⇒ 它改的是画布 DOM 的行内样式，'
+ 'SVG 串里没有鼠标，所以一个光标属性都写不进去。');
return out.join('\\n');
}
// 两层影子的落盘笔色：polyline / polygon 的 stroke 与 fill
function shadowColorRow(svg) {
var b = bodyOf(svg), out = [];
var re = /<(polyline|polygon) points="[^"]*"[^>]*/g, m;
while ((m = re.exec(b))) {
var a = attrOf(m[0]);
out.push(' ' + m[1] + ' stroke=' + dash(a.stroke) + ' fill=' + dash(a.fill) +
' width=' + dash(a['stroke-width']) + ' opacity=' + dash(a['fill-opacity']));
}
return ' 影子笔色（默认：未选层线 #a1aed9 / 0.5、面 #c0c9e6；选中层线 #8292cc）\\n' +
(out.length ? out.join('\\n') : ' （一条影子都不画）');
}

function initPanel9() {
var p = makePanel('p9');
var firstSvg = '';
/** @type {any[][]} */
var V = [
['① 默认：两手柄 + 拖动条 + 两层影子', baseOpt()],
['② handleIcon:"circle"', dzOpt([slider(25, 75, { handleIcon: 'circle' })])],
['③ handleIcon 自绘一条 path', dzOpt([slider(25, 75, {
handleIcon: 'path://M0,0 L2,0 L2,2 L0,2 Z',
handleStyle: { color: '#ffde99', borderColor: '#d29906', borderWidth: 1 }
})])],
['④ fillerColor / borderColor / backgroundColor 三件套', dzOpt([slider(25, 75, {
fillerColor: 'rgba(0,120,255,0.35)', borderColor: '#ff0000', backgroundColor: '#eeeeee'
})])],
['⑤ handleSize 十档扫描', baseOpt()],
['⑥ showDetail + labelPrecision + labelFormatter ⇒ 逐字不变', dzOpt([slider(25, 75, {
showDetail: true, labelPrecision: 2, labelFormatter: '{value}'
})])],
['⑦ cursor 族（浏览器里才读得到）', dzOpt([slider(25, 75, {
brushSelect: true, handleIcon: 'rect'
})])],
['⑧ dataBackground / selectedDataBackground 两层线色', dzOpt([slider(25, 75, {
dataBackground: { lineStyle: { color: '#ff0000', width: 3 }, areaStyle: { color: 'rgba(0,255,0,0.5)' } },
selectedDataBackground: { lineStyle: { color: '#0000ff' }, areaStyle: { color: '#ffff00' } }
})])]
];
function std(svg, c) {
return [sliderPartsRow(svg), geometryRow(svg), shadowColorRow(svg), handleStyleRow(c), dzRow(c, 0)];
}
for (var i = 0; i < V.length; i++) {
(function (idx) {
bind('b9' + String.fromCharCode(97 + idx), function () {
if (idx === 4) { // ⑤ 十档扫描
p.run(V[idx][0], baseOpt(), function () {
var out = [' 定律一：落盘 matrix 的缩放分量 = 手柄高 ÷ 2；手柄高 = handleSize 的数，百分数按轨道厚 30 折算',
' 定律二：手柄那一条的沿轴 x（138.8 / 286.8）一动不动，改的只是垂直于轨道的方向；'
+ '中心 y = 轨道下沿 244.5 +（手柄高 ÷ 2 − 15）',
' 手柄图标自己的盒子是 2×2，所以屏幕上高 = 2 × 缩放分量'], hs = [undefined, 10, 15, 18, 30, '50%', '100%', '120%', 60, 120];
var inst = echarts.init(null, null, { renderer: 'svg', ssr: true, width: 400, height: 260 });
try {
for (var k = 0; k < hs.length; k++) {
var hk = /** @type {any} */ (hs[k]);
inst.setOption(/** @type {any} */(dzOpt([slider(25, 75, hk === undefined ? {} : { handleSize: hk })])), true);
var h = handleShapes(svgOf(inst));
var want = typeof hk === 'number' ? hk
: hk === undefined ? 30 : 30 * parseFloat(hk) / 100;
out.push(' handleSize=' + JSON.stringify(hk) + ' 缩放=' + (h.length ? JSON.stringify(h.map(function (q) { return q.缩放; })) : '（读不到）') +
' 屏幕y=' + (h.length ? h.map(function (q) { return (q.位置[1] – q.缩放 * 2) + '..' + q.位置[1]; }).join(' | ') : '-') +
' 沿轴x=' + (h.length ? JSON.stringify(h.map(function (q) { return q.位置[0]; })) : '-') +
' 手算高=' + fr(want) + ' ' + (h.length && Math.abs(2 * h[0].缩放 – want) < 1e-9 ? '✓' : '✗') +
' 手算中心y=' + fr(229.5 + want / 2) + ' ' + (h.length && Math.abs(h[0].位置[1] – (229.5 + want / 2)) < 1e-9 ? '✓' : '✗') +
' 字节=' + svgOf(inst).length);
}
out.push(' ⇒ 120 那一档：手柄从 169.5 画到 289.5，画布只有 260 高 ⇒ 越过下沿，屏幕上被切掉');
} catch (e) { out.push(' ⇒ 扫描抛错：' + e.message); }
finally { try { inst.dispose(); } catch (e2) { } }
return out;
});
return;
}
if (idx === 5) { // ⑥ 与①逐字比
p.runMany([
{ label: '⑥-a 基准（不写这三键）', o: baseOpt(), build: function (svg) { firstSvg = svg; return [' 已存下基准串，长度=' + svg.length]; } },
{
label: '⑥-b showDetail:true + labelPrecision:2 + labelFormatter:"{value}"', o: V[5][1],
build: function (svg) {
var same1 = bare(svg) === bare(firstSvg), same2 = bare2(svg) === bare2(firstSvg);
var out = [' 只剥类名 zrN-cls-K ⇒ ' + (same1 ? '逐字相同' : '仍不同') +
'；再把每渲染重编的裁剪板 id zrN-cK 一起归零 ⇒ ' + (same2 ? '逐字相同 ⇒ 这三键在静态图里一个字节都不改' : '仍不同 ⇒ 下面这行指出差在哪'),
' 原始字节差=' + (svg.length – firstSvg.length) + (svg.length === firstSvg.length
? '（连长度都没变 ⇒ 「仍不同」只是 zr0/zr1 这种序号换了一轮）'
: '（正的是后一本长 ⇒ 长出来的只是 id 序号的位数）')];
if (!same2) {
var a = bare2(svg), b = bare2(firstSvg), k = 0;
while (k < Math.min(a.length, b.length) && a.charAt(k) === b.charAt(k)) { k++; }
out.push(' 第一处不同 @' + k + '：本档 ' + JSON.stringify(a.slice(k, k + 60)) +
' / 基准 ' + JSON.stringify(b.slice(k, k + 60)));
}
out.push(' ⇒ 数字那两只 Text 建出来就带 invisible:!handleLabelShow（SliderZoomView.js:473-477），'
+ '而默认只有 emphasis.handleLabel.show 为真（SliderZoomModel.js:117-120）；'
+ '_showDataInfo(:667-676) 判 toShow = 悬停或拖动中 ? emphasisShow : normalShow，'
+ '静态图里两样都没发生 ⇒ 一直 invisible ⇒ 改了等于没改');
out.push(shadowRow(svg));
return out;
}
}
]);
return;
}
if (idx === 6) { // ⑦ cursor
p.run(V[idx][0], V[idx][1], function (svg, c) {
var css = (svg.match(/<style[^>]*>([\\s\\S]*?)<\\/style>/) || ['', ''])[1];
var total = (svg.match(/cursor/g) || []).length, inCss = (css.match(/cursor/g) || []).length;
var vals = [], rx = /cursor:([^;}]+)/g, m2;
while ((m2 = rx.exec(css))) { vals.push(m2[1].trim()); }
return [cursorRow(p.chart),
' 串里 cursor 字样=' + total + ' 次：其中 <style> 块里 ' + inCss + ' 次、块外 ' + (total – inCss) + ' 次'
+ '（块外必须是 0 ⇒ 图元身上一个光标属性都不写）',
' <style> 里的光标的值=' + JSON.stringify(vals) +
' ⇒ 全是 :hover 选中层的 cursor:pointer（zrender/lib/svg/cssEmphasis.js:35-37），'
+ '跟滑块的 grab / ew-resize / crosshair 没有一个是同一处写的',
handleStyleRow(c)];
});
return;
}
p.run(V[idx][0], V[idx][1], std);
});
})(i);
}
p.run(V[0][0], V[0][1], std);
}

/* ===== 面板十：缩略图（dataShadow）的四条定律与一处抛错（第十六节） ===== */

function seqData(n) { var a = []; for (var i = 0; i < n; i++) a.push(10 + 40 * Math.abs(Math.sin(i * 0.37))); return a; }
function catNames(n) { var a = []; for (var i = 0; i < n; i++) a.push('d' + i); return a; }
function shadowOpt(n, dz) {
return /** @type {any} */({
animation: false,
xAxis: { type: 'category', data: catNames(n) }, yAxis: {},
series: [{ type: 'line', data: seqData(n), showSymbol: false }],
dataZoom: [mix({ type: 'slider', xAxisIndex: 0, start: 0, end: 100 }, dz || {})]
});
}
// 一批 option 各自渲染一次，交给同一个读数函数——比在同一个容器里连按四次更不容易看错
function ssrSweep(cases, mkOpt, read, w, h) {
var out = [], inst = echarts.init(null, null, {
renderer: 'svg', ssr: true, width: w || 400, height: h || 260
});
try {
for (var i = 0; i < cases.length; i++) {
inst.setOption(/** @type {any} */(mkOpt(cases[i])), true);
out = out.concat(flat(read(cases[i], svgOf(inst), i)));
}
} catch (e) { out.push(' ⇒ 扫描抛错：' + e.message); }
finally { try { inst.dispose(); } catch (e2) { } }
return out;
}

function initPanel10() {
var p = makePanel('p10');
/** @type {any[][]} */
var V = [
['① 12 个类目（顶点 12）', baseOpt()],
['② 1096 天（stride=4 ⇒ 保留 274 个下标，落盘 275 个顶点）', dailyOpt([{ type: 'slider', xAxisIndex: 0, start: 0, end: 100 }])],
['③ 149 / 150 天', baseOpt()],
['④ 449 / 450 / 451 天', baseOpt()],
['⑤ 影子吃不吃窗口？三档 + 四种 filterMode', baseOpt()],
['⑥ 缺失日窗口：断口补 0', baseOpt()],
['⑦ 容器宽 200/400/600/800', baseOpt()],
['⑧ 白名单：11 种系列谁有影子，再强制 showDataShadow:true 反证', baseOpt()],
['⑨ themeRiver：先归因抛错，再看 singleAxis 下挂 slider', /** @type {any} */({
animation: false,
singleAxis: { type: 'category' },
series: [{ type: 'themeRiver', data: [[0, 'a', 12], [1, 'a', 31], [2, 'b', 22], [3, 'a', 40]] }],
dataZoom: [{ type: 'slider', start: 0, end: 100 }]
})]
];
function strideRead(c, svg) {
var s = shadowShape(svg), stride = Math.round(c / 300);
var pred = stride > 0 ? Math.ceil(c / stride) : c;
return [' n=' + c + ' stride=Math.round(' + c + '/300)=' + stride + ' 预测顶点=' + pred +
' 实测=' + s.顶点 + ' ' + (pred === s.顶点 ? '✓' : '✗') + ' 步长=' + fr(s.步长) +
' y上下=' + frs(s.y) + ' 末点=' + JSON.stringify(s.末点) + ' 字节=' + svg.length];
}
for (var i = 0; i < V.length; i++) {
(function (idx) {
bind('b10' + String.fromCharCode(97 + idx), function () {
if (idx === 1) {
p.run(V[idx][0], V[idx][1], function (svg, c) {
var sv = shadowShape(svg), n = DAILY.length, stride = Math.round(n / 300);
var kept = 0, nullKept = [];
for (var k = 0; k < n; k += stride) { kept++; if (DAILY[k].sales == null) { nullKept.push(k); } }
var allNull = [];
for (var m = 0; m < n; m++) { if (DAILY[m].sales == null) { allNull.push(m); } }
var want = kept – nullKept.length + 2 * nullKept.length;
return [shadowRow(svg),
' 抽稀账：n=' + n + '，影子宽（=轨道长）=300 ⇒ stride=Math.round(' + n + '/300)=' + stride +
' ⇒ 只留 k % ' + stride + ' === 0 的下标，共 ' + kept + ' 个',
' 全表 sales 为 null 的下标=' + JSON.stringify(allNull) + '，其中落在保留下标里的=' +
JSON.stringify(nullKept) + '（另 ' + (allNull.length – nullKept.length) +
' 个正好被抽稀跳过了，一次断口都不触发）',
' ⇒ 顶点 = 保留 ' + kept + ' − 空值不写真点 ' + nullKept.length + ' + 每处断口进出各补一个 0 点 '
+ 2 * nullKept.length + ' = ' + want + '，实测 ' + sv.顶点 + (want === sv.顶点 ? ' ✓' : ' ✗'),
' 落在 0 线上的 x=' + JSON.stringify(sv.零值点) + '（就是下标 804 那一处断口的两侧；'
+ '跳过的行也照加 step，所以补点仍落在 804 前后各一格的间距上）',
geometryRow(svg), dzRow(c, 0)];
});
return;
}
if (idx === 2) {
p.run(V[idx][0], baseOpt(), function () {
return [' 定律一：stride = Math.round(条数 ÷ 影子宽px)，跳过条件是 index % stride（SliderZoomView.js:290-293）',
' ⇒ stride 为 0 与 1 都不跳点：149 天 stride 0、150 天 stride 1，两档顶点数都等于天数本身']
.concat(ssrSweep([148, 149, 150, 151, 299, 300], function (n) { return shadowOpt(n); }, strideRead));
});
return;
}
if (idx === 3) {
p.run(V[idx][0], baseOpt(), function () {
return [' 真正的分界在 stride 从 1 涨到 2 的那一档：n=450（Math.round(450/300)=2）']
.concat(ssrSweep([400, 449, 450, 451, 601, 900, 1096], function (n) { return shadowOpt(n); }, strideRead));
});
return;
}
if (idx === 4) {
p.run(V[idx][0], baseOpt(), function () {
var out = [' 定律三：影子恒用全量。三档窗口的 <polyline points> 应当逐字符相同'], last = '';
out = out.concat(ssrSweep([[0, 100], [25, 75], [50, 100]], function (we) {
return shadowOpt(12, { start: we[0], end: we[1] });
}, function (we, svg) {
var s = shadowShape(svg), same = (last === s.points);
var r = [' ' + we[0] + '~' + we[1] + ' 顶点=' + s.顶点 + ' 首点=' + JSON.stringify(s.首点) +
' 末点=' + JSON.stringify(s.末点) + (last ? ' 与上一档' + (same ? '逐字相同 ✓' : '不同 ✗') : '')];
last = s.points;
return r;
}));
out.push(' filterMode 四种各试（每种的三档相同判定）');
var modes = ['filter', 'weakFilter', 'empty', 'none'];
for (var k = 0; k < modes.length; k++) {
(function (fm) {
var ps = [];
ssrSweep([[0, 100], [25, 75], [50, 100]], function (we) {
return shadowOpt(12, { start: we[0], end: we[1], filterMode: fm });
}, function (we, svg) { ps.push((shadowShape(svg).points || '').slice(0, 60)); });
out.push(' filterMode=' + fm + ' 三档' + (ps[0] === ps[1] && ps[1] === ps[2] ? '相同 ✓' : '不同 ✗') +
'（画面上条数照样被裁，只是影子不裁）');
})(modes[k]);
}
return out;
});
return;
}
if (idx === 5) {
p.run(V[idx][0], baseOpt(), function () {
var miss = { '2025-03-14': 1, '2025-03-15': 1, '2025-07-22': 1, '2025-11-03': 1 };
var centers = [933, 803, 1037];
return [' 定律四：空值按 0 落底，且只在「进断口 / 出断口」各补一个点（:305-310）']
.concat(ssrSweep(centers, function (ct) {
var rows = DAILY.slice(ct – 6, ct + 7);
return /** @type {any} */({
animation: false,
xAxis: { type: 'category', data: rows.map(function (r) { return r.date; }) }, yAxis: {},
series: [{
type: 'line', showSymbol: false,
data: rows.map(function (r) { return miss[r.date] ? null : r.sales; })
}],
dataZoom: [{ type: 'slider', xAxisIndex: 0, start: 0, end: 100 }]
});
}, function (ct, svg) {
var s = shadowShape(svg), rows = DAILY.slice(ct – 6, ct + 7);
return ' 中心下标 ' + ct + ' 天数=' + rows.length +
' 缺的日=' + JSON.stringify(rows.filter(function (r) { return miss[r.date]; }).map(function (r) { return r.date; })) +
' 顶点=' + s.顶点 + ' 落 0 线的 x=' + JSON.stringify(s.零值点) + ' y上下=' + frs(s.y);
}))
.concat([' ⇒ 单缺一天 13→14 顶点；连缺两天仍 13 顶点（中间那段不补）']);
});
return;
}
if (idx === 6) {
p.run(V[idx][0], baseOpt(), function () {
var widths = [200, 400, 600, 800], out = [
' 分母 = 影子宽 = 轨道长，所以它随容器宽度搬：同一份 1000 条数据，四种宽度各起一个 ssr 实例'], bad = 0;
for (var k = 0; k < widths.length; k++) {
var inst = echarts.init(null, null, { renderer: 'svg', ssr: true, width: widths[k], height: 260 });
try {
inst.setOption(/** @type {any} */(shadowOpt(1000)), true);
var s = shadowShape(svgOf(inst));
var span = s.末点 && s.首点 ? +(s.末点[0] – s.首点[0]).toFixed(2) : null;
var st = Math.round(1000 / span), want = Math.ceil(1000 / st);
if (want !== s.顶点) bad++;
out.push(' 容器宽=' + widths[k] + ' 顶点=' + s.顶点 + ' 步长=' + fr(s.步长) +
' x跨度=' + fr(span) + ' 反算stride=' + (s.顶点 ? Math.round(1000 / s.顶点) : '?') +
' 手算stride=Math.round(1000/' + fr(span) + ')=' + st +
' 手算顶点=Math.ceil(1000/' + st + ')=' + want + (want === s.顶点 ? ' ✓' : ' ✗'));
} catch (e) { out.push(' 宽=' + widths[k] + ' 抛错：' + e.message); }
finally { try { inst.dispose(); } catch (e2) { } }
}
return out.concat([' ⇒ 顶点数 = ceil(条数 ÷ stride)，stride 又由影子宽（=轨道长）定 ⇒ '
+ bad + ' 档与手算顶点不符；宽 600 与 800 都是 stride 2，因为 Math.round(1000/449.5)=Math.round(1000/599.4)=2 ⇒ 影子稀到一定程度就不再变稀']);
});
return;
}
if (idx === 7) {
var mk = function (t) {
var o = {
animation: false,
xAxis: { type: 'category', data: CAT12.slice() }, yAxis: {},
series: null,
dataZoom: [{ type: 'slider', xAxisIndex: 0, start: 25, end: 75 }]
};
var d = A12.slice();
switch (t) {
case 'line': o.series = [{ type: 'line', data: d, showSymbol: false }]; break;
case 'bar': o.series = [{ type: 'bar', data: d }]; break;
case 'scatter': o.series = [{ type: 'scatter', data: d.map(function (v, k) { return [k, v]; }) }]; break;
case 'effectScatter': o.series = [{ type: 'effectScatter', data: d.map(function (v, k) { return [k, v]; }) }]; break;
case 'candlestick': o.series = [{ type: 'candlestick', data: d.map(function (v) { return [v, v + 2, v – 3, v + 4]; }) }]; break;
case 'boxplot': o.series = [{ type: 'boxplot', data: d.map(function (v) { return [v – 2, v – 1, v, v + 1, v + 2]; }) }]; break;
case 'custom': o.series = [{
type: 'custom', renderItem: function () { return { type: 'rect', shape: { x: 0, y: 0, width: 4, height: 4 } }; },
data: d
}]; break;
case 'area': o.series = [{ type: 'line', data: d, areaStyle: {} }]; break;
case 'pie': o.xAxis = undefined; o.yAxis = undefined;
o.series = [{ type: 'pie', radius: '60%', data: d.map(function (v, k) { return { name: 'n' + k, value: v }; }) }]; break;
case 'graph': o.xAxis = undefined; o.yAxis = undefined;
o.series = [{
type: 'graph', layout: 'none',
data: [{ x: 1, y: 1, name: 'a' }, { x: 2, y: 2, name: 'b' }], links: [{ source: 0, target: 1 }]
}]; break;
case 'heatmap': o.yAxis = { type: 'category', data: ['x', 'y', 'z'] };
o.series = [{ type: 'heatmap', data: d.map(function (v, k) { return [k, k % 3, v]; }) }]; break;
default: o.series = [{ type: 'line', data: d, showSymbol: false }];
}
return /** @type {any} */(o);
};
p.run(V[idx][0], baseOpt(), function () {
var TYPES = ['line', 'bar', 'scatter', 'effectScatter', 'candlestick', 'boxplot',
'custom', 'area', 'pie', 'graph', 'heatmap'], zero = [], noAxis = [];
var rows = ssrSweep(TYPES, mk, function (t, svg) {
var sh = shadowShape(svg), tr = rectShapes(svg).length, pg = countTag(svg, 'polygon');
if (!tr) { noAxis.push(t); } else if (!pg) { zero.push(t); }
return ' ' + t + '：轨道块=' + tr + ' polygon(影子面)=' + pg +
' polyline=' + countTag(svg, 'polyline') + ' 首条 polyline 顶点=' + (sh.顶点 || 0) +
' 字节=' + svg.length +
(tr ? '' : '（轨道块=0 ⇒ 滑块整条没画，这一档不能当白名单证据）');
});
var force = ssrSweep(zero, function (t) {
var o = mk(t);
o.dataZoom = [{ type: 'slider', xAxisIndex: 0, start: 25, end: 75, showDataShadow: true }];
return o;
}, function (t, svg) {
var sh = shadowShape(svg);
return ' 强制 true ⇒ ' + t + '：轨道块=' + rectShapes(svg).length +
' polygon(影子面)=' + countTag(svg, 'polygon') + ' polyline=' + countTag(svg, 'polyline') +
' 影子顶点=' + (sh.顶点 || 0) + ' 字节=' + svg.length;
});
return [' 名单写死在 SliderZoomView.js:68 SHOW_DATA_SHADOW_SERIES_TYPE=[line,bar,candlestick,scatter]；'
+ 'showDataShadow 默认 auto ⇒ 名单外一律没影子。',
' 判定看两列：轨道块（滑块画没画，画了是 3 个 path：轨道底 + 点击面板 + 选中段；'
+ '真正画边框的那条内缩了半像素，这条正则不数它，面板九 ① 逐条点过名）与 polygon（影子的面，'
+ '有影子是 3 层：未选左段 + 选中段 + 未选右段，每段一面一线（:331-351 建一对、:354-358 建三段）⇒ polygon=3 配 polyline=3；'
+ '系列自己那一折落盘是 path，不占 polyline。'
+ '首条 polyline 的顶点数不可靠——饼图的引导线也是 polyline。',
' 同一份数据（12 类目 + 12 个数）、同一个窗口 25~75，只换系列：']
.concat(rows)
.concat([' ⇒ 轨道块=0 的是 ' + JSON.stringify(noAxis) +
'：这两个 option 里没有坐标轴（mk 里把 xAxis/yAxis 置了 undefined），'
+ 'dataZoom 一根轴也认领不到（探针读 eachTargetAxis 得 []），于是 SliderZoomView 整个不渲染——'
+ '它们「没影子」是因为根本没有滑块，不是因为白名单。',
' 滑块画了而 polygon=0 的是 ' + JSON.stringify(zero) + '：轨道块在，只是系列不在名单里。'
+ '（custom 那档轨道块=9 是这条正则把 renderItem 画的 4×4 方块也数了进去：12 行被 filterMode '
+ '裁到 6 行 ⇒ 3 个轨道块 + 6 个方块，第十二节那本账）',
' ⇒ 把 showDataShadow 从 auto 改成 true，:375 那句白名单判定就被绕过：'])
.concat(force);
});
return;
}
if (idx === 8) {
p.run(V[idx][0], V[idx][1], function (svg, c) {
var out = [shadowRow(svg), geometryRow(svg), dzRow(c, 0)];
var RIVER = [[0, 'a', 12], [1, 'a', 31], [2, 'b', 22], [3, 'a', 40]];
var CASES = [
['themeRiver + singleAxis + slider', true, true],
['themeRiver + singleAxis，一根 dz 都不写', true, false],
['themeRiver 无 singleAxis，也不写 dz', false, false],
['themeRiver 无 singleAxis + slider(xAxisIndex:0)', false, true]
];
out.push(' 归因四档（每档另起一个 ssr 实例，只看抛不抛）：');
for (var k = 0; k < CASES.length; k++) {
var inst = echarts.init(null, null, { renderer: 'svg', ssr: true, width: 400, height: 260 });
var o = /** @type {any} */({ animation: false, series: [{ type: 'themeRiver', data: RIVER }] });
if (CASES[k][1]) { o.singleAxis = { type: 'category' }; }
if (CASES[k][2]) {
o.dataZoom = CASES[k][1] ? [{ type: 'slider', start: 0, end: 100 }]
: [{ type: 'slider', xAxisIndex: 0, start: 0, end: 100 }];
}
try {
inst.setOption(o, true);
var s2 = svgOf(inst), sh2 = shadowShape(s2);
out.push(' ' + CASES[k][0] + ' ⇒ 没抛 字节=' + s2.length + ' polyline=' +
countTag(s2, 'polyline') + ' 影子顶点=' + (sh2.顶点 || 0));
} catch (e) {
out.push(' ' + CASES[k][0] + ' ⇒ 抛：' + e.message);
} finally { try { inst.dispose(); } catch (e2) { } }
}
out.push(' ⇒ 抛的是 themeRiver 自己的 getInitialData（它要 singleAxis），把 dataZoom 整条删掉照样抛 ⇒ 与缩放无关；');
out.push(' 配上 singleAxis 之后挂 slider 完全正常，只是仍没影子——名单里没有它（:68），影子顶点=0。');
out.push(' 上面 dzRow 里那行 值=[NaN, NaN] 不是缩放坏了，是"读数器把 null 印成了 NaN"：');
[['不写 data', null], ['data=[0,1,2,3]', [0, 1, 2, 3]], ['data=["a","b","c","d"]', ['a', 'b', 'c', 'd']]]
.forEach(function (one) {
var it = echarts.init(null, null, { renderer: 'svg', ssr: true, width: 400, height: 260 });
var sa = /** @type {any} */({ type: 'category' });
if (one[1]) { sa.data = one[1]; }
try {
it.setOption(/** @type {any} */({
animation: false, singleAxis: sa,
series: [{ type: 'themeRiver', data: RIVER }],
dataZoom: [{ type: 'slider', singleAxisIndex: 0, start: 25, end: 75 }]
}), true);
var am = /** @type {any} */ (it).getModel().getComponent('singleAxis', 0);
var px = /** @type {any} */ (it).getModel().getComponent('dataZoom', 0).getAxisProxy('single', 0);
var sv = svgOf(it);
out.push(' singleAxis ' + one[0] + ' ⇒ scale.getExtent()=' + JSON.stringify(am.axis.scale.getExtent()) +
' proxy.getWindow 百分比=' + JSON.stringify(px.getWindow().percent) +
' 值=' + JSON.stringify(px.getWindow().value) +
' 字节=' + sv.length + ' polyline=' + countTag(sv, 'polyline'));
} catch (e) { out.push(' singleAxis ' + one[0] + ' ⇒ 抛：' + e.message); }
finally { try { it.dispose(); } catch (e3) { } }
});
out.push(' ⇒ 轴上没有 data 时 ordinal 轴的 scale.getExtent() 本身就是 [null,null]，'
+ '窗口值只能跟着是 null（黄框按老规矩把 null 印成 NaN）；百分比那一栏 [25,75] 一直是好的。'
+ '给轴补上 data，值窗立刻变真数，且 startValue/endValue 写的就是这份 data 的下标。');
return out;
});
return;
}
p.run(V[idx][0], V[idx][1], function (svg, c) {
return [shadowRow(svg), geometryRow(svg), dzRow(c, 0)];
});
});
})(i);
}
p.run(V[0][0], V[0][1], function (svg, c) { return [shadowRow(svg), shadowColorRow(svg), dzRow(c, 0)]; });
}

/* ===== 面板十一：多根轴、多根滑块（第十七节：先来者称王，事件计数在面板十二 ⑥） ===== */

function twoAxisOpt(dz, grids, extra) {
var two = !!grids; // 真 ⇒ 两块 grid 各挂一轴；假 ⇒ 一块 grid 里叠两条 x 轴（第二条压到 top）
var o = /** @type {any} */({
animation: false,
grid: two ? [{ left: 60, right: 20, top: 40, height: 70 }, { left: 60, right: 20, top: 130, height: 70 }]
: [{ left: 60, right: 20, top: 65, bottom: 80 }],
xAxis: [{ type: 'category', data: CAT12.slice() },
{ type: 'category', data: CAT12.slice(), gridIndex: two ? 1 : 0, position: two ? 'bottom' : 'top' }],
yAxis: two ? [{}, { gridIndex: 1 }] : [{}],
series: [{ type: 'line', data: A12.slice(), showSymbol: false },
{ type: 'line', data: A12.slice(), showSymbol: false, xAxisIndex: two ? 1 : 0, yAxisIndex: two ? 1 : 0 }],
dataZoom: dz
});
return mix(o, extra || {});
}
function dzListModel(c) {
var m = modelOf(c), out = [];
if (!m) return ' 组件清单 = ' + NO_MODEL;
var all = [];
try {
m.eachComponent('dataZoom', function (zm) { all.push(zm); });
} catch (e) { return ' 组件清单读不到：' + e.message; }
for (var i = 0; i < all.length; i++) {
var t = [];
try { all[i].eachTargetAxis(function (dim, idx) { t.push(dim + idx); }); } catch (e) { }
out.push(' [' + i + '] id=' + JSON.stringify(all[i].id) + ' type=' + all[i].subType +
' targets=' + JSON.stringify(t) + ' $fromToolbox=' + JSON.stringify(all[i].option.$fromToolbox == null ? null : all[i].option.$fromToolbox) +
' 回读窗（option 那份，processor 刷过）=' + JSON.stringify([all[i].option.start, all[i].option.end, all[i].option.startValue, all[i].option.endValue]));
}
return ' dataZoom 组件清单（' + all.length + ' 根，顺序就是声明顺序）\\n' + (out.join('\\n') || ' （0 根）');
}

function initPanel11() {
var p = makePanel('p11');
var SL = slider(25, 75), IN = inside(60, 100);
/** @type {any[][]} */
var V = [
['① 双 x 轴共用一个 grid + 一根 dz', twoAxisOpt([{ type: 'slider', xAxisIndex: 0, start: 25, end: 75 }], false)],
['② 两根独立 grid，一根 dz 管两轴', twoAxisOpt([{ type: 'slider', xAxisIndex: [0, 1], start: 25, end: 75 }], true)],
['③ xAxisIndex:"all"（与 ② 等价）', twoAxisOpt([{ type: 'slider', xAxisIndex: 'all', start: 25, end: 75 }], true)],
['④ xAxisIndex:[] 空数组（合法的死键）', twoAxisOpt([{ type: 'slider', xAxisIndex: [], start: 25, end: 75 }], true)],
['⑤ 同轴两根：slider 在前', twoAxisOpt([
{ type: 'slider', xAxisIndex: 0, start: 25, end: 75 },
{ type: 'inside', xAxisIndex: 0, start: 60, end: 100 }
], false)],
['⑥ 同轴两根：inside 在前', twoAxisOpt([
{ type: 'inside', xAxisIndex: 0, start: 60, end: 100 },
{ type: 'slider', xAxisIndex: 0, start: 25, end: 75 }
], false)],
['⑦ x 与 y 同时交给一根 dz', dzOpt([mix({ type: 'slider', xAxisIndex: 0, yAxisIndex: 0, start: 25, end: 75 }, {})],
{ yAxis: { type: 'value' } })],
['⑧ dispatchAction 的 batch 一次动两根', twoAxisOpt([
{ type: 'slider', xAxisIndex: 0, start: 25, end: 75 },
{ type: 'slider', xAxisIndex: 1, start: 10, end: 40 }
], true)],
['⑨ 给 ⑤ 的后来者发动作（dataZoomIndex:1）', twoAxisOpt([
{ type: 'slider', xAxisIndex: 0, start: 25, end: 75 },
{ type: 'inside', xAxisIndex: 0, start: 60, end: 100 }
], false)]
];
function both(svg, c) {
return [dzListModel(c), dzRow(c, 0), dzCount(c) > 1 ? dzRow(c, 1) : ' dz1 =（只有一根）',
axisRow(c, 'x', 0), axisRow(c, 'x', 1), gridRow(c), countRow(c)];
}
for (var i = 0; i < V.length; i++) {
(function (idx) {
bind('b11' + String.fromCharCode(97 + idx), function () {
if (idx === 6) {
p.run(V[idx][0], V[idx][1], function (svg, c) {
return both(svg, c).concat([axisRow(c, 'y', 0),
' ⇒ 两根轴共用这一根 dz，但 proxy 是按轴建的：x 窗与 y 窗各算各的，'
+ '用的是同一对百分比（DataZoomModel.js:343-348 取的是这根 dz 自己的 start/end）']);
});
return;
}
if (idx === 7) {
var H = [];
p.runMany([{
label: V[idx][0], o: V[idx][1], build: both,
act: function (chart, reader, arr) {
H.length = 0;
try { reader.on('datazoom', function () { H.push('hit'); }); } catch (e0) { }
try {
reader.dispatchAction({
type: 'dataZoom',
batch: [{ dataZoomIndex: 0, start: 0, end: 20 }, { dataZoomIndex: 1, start: 50, end: 70 }]
});
} catch (e) { arr.push(' ⇒ batch 动作抛错：' + e.message); }
try { reader.off('datazoom'); } catch (e2) { }
try { chart.off('datazoom'); } catch (e3) { }
try {
chart.dispatchAction({
type: 'dataZoom',
batch: [{ dataZoomIndex: 0, start: 0, end: 20 }, { dataZoomIndex: 1, start: 50, end: 70 }]
});
} catch (e4) { }
arr.push(' ⇒ 一次 batch 两个元素：动作处理器按元素各跑一遍（echarts.js:1496-1505 把 batch 摊平成 payloads），'
+ '但事件只发一个、e.batch 是长度 2 的数组（:1560-1565）');
},
after: function (svg, c) {
return [' 事件命中=' + H.length + ' 次（e.batch 长度见探针 D25），可两端的窗口确实都动了：看下面 dz0/dz1 两条 settledOption',
dzRow(c, 0), dzRow(c, 1), axisRow(c, 'x', 0), axisRow(c, 'x', 1)];
}
}]);
return;
}
if (idx === 8) {
p.runMany([{
label: V[idx][0], o: V[idx][1], build: both,
act: function (chart, reader, arr) {
try {
reader.dispatchAction({ type: 'dataZoom', dataZoomIndex: 1, start: 5, end: 15 });
arr.push(' ⇒ 已给 dataZoomIndex:1（那根 inside，声明在后）发窗口 5~15');
} catch (e) { arr.push(' ⇒ 动作抛错：' + e.message); }
try { chart.dispatchAction({ type: 'dataZoom', dataZoomIndex: 1, start: 5, end: 15 }); } catch (e2) { }
},
after: function (svg, c) {
return [dzRow(c, 0), dzRow(c, 1), axisRow(c, 'x', 0),
' ⇒ 给后来者发动作，照样改得动轴：findEffectedDataZooms 会顺着「同轴即联动」把同一条轴上的组件全刷一遍'
+ '（helper.js:93-105），而窗口的算法只认主人（AxisProxy.js:253 早退、:271 读主人的 settledOption）'];
}
}]);
return;
}
p.run(V[idx][0], V[idx][1], both);
});
})(i);
}
p.run(V[4][0], V[4][1], both);
}