echarts 国际化
国际化语言：https://github.com/apache/echarts/tree/release/i18n
*********************
国际化
国际化在echart初始化的时候设置
# 初始化时指定locale
echarts.init(dom: HTMLDivElement|HTMLCanvasElement, theme?: Object|string, opts?: {
devicePixelRatio?: number, //设备像素比，默认取浏览器的值window.devicePixelRatio
renderer?: 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'
) {
// CommonJS
factory(exports, require('echarts/lib/echarts'));
} else {
// Browser globals
factory({}, root.echarts);
}
})(this, function(exports, echarts) {
/**
* Language: English.
*/
var localeObj = { //预定义locale变量，locale默认使用EN
time: {
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'
) {
// CommonJS
factory(exports, require('echarts/lib/echarts'));
} else {
// Browser globals
factory({}, 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'
) {
// CommonJS
factory(exports, require('echarts/lib/echarts'));
} else {
// Browser globals
factory({}, 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> 