ECharts 多语言切换完全指南从图表说中文到自定义语言包【免费下载链接】echartsApache ECharts is a powerful, interactive charting and data visualization library for browser项目地址: https://gitcode.com/GitHub_Trending/echa/echarts做 ECharts 国际化的第一步往往是被自己的图表打脸给中文用户看的页面时间轴上却飘着 January、February工具栏的按钮也清一色英文。这种图表中文化显示的问题其实不需要动配置里的 series也不需要改任何数据——ECharts 多语言的核心就是一个locale参数加上一份语言包下面按实际使用顺序把这套东西讲清楚。注册语言包3 行代码让图表说中文每个语言包都是一个普通 JS 对象文件加载后会自动调用echarts.registerLocale把自己注册进去。registerLocale就是 ECharts i18n 的入口它把一份语言数据挂到全局之后所有图表都能按名字取用。仓库的 i18n/ 目录里已经放好了几十种语言的现成文件常用的比如 langZH.js代码 ZH、langEN.jsEN还有日文 JA 等按需引入即可。初始化时把语言代码传给init的第三个参数就能全局生效// 引入 i18n/langZH.js 后初始化时指定 locale const chart echarts.init(document.getElementById(main), null, { locale: ZH // 时间轴、图例、工具栏全部切换为中文 });这就是最直接的 echarts locale 配置方式写对这一行大部分图表里的英文问题当场消失。语言包里面到底装了哪些文案打开任意语言文件看结构四个命名空间分工明确time月份、星期时间轴和 tooltip 默认用它渲染日期legend图例上全选 / 反选这类按钮文案toolbox数据视图、区域缩放、还原、保存为图片等工具栏按钮series.typeNames每种图表类型的名称aria 无障碍朗读时会用到理解了这份清单你就知道哪些文字会随语言自动变、哪些不会变——这也是后面排坑的伏笔。运行中切换语言setOption 改 locale页面有语言切换按钮时不需要销毁重建实例setOption可以只更新 locale// 右上角放一个切换按钮 document.getElementById(switch).onclick () { chart.setOption({ locale: currentLang EN }); // 重新渲染全部文案换语言 };注意前提是目标语言包已注册过否则切过去只会得到空白文案。对 ECharts 切换语言这件事来说一次setOption就是全部工作量代价只是一次重渲染。自定义一个繁体中文语言包内置 40 多种语言覆盖主流地区但繁体中文这种差一点点的需求就没有现成的。这时候自己造一个包照着 i18n/langZH.js 的结构翻译一遍即可不必全量复制缺失的部分会自动回落英文默认值const localeTW { time: { month: [一月, 二月, 三月, 四月, 五月, 六月, 七月, 八月, 九月, 十月, 十一月, 十二月], monthAbbr: [1月, 2月, 3月, 4月, 5月, 6月, 7月, 8月, 9月, 10月, 11月, 12月] }, legend: { selector: { all: 全選, inverse: 反選 } } }; echarts.registerLocale(TW, localeTW); // 注册后任何图表都能写 locale: TW自定义语言包和内置语言走的是同一套注册机制所以初始化或切换时对它一视同仁。让时间格式跟着语言走语言包里time.month决定的是一月还是 January轴上默认渲染就会自动跟随。麻烦出现在你自己写了 formatter 的情况模板字符串是你拼的ECharts 不会替你翻译。这时在 formatter 里读当前语言、分支处理xAxis: { type: time, axisLabel: { formatter(value) { const lang chart.getOption().locale; // 按当前语言选择不同的日期模板 return echarts.time.format( lang ZH ? yyyy年MM月dd日 : MMM dd, yyyy, value); } } }原则一句话让 ECharts 自己渲染的部分交给语言包你手写文案的地方自己读 locale 做判断。多图表页面怎么统一管理语言状态一个页面七八个图表最忌挨个手改。把实例和当前语言收进一个小管理器切换时批量下发const charts []; // init 时把每个实例 push 进来 let currentLang ZH; function setLang(lang) { currentLang lang; charts.forEach(c c.setOption({ locale: lang })); // 一次遍历全部更新 }语言状态只保存一份所有图表都从这一份取值不会出现三个图中文、一个图英文的尴尬。踩过的几个坑提前告诉你切完语言还有英文残留十有八九是你自定义的 formatter 或 graphic 组件里写死了文案。先全局搜一下硬编码字符串再确认语言包加载顺序没把目标语言覆盖掉。要做 RTL阿拉伯语、希伯来语ECharts 画布内的内容不会自动镜像常规做法是给图表容器加direction: rtl的 CSS把外围布局翻过去再配合 RTL 语言包处理文案。想给官方加一种语言拿 i18n/ 下任一语言文件当模板翻译齐所有文案后向社区提 PR如果只是自己用registerLocale注册私有包就够了。到这里注册语言包、指定 locale、setOption切换、自定义语言包这四步已经闭环。剩下的活儿就是去 i18n/ 目录挑一份现成文件让你的图表跟着用户说同一种语言。【免费下载链接】echartsApache ECharts is a powerful, interactive charting and data visualization library for browser项目地址: https://gitcode.com/GitHub_Trending/echa/echarts创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 ECharts 多语言切换完全指南：从图表说中文到自定义语言包
ECharts 多语言切换完全指南从图表说中文到自定义语言包【免费下载链接】echartsApache ECharts is a powerful, interactive charting and data visualization library for browser项目地址: https://gitcode.com/GitHub_Trending/echa/echarts做 ECharts 国际化的第一步往往是被自己的图表打脸给中文用户看的页面时间轴上却飘着 January、February工具栏的按钮也清一色英文。这种图表中文化显示的问题其实不需要动配置里的 series也不需要改任何数据——ECharts 多语言的核心就是一个locale参数加上一份语言包下面按实际使用顺序把这套东西讲清楚。注册语言包3 行代码让图表说中文每个语言包都是一个普通 JS 对象文件加载后会自动调用echarts.registerLocale把自己注册进去。registerLocale就是 ECharts i18n 的入口它把一份语言数据挂到全局之后所有图表都能按名字取用。仓库的 i18n/ 目录里已经放好了几十种语言的现成文件常用的比如 langZH.js代码 ZH、langEN.jsEN还有日文 JA 等按需引入即可。初始化时把语言代码传给init的第三个参数就能全局生效// 引入 i18n/langZH.js 后初始化时指定 locale const chart echarts.init(document.getElementById(main), null, { locale: ZH // 时间轴、图例、工具栏全部切换为中文 });这就是最直接的 echarts locale 配置方式写对这一行大部分图表里的英文问题当场消失。语言包里面到底装了哪些文案打开任意语言文件看结构四个命名空间分工明确time月份、星期时间轴和 tooltip 默认用它渲染日期legend图例上全选 / 反选这类按钮文案toolbox数据视图、区域缩放、还原、保存为图片等工具栏按钮series.typeNames每种图表类型的名称aria 无障碍朗读时会用到理解了这份清单你就知道哪些文字会随语言自动变、哪些不会变——这也是后面排坑的伏笔。运行中切换语言setOption 改 locale页面有语言切换按钮时不需要销毁重建实例setOption可以只更新 locale// 右上角放一个切换按钮 document.getElementById(switch).onclick () { chart.setOption({ locale: currentLang EN }); // 重新渲染全部文案换语言 };注意前提是目标语言包已注册过否则切过去只会得到空白文案。对 ECharts 切换语言这件事来说一次setOption就是全部工作量代价只是一次重渲染。自定义一个繁体中文语言包内置 40 多种语言覆盖主流地区但繁体中文这种差一点点的需求就没有现成的。这时候自己造一个包照着 i18n/langZH.js 的结构翻译一遍即可不必全量复制缺失的部分会自动回落英文默认值const localeTW { time: { month: [一月, 二月, 三月, 四月, 五月, 六月, 七月, 八月, 九月, 十月, 十一月, 十二月], monthAbbr: [1月, 2月, 3月, 4月, 5月, 6月, 7月, 8月, 9月, 10月, 11月, 12月] }, legend: { selector: { all: 全選, inverse: 反選 } } }; echarts.registerLocale(TW, localeTW); // 注册后任何图表都能写 locale: TW自定义语言包和内置语言走的是同一套注册机制所以初始化或切换时对它一视同仁。让时间格式跟着语言走语言包里time.month决定的是一月还是 January轴上默认渲染就会自动跟随。麻烦出现在你自己写了 formatter 的情况模板字符串是你拼的ECharts 不会替你翻译。这时在 formatter 里读当前语言、分支处理xAxis: { type: time, axisLabel: { formatter(value) { const lang chart.getOption().locale; // 按当前语言选择不同的日期模板 return echarts.time.format( lang ZH ? yyyy年MM月dd日 : MMM dd, yyyy, value); } } }原则一句话让 ECharts 自己渲染的部分交给语言包你手写文案的地方自己读 locale 做判断。多图表页面怎么统一管理语言状态一个页面七八个图表最忌挨个手改。把实例和当前语言收进一个小管理器切换时批量下发const charts []; // init 时把每个实例 push 进来 let currentLang ZH; function setLang(lang) { currentLang lang; charts.forEach(c c.setOption({ locale: lang })); // 一次遍历全部更新 }语言状态只保存一份所有图表都从这一份取值不会出现三个图中文、一个图英文的尴尬。踩过的几个坑提前告诉你切完语言还有英文残留十有八九是你自定义的 formatter 或 graphic 组件里写死了文案。先全局搜一下硬编码字符串再确认语言包加载顺序没把目标语言覆盖掉。要做 RTL阿拉伯语、希伯来语ECharts 画布内的内容不会自动镜像常规做法是给图表容器加direction: rtl的 CSS把外围布局翻过去再配合 RTL 语言包处理文案。想给官方加一种语言拿 i18n/ 下任一语言文件当模板翻译齐所有文案后向社区提 PR如果只是自己用registerLocale注册私有包就够了。到这里注册语言包、指定 locale、setOption切换、自定义语言包这四步已经闭环。剩下的活儿就是去 i18n/ 目录挑一份现成文件让你的图表跟着用户说同一种语言。【免费下载链接】echartsApache ECharts is a powerful, interactive charting and data visualization library for browser项目地址: https://gitcode.com/GitHub_Trending/echa/echarts创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考