R524809
422 lines
17 KiB
JavaScript
422 lines
17 KiB
JavaScript
import {
|
||
PALETTE, FONT, FINANCIAL_COLORS, axisCommon, titleStyle, standardLegend,
|
||
lineSeries, footnote, watermarks, LAYOUT, tooltipOf,
|
||
} from '../theme.js';
|
||
|
||
/**
|
||
* 甜蜜击球区 · 宁德时代（300750）—— 股价 ↔ 2026E 估值 的换算图表
|
||
*
|
||
* 上游底稿：资料库节点「宁德时代_股价PE对照表」
|
||
* https://www.workbuddy.cn/space/d/EsAWMaLKt4ECKPDvESKKvT（2026-09-15 版）
|
||
* 数据由 scripts/build_sweet_spot_catl.py 投影成 data/sweetspot/*.csv。
|
||
*
|
||
* 【口径】所有 PE 都是**静态预期 PE**：市值 ÷ 2026E 归母净利（悲观 900 / 中性 964 /
|
||
* 乐观 1,000 亿元，65 家机构一致预期）。扣现金 PE =（市值 − 净现金 2,263.8 亿元）÷
|
||
* 2026E 净利，即"只给主营电池业务定价"。股息率按 2023–2025 年实际分红率 50% 测算。
|
||
*
|
||
* 【甜蜜区框架】8x 白送 · 10x 甜点 · 12x 上沿 是巴菲特锚；资料库原表用的是五档
|
||
* 更宽的区域（按中性情景 PE 划分），因为它的分子是"含净现金的市值"。两套档位不要
|
||
* 混读：本文所有区域带一律用原表的五档，定义集中在 PE_ZONES，改档位只改这一处。
|
||
*
|
||
* 【图 1】股价 → PE 对照（PE 轴上的横向区域带）
|
||
* 【图 2】含现金 PE vs 扣现金 PE（沙色带 = 净现金的厚度）
|
||
* 【图 3】任意股价试算（股价轴上的纵向区域带 + 三年预期年化收益）
|
||
*
|
||
* 精度例外：PE 保留两位小数。项目默认一位，但"现价落在买入区还是合理区"取决于
|
||
* 15.18x 与 15.5x 这条边界，一位小数会把 15.18 读成 15.2、与 15.5 分不清。
|
||
*
|
||
* 硬编码说明：区域边界的**股价**不是写死的，而是从 CSV 的 pe_base 反解（peToPrice），
|
||
* 所以改股本或利润预期后纵向区域带会自动跟着走。本文只有两个手工常量：现价 NOW 与
|
||
* 净现金 NET_CASH（仅用于文案），都与 build_sweet_spot_catl.py 同源。
|
||
*/
|
||
|
||
/** 现价（2026-09-15 收盘）。与生成脚本同源，重跑脚本时要同步。 */
|
||
const NOW = 316.21;
|
||
|
||
/** 净现金（亿元）。仅用于图 2 的文案；沙色带的几何量取自 CSV 的 pe_base − pe_ex_cash。 */
|
||
const NET_CASH = 2263.8;
|
||
|
||
/** 2028E 目标价（1,400 亿 × 20x ÷ 46.27 亿股），图 3 的年化收益基准。 */
|
||
const TARGET_2028 = 605;
|
||
|
||
/**
|
||
* 五档估值区域（按中性情景 964 亿 PE 的上沿划分）。
|
||
* 原表把 15.5–25x 细分为「合理偏低」与「合理」两档、但共用同一个配色，
|
||
* 这里并为一条色带，避免在 PE 轴上叠出两块无差别的底色。
|
||
*/
|
||
const PE_ZONES = [
|
||
{ name: '击球区', upTo: 13, color: PALETTE.green, note: '<13x' },
|
||
{ name: '买入区', upTo: 15.5, color: PALETTE.blue, note: '13–15.5x' },
|
||
{ name: '合理', upTo: 25, color: PALETTE.orange, note: '15.5–25x' },
|
||
{ name: '偏贵', upTo: 30, color: PALETTE.red, note: '25–30x' },
|
||
{ name: '卖出区', upTo: Infinity, color: PALETTE.purple, note: '>30x' },
|
||
];
|
||
|
||
const PE_MIN = 8;
|
||
const PE_MAX = 38;
|
||
const PRICE_MIN = 200;
|
||
const PRICE_MAX = 720;
|
||
|
||
const SOURCE_NOTE = '数据来源：宁德时代 2026 中报（本地财报库）· 65 家机构 2026E 一致预期';
|
||
|
||
/** 十六进制转 rgba —— 区域带要低透明度叠在网格上，不能直接铺饱和色 */
|
||
function tint(hex, alpha) {
|
||
const value = parseInt(hex.slice(1), 16);
|
||
return `rgba(${(value >> 16) & 255},${(value >> 8) & 255},${value & 255},${alpha})`;
|
||
}
|
||
|
||
/** 取某价位的某个指标；缺失返回 NaN，让标签渲染成 NaN 而不是抛错 */
|
||
function metricAt(rows, price, key) {
|
||
const row = rows.find((item) => item.price === price);
|
||
return row ? row[key] : Number.NaN;
|
||
}
|
||
|
||
/** 数值轴（PE / 收益率共用），与 catl.js 的 valueAxis 同一套样式 */
|
||
const valueAxis = (name, extra = {}) => ({
|
||
...axisCommon,
|
||
type: 'value',
|
||
name,
|
||
nameLocation: 'middle',
|
||
nameGap: 56,
|
||
nameTextStyle: { color: PALETTE.grey, fontSize: 13, fontFamily: FONT },
|
||
...extra,
|
||
});
|
||
|
||
/**
|
||
* 股价轴：数值轴。
|
||
* 不画竖向网格（规范只保留浅色横线）—— 图 3 的纵向区域带本身就是参考线，
|
||
* 图 1、图 2 靠「现价」竖线定位。
|
||
*/
|
||
const priceAxis = (extra = {}) => ({
|
||
...axisCommon,
|
||
type: 'value',
|
||
name: '股价（元）',
|
||
nameLocation: 'middle',
|
||
nameGap: 34,
|
||
min: PRICE_MIN,
|
||
max: PRICE_MAX,
|
||
axisLine: { show: true, lineStyle: { color: PALETTE.axisLine } },
|
||
splitLine: { show: false },
|
||
...extra,
|
||
});
|
||
|
||
const GRID = { left: 78, right: 78, top: LAYOUT.gridTop, bottom: 80 };
|
||
|
||
function baseOption({
|
||
title, subtitle, xAxis, yAxis, series, legend, width, height,
|
||
tooltipFormatter, extraNote, sourceNote, grid, extraGraphics = [],
|
||
}) {
|
||
const notes = [sourceNote ?? SOURCE_NOTE];
|
||
if (extraNote) notes.push(extraNote);
|
||
return {
|
||
backgroundColor: '#fff',
|
||
title: { ...titleStyle, text: title, subtext: subtitle },
|
||
legend: standardLegend(legend, { itemGap: 22 }),
|
||
// 三行脚注（来源 + 两行口径）会顶到 height-66，而横轴刻度底边在 height-52。
|
||
// 本项目这几张图的横轴带轴名（「股价（元）」），它比刻度再低约 32px；实测
|
||
// grid.bottom=118 时轴名与脚注只剩 7px 净空（同站三行脚注的图通常有 23px），
|
||
// 所以统一提到 134 —— 改脚注行数时这里要跟着重算。
|
||
grid: { ...GRID, ...grid },
|
||
tooltip: tooltipOf(series, tooltipFormatter),
|
||
xAxis,
|
||
yAxis,
|
||
series,
|
||
graphic: [...watermarks(width, height), ...extraGraphics, footnote(notes.join('\n') + ' | @Joey知行记')],
|
||
};
|
||
}
|
||
|
||
/** 反解 PE 阈值对应的股价：在 pe_base 单调递增的序列上线性插值 */
|
||
function peToPrice(rows, pe) {
|
||
for (let i = 1; i < rows.length; i += 1) {
|
||
const prev = rows[i - 1];
|
||
const cur = rows[i];
|
||
if ((prev.pe_base - pe) * (cur.pe_base - pe) <= 0) {
|
||
const ratio = (pe - prev.pe_base) / (cur.pe_base - prev.pe_base);
|
||
return prev.price + ratio * (cur.price - prev.price);
|
||
}
|
||
}
|
||
return null;
|
||
}
|
||
|
||
/**
|
||
* PE 轴上的横向区域带（图 1、图 2 共用）。
|
||
* 必须挂在**第一个系列**上：markArea 在系列自己的分组里、先于该系列图元绘制，
|
||
* 而系列分组按声明顺序绘制 —— 挂在后面的系列上会盖住前一条线。
|
||
*/
|
||
function peBandMarkAreas() {
|
||
let low = PE_MIN;
|
||
return PE_ZONES.map((zone) => {
|
||
const band = [{
|
||
yAxis: low,
|
||
itemStyle: { color: tint(zone.color, 0.07) },
|
||
label: {
|
||
show: true,
|
||
position: 'insideTopLeft',
|
||
distance: 10,
|
||
formatter: `${zone.name} ${zone.note}`,
|
||
color: zone.color,
|
||
fontSize: 12,
|
||
fontWeight: 600,
|
||
fontFamily: FONT,
|
||
},
|
||
}, { yAxis: Math.min(zone.upTo, PE_MAX) }];
|
||
low = zone.upTo;
|
||
return band;
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 股价轴上的纵向区域带（图 3 用）。
|
||
* 标签贴底：顶部留给折线标签与「现价」竖线的标注，贴底才不会撞。
|
||
*/
|
||
function priceBandMarkAreas(rows) {
|
||
const edges = [PRICE_MIN, ...PE_ZONES
|
||
.map((zone) => peToPrice(rows, zone.upTo))
|
||
.filter((price) => price !== null), PRICE_MAX];
|
||
return PE_ZONES.map((zone, index) => [{
|
||
xAxis: edges[index],
|
||
itemStyle: { color: tint(zone.color, 0.08) },
|
||
label: {
|
||
show: true,
|
||
position: 'insideBottom',
|
||
distance: 12,
|
||
formatter: zone.name,
|
||
color: zone.color,
|
||
fontSize: 12,
|
||
fontWeight: 600,
|
||
fontFamily: FONT,
|
||
},
|
||
}, { xAxis: edges[index + 1] }]);
|
||
}
|
||
|
||
/**
|
||
* 股价 → 指标折线。
|
||
* 只在 labeledPrices 上的点标数值：30+ 个数据点全标会糊成一片，
|
||
* 而这几个点正好是决策价位。
|
||
*/
|
||
function priceLine({
|
||
name, rows, key, color, width = 2.6, labeledPrices = [],
|
||
unit = '', decimals = 2, position = 'right', distance = 8,
|
||
}) {
|
||
const line = lineSeries({ name, data: [], color, width });
|
||
return {
|
||
...line,
|
||
label: { show: false },
|
||
data: rows.map((row) => ({
|
||
value: [row.price, row[key]],
|
||
label: labeledPrices.includes(row.price)
|
||
? {
|
||
...line.label,
|
||
show: true,
|
||
position,
|
||
distance,
|
||
formatter: `${row[key].toFixed(decimals)}${unit}`,
|
||
}
|
||
: { show: false },
|
||
})),
|
||
};
|
||
}
|
||
|
||
/**
|
||
* 现价竖线：三张图共用。
|
||
* label 一律关掉 —— markLine 的标签会**跟着竖线旋转 90°**，长串中文变成一列竖排字，
|
||
* 极难读。文字改用 nowGraphics() 以 graphic 单独排，保持水平。
|
||
*/
|
||
function nowMarkLine() {
|
||
return {
|
||
silent: true,
|
||
symbol: 'none',
|
||
lineStyle: { type: 'dashed', width: 1.6, color: PALETTE.brown },
|
||
label: { show: false },
|
||
data: [{ xAxis: NOW }],
|
||
};
|
||
}
|
||
|
||
/** 现价竖线上方的水平标注，位置由 grid 反推（图表尺寸变化时会重算） */
|
||
function nowGraphics(width, text) {
|
||
const x = GRID.left
|
||
+ ((NOW - PRICE_MIN) / (PRICE_MAX - PRICE_MIN)) * (width - GRID.left - GRID.right);
|
||
return [{
|
||
type: 'text',
|
||
left: Math.round(x + 8),
|
||
top: LAYOUT.gridTop + 4,
|
||
silent: true,
|
||
style: { text, fill: PALETTE.brown, fontSize: 12, fontWeight: 600, fontFamily: FONT },
|
||
}];
|
||
}
|
||
|
||
/**
|
||
* 图 1：股价 → 2026E PE 对照 —— 资料库原表第 1 节的图形版
|
||
*
|
||
* 一条直线就是一个情景：PE 与股价严格成正比，所以三档利润在图上表现为三条**平行**的
|
||
* 窄带（±6% 的利润预期落到 PE 上不足 1.7x）。这张图能回答"现价落在哪个区域"，
|
||
* 但回答不了"贵还是便宜"—— 那取决于利润能不能兑现，属于分母问题，不在本图射程内。
|
||
*/
|
||
export function sweetCatlPricePeChart(rows, { width, height }) {
|
||
const nowPe = metricAt(rows, NOW, 'pe_base');
|
||
const hero = priceLine({
|
||
name: '中性 964 亿',
|
||
rows,
|
||
key: 'pe_base',
|
||
color: FINANCIAL_COLORS.netProfit,
|
||
width: 3.5,
|
||
labeledPrices: [265, NOW, 480, 605],
|
||
unit: 'x',
|
||
position: 'right',
|
||
});
|
||
hero.markLine = nowMarkLine();
|
||
|
||
const bear = {
|
||
...lineSeries({ name: '悲观 900 亿', data: [], color: FINANCIAL_COLORS.operatingCashFlow, width: 2.4 }),
|
||
label: { show: false },
|
||
data: rows.map((row) => [row.price, row.pe_bear]),
|
||
};
|
||
// markArea 挂在第一个系列上（见 peBandMarkAreas 注释）
|
||
bear.markArea = { silent: true, data: peBandMarkAreas() };
|
||
|
||
const bull = {
|
||
...lineSeries({ name: '乐观 1,000 亿', data: [], color: FINANCIAL_COLORS.investingCashFlow, width: 2.4 }),
|
||
label: { show: false },
|
||
data: rows.map((row) => [row.price, row.pe_bull]),
|
||
};
|
||
|
||
return baseOption({
|
||
title: '股价 → 2026E PE 对照',
|
||
subtitle: `单位：倍 · 三档利润情景 · 区域底带按中性 964 亿划分 · 现价 ${NOW} 元`,
|
||
xAxis: priceAxis(),
|
||
yAxis: valueAxis('PE（倍）', { min: PE_MIN, max: PE_MAX, interval: 5 }),
|
||
series: [bear, hero, bull],
|
||
legend: ['悲观 900 亿', '中性 964 亿', '乐观 1,000 亿'],
|
||
width,
|
||
height,
|
||
grid: { bottom: 134 },
|
||
extraGraphics: nowGraphics(width, `现价 ${NOW} 元 = 中性 ${nowPe.toFixed(2)}x`),
|
||
tooltipFormatter: (value) => `${Number(Array.isArray(value) ? value[1] : value).toFixed(2)}x`,
|
||
extraNote: 'PE = 市值 ÷ 2026E 归母净利，与股价严格成正比；三档情景只差 ±6% 利润，落到 PE 上不足 1.7x\n'
|
||
+ '原表把 15.5–25x 细分为「合理偏低」与「合理」，此处并为一条色带；扣现金 PE 见图 2',
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 图 2：净现金让 PE 便宜了多少 —— 资料库原表第 2 节右图的图形版
|
||
*
|
||
* 含现金 PE 与扣现金 PE 是两条**严格平行**的线，间距恒为 净现金 ÷ 2026E 净利
|
||
* （约 2.35x）—— 间距与股价无关，但折价占市值的比例随股价下降而放大
|
||
* （220 元 22.2% → 700 元 7.0%）。所以这张图要看的不是两条线的高低，
|
||
* 而是中间那层沙色：它是一块不产生经营利润、但实实在在归股东的资产。
|
||
*
|
||
* 实现说明：ECharts 没有"两个系列之间填充"，只能用 stack —— 下段是扣现金 PE、
|
||
* 上段是差额，差额段线宽 0、面积填沙色，上沿即含现金 PE。stack 的叠放顺序不能改
|
||
* （改了基准就错），于是用 z 控制绘制层级，防止沙色覆盖掉扣现金那条实线。
|
||
*/
|
||
export function sweetCatlNetCashChart(rows, { width, height }) {
|
||
const gap = rows[0].pe_base - rows[0].pe_ex_cash;
|
||
const nowEx = metricAt(rows, NOW, 'pe_ex_cash');
|
||
|
||
const cashLine = {
|
||
...lineSeries({ name: '扣现金 PE', data: [], color: PALETTE.brown, width: 3.5 }),
|
||
label: { show: false },
|
||
stack: 'pe',
|
||
z: 3,
|
||
areaStyle: { opacity: 0 },
|
||
data: rows.map((row) => [row.price, row.pe_ex_cash]),
|
||
};
|
||
cashLine.markLine = nowMarkLine();
|
||
cashLine.markArea = { silent: true, data: peBandMarkAreas() };
|
||
|
||
const band = {
|
||
...lineSeries({ name: '净现金差额', data: [], color: PALETTE.sand, width: 0 }),
|
||
label: { show: false },
|
||
stack: 'pe',
|
||
z: 2,
|
||
lineStyle: { color: PALETTE.sand, width: 0, opacity: 0 },
|
||
itemStyle: { color: PALETTE.sand },
|
||
showSymbol: false,
|
||
// opacity 必须显式写：areaStyle 的默认 opacity 是 0.7，只给 rgba 底色会被再乘一次
|
||
areaStyle: { color: PALETTE.sand, opacity: 0.7 },
|
||
data: rows.map((row) => [row.price, row.pe_base - row.pe_ex_cash]),
|
||
};
|
||
|
||
const gross = {
|
||
...lineSeries({ name: '含现金 PE', data: [], color: FINANCIAL_COLORS.investingCashFlow, width: 3 }),
|
||
label: { show: false },
|
||
z: 4,
|
||
data: rows.map((row) => [row.price, row.pe_base]),
|
||
};
|
||
|
||
return baseOption({
|
||
title: '净现金让 PE 便宜了多少',
|
||
subtitle: `单位：倍 · 中性 964 亿口径 · 沙色带即净现金 ${NET_CASH.toLocaleString('zh-CN')} 亿元对应的 PE`,
|
||
xAxis: priceAxis(),
|
||
yAxis: valueAxis('PE（倍）', { min: PE_MIN, max: PE_MAX, interval: 5 }),
|
||
series: [cashLine, band, gross],
|
||
// 「净现金差额」不进图例（线宽 0，图例色块会是空的），靠副标题与脚注交代
|
||
legend: ['含现金 PE', '扣现金 PE'],
|
||
width,
|
||
height,
|
||
grid: { bottom: 134 },
|
||
extraGraphics: nowGraphics(width, `现价 ${NOW} 元 = 扣现金 ${nowEx.toFixed(2)}x`),
|
||
tooltipFormatter: (value) => `${Number(Array.isArray(value) ? value[1] : value).toFixed(2)}x`,
|
||
extraNote: '含现金 PE = 市值 ÷ 2026E 净利；扣现金 PE =（市值 − 净现金）÷ 2026E 净利，即只给主营电池业务定价\n'
|
||
+ `两条线严格平行：差额恒为 ${gap.toFixed(2)}x，但占市值比例从 220 元的 22.2% 收窄到 700 元的 7.0% —— 股价越低，这层折价越厚`,
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 图 3：任意股价试算 —— 资料库原表第 5 节计算器的图形版
|
||
*
|
||
* 计算器要输入一个价格才出结果，图表反过来：220–700 元全档都画出来，任意价位
|
||
* 沿竖线直接读。两条线是同一个目标价（605 元 = 2028E 1,400 亿 × 20x）下的三年
|
||
* 年化收益，差额即 50% 分红率的贡献。纵轴穿过 0 的位置就是"三年白干"—— 正好
|
||
* 是 605 元这条卖点线，所以零线本身就是一条结论。
|
||
*
|
||
* 纵向底带把估值区域直接画在股价轴上：横带看 PE、竖带看股价，是同一套档位。
|
||
* 击球区上沿 270.9 元、买入区上沿 322.9 元、合理区上沿 520.9 元（由 pe_base 反解）。
|
||
*/
|
||
export function sweetCatlAnyPriceChart(rows, { width, height }) {
|
||
const hero = priceLine({
|
||
name: '含分红年化',
|
||
rows,
|
||
key: 'cagr_total',
|
||
color: FINANCIAL_COLORS.netProfit,
|
||
width: 3.5,
|
||
labeledPrices: [265, NOW, 450, TARGET_2028],
|
||
unit: '%',
|
||
decimals: 1,
|
||
position: 'top',
|
||
distance: 10,
|
||
});
|
||
hero.markLine = nowMarkLine();
|
||
// markArea 挂在第一个系列上，否则会盖住同图上先声明的折线
|
||
hero.markArea = { silent: true, data: priceBandMarkAreas(rows) };
|
||
|
||
const priceOnly = priceLine({
|
||
name: '仅价差年化',
|
||
rows,
|
||
key: 'cagr_price',
|
||
color: FINANCIAL_COLORS.investingCashFlow,
|
||
width: 2.6,
|
||
labeledPrices: [265, NOW, 450],
|
||
unit: '%',
|
||
decimals: 1,
|
||
position: 'bottom',
|
||
distance: 10,
|
||
});
|
||
|
||
return baseOption({
|
||
title: '任意股价试算：三年预期年化收益',
|
||
subtitle: '单位：% · 目标价 605 元（2028E 1,400 亿 × 20x）· 纵带为估值区域',
|
||
xAxis: priceAxis(),
|
||
yAxis: valueAxis('年化收益（%）', { min: -10, max: 50, interval: 10 }),
|
||
series: [hero, priceOnly],
|
||
legend: ['含分红年化', '仅价差年化'],
|
||
width,
|
||
height,
|
||
grid: { bottom: 134 },
|
||
extraGraphics: nowGraphics(width, `现价 ${NOW} 元 = 含分红年化 ${metricAt(rows, NOW, 'cagr_total').toFixed(1)}%`),
|
||
tooltipFormatter: (value) => `${Number(Array.isArray(value) ? value[1] : value).toFixed(1)}%`,
|
||
extraNote: `年化收益 =（${TARGET_2028} ÷ 股价）^(1/3) − 1；含分红口径再乘 (1 + 股息率)，股息按当前价每年派现、不复投\n`
|
||
+ '纵带边界由 pe_base 反解：击球区上沿 270.9 元 ｜ 买入区上沿 322.9 元 ｜ 合理区上沿 520.9 元',
|
||
});
|
||
}
|