html图表国际化需手动将所有文本字段（标题、图例、tooltip等）替换为i18n翻译函数调用，chart.js须在i18next初始化后配置并显式更新options；echarts推荐用getchartoption函数封装选项，配合setoption的replacemerge实现热更新；动态更新时须同步维护文案上下文、确保t()可用性，并在formatter中正确注入翻译函数。
HTML图表本身不支持国际化，所有文本（标题、图例、tooltip、坐标轴标签、错误提示）都必须由图表库通过配置项或 API 动态注入；硬编码在 options 里的中文字符串不会随语言切换自动更新，必须配合 i18n 翻译函数重写整个配置结构。
Chart.js 的 options 如何接入 i18next 翻译
Chart.js 不提供内置多语言机制，所有文案字段需手动替换。关键不是“改 language 配置”，而是把每个可读文本都包裹进翻译函数调用中。
-
options.title.text、options.legend.labels.generateLabels、options.scales.x.title.text等字段不能写死字符串，得写成t('chart_sales_title') - 必须在
i18next.init()完成后再初始化图表，否则t()可能返回 key 名本身（如 "chart_sales_title"）而非翻译后文本 - 切换语言时不能只调用
i18next.changeLanguage()，必须显式执行：chartInstance.options.title.text = t('chart_sales_title');+chartInstance.update('active') - tooltip 回调函数（如
callbacks.label）里也要调用t()，且注意传入的context.parsed.y是数值，t()只处理字符串
ECharts 的 setOption 怎么做语言热更新
ECharts 比 Chart.js 更适合国际化，因为 setOption 支持 deep merge，且支持 formatter 函数内联调用翻译函数，但仍有隐藏陷阱。
- 全局配置（如
echarts.registerLocale）仅影响数字/日期格式（Intl.NumberFormat），**不影响图例文字、标题等自定义文案** - 正确做法是：把整个
option对象封装为函数，例如getChartOption(lang) { return { title: { text: t('sales_overview', { lng: lang }) }, ... } } - 调用
myChart.setOption(getChartOption(newLang), { replaceMerge: ['title', 'legend', 'tooltip'] })，避免因 merge 策略导致旧文案残留 - 若使用
dataset.source加载远程数据，其字段名（如["date", "revenue"]）虽不翻译，但series.encode中的tooltip显示仍需在tooltip.formatter里调用t()
动态维护图表数据 + 文案时容易漏掉的三件事
多数人只记得更新数据数组，却忽略文案上下文同步，导致语言错位、tooltip 显示 key、图例乱码。
- 图表容器 DOM 元素上必须保留
data-lang="zh"或类似标记，否则 resize / click 事件回调里无法获知当前语言环境 - 异步加载数据后调用
update()前，要先检查i18next.isInitialized，未就绪则延迟执行，否则t()返回空字符串 - 如果图表嵌在 Web Component（如
customElements.define()）里，attributeChangedCallback监听到lang属性变更时，不能只改options，还必须触发this._chart.setOption(this._getOption(), { replaceMerge: [...] })
最常被跳过的环节是 tooltip 和 axis label 的 formatter 函数——它们运行在图表内部上下文，拿不到外部 t() 实例，必须提前把翻译函数绑定到 window 或通过闭包注入，否则切语言后 hover 一下还是中文。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
