echarts 国际化

国际化语言：https://github.com/apache/echarts/tree/release/i18n

*********************

国际化

国际化在echart初始化的时候设置

# 初始化时指定locale
echarts.init(dom: HTMLDivElement|HTMLCanvasElement, theme?: Object|string, opts?: {devicePixelRatio?: number,   //设备像素比，默认取浏览器的值window.devicePixelRatiorenderer?: string,           //渲染器，支持'canvas'或者'svg'useDirtyRect?: boolean,      //从'v5.0.0'开始支持width?: number|string,       //实例宽度，单位为像素，null/undefined/'auto'，则表示自动取dom(实例容器)的宽度height?: number|string,      //实例高度，单位为像素，null/undefined/'auto'，则表示自动取dom(实例容器)的高度locale?: string              //使用的语言，内置ZH、EN
}) => ECharts
dom：容器对象
theme：主题名称或者对象，可选
opts：初始化参数，可选

********************

国际化语言

echarts默认支持EN、ZH，其他语言需要导入js脚本

说明：编译后的js脚本含有registerLocale函数，自动注册了locale，引入脚本就可直接使用

langEN.js

/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements.  See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership.  The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License.  You may obtain a copy of the License at
*
*   http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied.  See the License for the
* specific language governing permissions and limitations
* under the License.
*//*** AUTO-GENERATED FILE. DO NOT MODIFY.*/
(function(root, factory) {if (typeof define === 'function' && define.amd) {// AMD. Register as an anonymous module.define(['exports', 'echarts'], factory);} else if (typeof exports === 'object' &&typeof exports.nodeName !== 'string') {// CommonJSfactory(exports, require('echarts/lib/echarts'));} else {// Browser globalsfactory({}, root.echarts);}
})(this, function(exports, echarts) {/*** Language: English.*/var localeObj = {     //预定义locale变量，locale默认使用ENtime: {month: ['January', 'February', 'March', 'April', 'May', 'June','July', 'August', 'September', 'October', 'November', 'December'],monthAbbr: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],dayOfWeek: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],dayOfWeekAbbr: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']},legend: {selector: {all: 'All',inverse: 'Inv'}},toolbox: {brush: {title: {rect: 'Box Select',polygon: 'Lasso Select',lineX: 'Horizontally Select',lineY: 'Vertically Select',keep: 'Keep Selections',clear: 'Clear Selections'}},dataView: {title: 'Data View',lang: ['Data View', 'Close', 'Refresh']},dataZoom: {title: {zoom: 'Zoom',back: 'Zoom Reset'}},magicType: {title: {line: 'Switch to Line Chart',bar: 'Switch to Bar Chart',stack: 'Stack',tiled: 'Tile'}},restore: {title: 'Restore'},saveAsImage: {title: 'Save as Image',lang: ['Right Click to Save Image']}},series: {typeNames: {pie: 'Pie chart',bar: 'Bar chart',line: 'Line chart',scatter: 'Scatter plot',effectScatter: 'Ripple scatter plot',radar: 'Radar chart',tree: 'Tree',treemap: 'Treemap',boxplot: 'Boxplot',candlestick: 'Candlestick',k: 'K line chart',heatmap: 'Heat map',map: 'Map',parallel: 'Parallel coordinate map',lines: 'Line graph',graph: 'Relationship graph',sankey: 'Sankey diagram',funnel: 'Funnel chart',gauge: 'Gauge',pictorialBar: 'Pictorial bar',themeRiver: 'Theme River Map',sunburst: 'Sunburst'}},aria: {general: {withTitle: 'This is a chart about "{title}"',withoutTitle: 'This is a chart'},series: {single: {prefix: '',withName: ' with type {seriesType} named {seriesName}.',withoutName: ' with type {seriesType}.'},multiple: {prefix: '. It consists of {seriesCount} series count.',withName: ' The {seriesId} series is a {seriesType} representing {seriesName}.',withoutName: ' The {seriesId} series is a {seriesType}.',separator: {middle: '',end: ''}}},data: {allData: 'The data is as follows: ',partialData: 'The first {displayCnt} items are: ',withName: 'the data for {name} is {value}',withoutName: '{value}',separator: {middle: ', ',end: '. '}}}
};echarts.registerLocale('EN', localeObj);   //注册EN locale});

langDE.js

/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements.  See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership.  The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License.  You may obtain a copy of the License at
*
*   http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied.  See the License for the
* specific language governing permissions and limitations
* under the License.
*//*** AUTO-GENERATED FILE. DO NOT MODIFY.*/
(function(root, factory) {if (typeof define === 'function' && define.amd) {// AMD. Register as an anonymous module.define(['exports', 'echarts'], factory);} else if (typeof exports === 'object' &&typeof exports.nodeName !== 'string') {// CommonJSfactory(exports, require('echarts/lib/echarts'));} else {// Browser globalsfactory({}, root.echarts);}
})(this, function(exports, echarts) {/*** Language: German.*/var localeObj = {time: {month: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni','Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],monthAbbr: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun','Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],dayOfWeek: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],dayOfWeekAbbr: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa']},legend: {selector: {all: 'Alle',inverse: 'Invertiert'}},toolbox: {brush: {title: {rect: 'Box Auswahl',polygon: 'Lasso Auswahl',lineX: 'Horizontale Auswahl',lineY: 'Vertikale Auswahl',keep: 'Bereich Auswahl',clear: 'Auswahl zurücksetzen'}},dataView: {title: 'Daten Ansicht',lang: ['Daten Ansicht', 'Schließen', 'Aktualisieren']},dataZoom: {title: {zoom: 'Zoom',back: 'Zoom zurücksetzen'}},magicType: {title: {line: 'Zu Liniendiagramm wechseln',bar: 'Zu Balkendiagramm wechseln',stack: 'Stapel',tiled: 'Kachel'}},restore: {title: 'Wiederherstellen'},saveAsImage: {title: 'Als Bild speichern',lang: ['Rechtsklick zum Speichern des Bildes']}},series: {typeNames: {pie: 'Tortendiagramm',bar: 'Balkendiagramm',line: 'Liniendiagramm',scatter: 'Streudiagramm',effectScatter: 'Welligkeits-Streudiagramm',radar: 'Radar-Karte',tree: 'Baum',treemap: 'Baumkarte',boxplot: 'Boxplot',candlestick: 'Kerzenständer',k: 'K Liniendiagramm',heatmap: 'Heatmap',map: 'Karte',parallel: 'Parallele Koordinatenkarte',lines: 'Liniendiagramm',graph: 'Beziehungsgrafik',sankey: 'Sankey-Diagramm',funnel: 'Trichterdiagramm',gauge: 'Meßanzeige',pictorialBar: 'Bildlicher Balken',themeRiver: 'Thematische Flusskarte',sunburst: 'Sonnenausbruch'}},aria: {general: {withTitle: 'Dies ist ein Diagramm über "{title}"',withoutTitle: 'Dies ist ein Diagramm'},series: {single: {prefix: '',withName: ' mit Typ {seriesType} namens {seriesName}.',withoutName: ' mit Typ {seriesType}.'},multiple: {prefix: '. Es besteht aus {seriesCount} Serienzählung.',withName: ' Die Serie {seriesId} ist ein {seriesType} welcher {seriesName} darstellt.',withoutName: ' Die {seriesId}-Reihe ist ein {seriesType}.',separator: {middle: '',end: ''}}},data: {allData: 'Die Daten sind wie folgt: ',partialData: 'Die ersten {displayCnt} Elemente sind: ',withName: 'die Daten für {name} sind {value}',withoutName: '{value}',separator: {middle: ',',end: '.'}}}
};echarts.registerLocale('DE', localeObj);     //注册DE});

langZH.js

/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements.  See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership.  The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License.  You may obtain a copy of the License at
*
*   http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied.  See the License for the
* specific language governing permissions and limitations
* under the License.
*//*** AUTO-GENERATED FILE. DO NOT MODIFY.*/
(function(root, factory) {if (typeof define === 'function' && define.amd) {// AMD. Register as an anonymous module.define(['exports', 'echarts'], factory);} else if (typeof exports === 'object' &&typeof exports.nodeName !== 'string') {// CommonJSfactory(exports, require('echarts/lib/echarts'));} else {// Browser globalsfactory({}, root.echarts);}
})(this, function(exports, echarts) {var localeObj = {time: {month: ['一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月'],monthAbbr: ['1月', '2月', '3月', '4月', '5月', '6月','7月', '8月', '9月', '10月', '11月', '12月'],dayOfWeek: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],dayOfWeekAbbr: ['日', '一', '二', '三', '四', '五', '六']},legend: {selector: {all: '全选',inverse: '反选'}},toolbox: {brush: {title: {rect: '矩形选择',polygon: '圈选',lineX: '横向选择',lineY: '纵向选择',keep: '保持选择',clear: '清除选择'}},dataView: {title: '数据视图',lang: ['数据视图', '关闭', '刷新']},dataZoom: {title: {zoom: '区域缩放',back: '区域缩放还原'}},magicType: {title: {line: '切换为折线图',bar: '切换为柱状图',stack: '切换为堆叠',tiled: '切换为平铺'}},restore: {title: '还原'},saveAsImage: {title: '保存为图片',lang: ['右键另存为图片']}},series: {typeNames: {pie: '饼图',bar: '柱状图',line: '折线图',scatter: '散点图',effectScatter: '涟漪散点图',radar: '雷达图',tree: '树图',treemap: '矩形树图',boxplot: '箱型图',candlestick: 'K线图',k: 'K线图',heatmap: '热力图',map: '地图',parallel: '平行坐标图',lines: '线图',graph: '关系图',sankey: '桑基图',funnel: '漏斗图',gauge: '仪表盘图',pictorialBar: '象形柱图',themeRiver: '主题河流图',sunburst: '旭日图'}},aria: {general: {withTitle: '这是一个关于“{title}”的图表。',withoutTitle: '这是一个图表，'},series: {single: {prefix: '',withName: '图表类型是{seriesType}，表示{seriesName}。',withoutName: '图表类型是{seriesType}。'},multiple: {prefix: '它由{seriesCount}个图表系列组成。',withName: '第{seriesId}个系列是一个表示{seriesName}的{seriesType}，',withoutName: '第{seriesId}个系列是一个{seriesType}，',separator: {middle: '；',end: '。'}}},data: {allData: '其数据是——',partialData: '其中，前{displayCnt}项是——',withName: '{name}的数据是{value}',withoutName: '{value}',separator: {middle: '，',end: ''}}}
};echarts.registerLocale('ZH', localeObj);       //注册ZH});

*********************

示例

默认locale（EN）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="/echarts/echarts.min.js"></script><script src="/jquery/jquery-3.6.0.min.js"></script><script type="text/javascript">$(function (){const myChart = echarts.init($("#con")[0]);// 指定图表的配置项和数据const option = {title: {left: 'center',text: '营业总收入季度分布图',textStyle: {color: '#6d6'}},tooltip: {},legend: {left: 'right',top: '10',orient: 'vertical',selector: ['all', 'inverse']     //此处会使用到locale变量},dataset: {source: [['quarter', '一季度', '二季度', '三季度', '四季度'],['完美世界', 25.74, 25.70, 29.18, 21.58]]},series: [{name: '完美世界',type: 'pie',radius: '60%',seriesLayoutBy: 'row',encode: {itemName: 0,        //数据项名称，在legend中展示value: 1},label: {show: false}}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);})</script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="con" style="width: 500px;height:300px;"></div>
</body>
</html>

中文locale

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="/echarts/echarts.min.js"></script><script src="/jquery/jquery-3.6.0.min.js"></script><script type="text/javascript">$(function (){const myChart = echarts.init($("#con")[0], null, {locale: 'ZH'});// 指定图表的配置项和数据const option = {title: {left: 'center',text: '营业总收入季度分布图',textStyle: {color: '#6d6'}},tooltip: {},legend: {left: 'right',top: '10',orient: 'vertical',selector: ['all', 'inverse']      //此处使用到locale变量},dataset: {source: [['quarter', '一季度', '二季度', '三季度', '四季度'],['完美世界', 25.74, 25.70, 29.18, 21.58]]},series: [{name: '完美世界',type: 'pie',radius: '60%',seriesLayoutBy: 'row',encode: {itemName: 0,        //数据项名称，在legend中展示value: 1},label: {show: false}}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);})</script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="con" style="width: 500px;height:300px;"></div>
</body>
</html>

DE locale：需先导入编译后的langDE.js

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="/echarts/echarts.min.js"></script><script src="/echarts/langDE.js"></script>        //导入langDE.js<script src="/jquery/jquery-3.6.0.min.js"></script><script type="text/javascript">$(function (){const myChart = echarts.init($("#con")[0], null, {locale: 'DE'});// 指定图表的配置项和数据const option = {title: {left: 'center',text: '营业总收入季度分布图',textStyle: {color: '#6d6'}},tooltip: {},legend: {left: 'right',top: '10',orient: 'vertical',selector: ['all', 'inverse']         //此处使用到locale变量},dataset: {source: [['quarter', '一季度', '二季度', '三季度', '四季度'],['完美世界', 25.74, 25.70, 29.18, 21.58]]},series: [{name: '完美世界',type: 'pie',radius: '60%',seriesLayoutBy: 'row',encode: {itemName: 0,        //数据项名称，在legend中展示value: 1},label: {show: false}}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);})</script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="con" style="width: 500px;height:300px;"></div>
</body>
</html>

echarts 国际化相关推荐

官宣了！Apache ECharts 毕业成为 Apache 软件基金会顶级项目！
2021 年 1 月 26 日,德克萨斯州威明顿市 Apache 软件基金会(ASF)是 350 多个开源项目和计划的全志愿开发者.管理者和孵化者,今天宣布 Apache® ECharts™成为顶级项 ...
superset集成echarts
文章目录服务地址前言集成echarts 集成echarts柱状折线图 mix-line-bar 流程 1. superset-frontend/src/visualizations/ 目录下 2 ...
echarts配合google地图，并自定义google地图的样式
前言全网关于google地图配合echarts的使用找了很久,其实echarts结合百度地图使用会更方便一些.公司因为想要更国际化,所以更倾向于使用google地图准备工作要想使用google地 ...
【vue 进阶指南一】多语言国际化（中英文切换）
vue + element-ui + vue-i18n 多语言国际化 1.element-ui 并不支持最新版的vue-i8n 插件,开发时注意i18n的版本,当然本示例成功解决版本不兼容的问题,详细 ...
vue+elementUI+vue-i18n 实现国际化
需求提的比较着急,匆忙看了一些相关文章就开始上手,踩了些坑,不过好歹是完成了. 前提一般来说,语言环境存储在本地还是服务器上是个值得根据产品来思考的事情.最开始,我是把用户设置的语言存储在 cook ...
echarts基础语法
一.首页知识点推荐: 点击首页->可视化实验室里面有很多意想不到的宝藏二.名词解析 1.基本名词 xAxis 横坐标 yAxis 纵坐标 grid 整个坐标系是基于grid这个网格去定位的 ...
vue-----vue-18n多语言处理，实现国际化
需求:后台管理系统中要求页面国际化,页面语言能够进行切换,满足不同地区用户需求. 可以借助vue-i18n插件来实现这个需求 vue-i18n国际化插件:实现语言切换使用: 一.安装依赖 npm i ...
组件，库，控件，插件集合（jQuery/绘图/富文本/PDF/Excel/国际化/Three.js/JSZip/JSEncrypt/Axios/其他）
组件(库)的概念包含控件(UI组件).插件(基物上的组件) jQuery 位置与尺寸 $(window).scrollTop() //鼠标滚动高度 $(window).height() ...
echarts数据变了不重新渲染，以及重新渲染了前后数据会重叠渲染的问题
1.echarts数据变了但是视图不重新渲染新建Chart.vue文件 <template> <p :id="id" :style="style&q ...

echarts 国际化

echarts 国际化

*********************

*********************

echarts 国际化相关推荐

最新文章

热门文章