ECharts from Baidu
Question
Does anyone know of an Echarts ( http://echarts.baidu.com ) example that:
- Only uses english characters
- Correctly imports all the necessary includes from a local directory structure
- Works
All the Echarts examples are presented very nicely but there are no examples that show how to deploy and run it locally (in English) that (and this is rather important) actually work.
From my many 'copy and paste' then edit efforts I just get endless file not found messages and mysterious characters all over the place (to be fair they are Chinese characters but I only see them as mysterious squiggles). I've also downloaded the github sampes and searched Google but with no success.
The library looks absolutely brilliant but I can't decipher it :(
A single .jsp page example in English (that works) would be great. Anyone know where I can find one?
Thanks
8 answers
solution1
14 2017-01-18 21:22:18
I know there is already an accepted answer, but I thought I would add a link for people reading this question.
The new version of the echarts documentation (echarts 3.4.0 as of writing this) has been converted into english.
They have all the documentation including options, the api code, downloads, and many examples all in english (with a codepen type development area that you can test out your options and see the results in real time).
The entry page can be found here:
https://ecomfe.github.io/echarts-doc/public/en/
The library can be downloaded here:
https://ecomfe.github.io/echarts-doc/public/en/download.html
The getting started tutorial can be found here:
ecomfe.github.io/echarts-doc/public/en/tutorial.html
The multitude of options can be found here:
ecomfe.github.io/echarts-doc/public/en/option.html
A plethora of examples can be found here:
ecomfe.github.io/echarts-examples/public/index.html
An simple bar chart example and their codepen playground can be found here: ecomfe.github.io/echarts-examples/public/editor.html?c=bar-tick-align
Below I have pasted their simple bar chart into the window for your viewing pleasure:
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script> </head> <body> <div id="container" style="width: 600px; height: 250px;"></div> <script type="text/javascript"> var chart = document.getElementById("container"); var myChart = echarts.init(chart); var option = { title: { text: "Echarts Bar Chart" }, legend: [ { data: ["Hours Worked"] } ], tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, xAxis: [ { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], axisTick: { alignWithLabel: true } } ], yAxis: [ { type: 'value' } ], series: [ { name:'Hours Worked', type:'bar', barWidth: '60%', data: [10, 52, 200, 334, 390, 330, 220] } ] }; myChart.setOption(option, true); </script> </body> </html>
solution2
12 ACCPTED 2016-10-07 00:50:16
Here is an example that simply works. Just save it into an HTML file and render it into your browser. No need to download or configure anything else. It uses a remote script file, and no Chinese text:
<!doctype html> <html> <head> <title>ECharts Sample</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.6.0/echarts-en.min.js"></script> </head> <body> <div id="chart" style="width: 500px; height: 350px;"></div> <script> var chart = document.getElementById('chart'); var myChart = echarts.init(chart); var option = { title: { text: 'ECharts Sample' }, tooltip: { }, legend: { data: [ 'Sales' ] }, xAxis: { data: [ "shirt", "cardign", "chiffon shirt", "pants", "heels", "socks" ] }, yAxis: { }, series: [{ name: 'Sales', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; myChart.setOption(option); </script> </body> </html>
solution3
6 2015-01-18 14:29:54
There is an example in their github that clearly explain the way of using the chart i just test it, it's working very well
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!--Step:1 Prepare a dom for ECharts which (must) has size (width & hight)-->
<!--Step:1 为ECharts准备一个具备大小（宽高）的Dom-->
<div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
<div id="mainMap" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
<!--Step:2 Import echarts-all.js-->
<!--Step:2 引入echarts-all.js-->
<script src="js/echarts-all.js"></script>
<script type="text/javascript">
// Step:3 echarts & zrender as a Global Interface by the echarts-plain.js.
// Step:3 echarts和zrender被echarts-plain.js写入为全局接口
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
tooltip : {
trigger: 'axis'
},
legend: {
data:['蒸发量','降水量']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
}
],
yAxis : [
{
type : 'value',
splitArea : {show : true}
}
],
series : [
{
name:'蒸发量',
type:'bar',
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
},
{
name:'降水量',
type:'bar',
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
}
]
});
// --- 地图 ---
var myChart2 = echarts.init(document.getElementById('mainMap'));
myChart2.setOption({
tooltip : {
trigger: 'item',
formatter: '{b}'
},
series : [
{
name: '中国',
type: 'map',
mapType: 'china',
selectedMode : 'multiple',
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data:[
{name:'广东',selected:true}
]
}
]
});
</script>
</body>
</html>
solution4
5 2017-10-02 19:29:29
Just incase devs are still looking for the english version of echarts, the cdn link below has links to the english version:
https://cdnjs.com/libraries/echarts
Works fine for me.
solution5
4 2015-02-26 18:25:43
ECharts does offer an English version of their site, including examples and documentation, which I am guessing you did not see based on your question.
https://ecomfe.github.io/echarts/index-en.html
(At the time of this edit, they need to update their english docs to the 3.0 version of echarts).
https://ecomfe.github.io/echarts/doc/example-en.html
That being said, there are still times when you wish the entire .js and its default strings were in English, but Google Translate can help there.
solution6
2 2017-04-30 22:42:09
If anyone is wondering. Someone did translate their entire .js to english, so that the buttons and controls appear in English. This guy also requested them to merge his 'English' version to master on github, but I guess they aren't interested yet.
I have tested his js file and it is in English. The link to the zip file is also included there. But just in case it can be found here - Download
https://github.com/ecomfe/echarts/issues/2321
solution7
0 2016-08-19 18:04:38
The data is displayed in Chinese,Code structure and framework in English.Ignore the specific data,try to put some data what you want to show.
demon in english: http://echarts.baidu.com/echarts2/doc/example-en.html
solution8
0 2019-04-11 05:25:25
If someone is using echarts-for-react, here is how I solved it
toolbox: {
show: true,
orient: 'vertical',
feature: {
dataView: { show: true, title: 'Data View', readOnly: false },
restore: { show: true, title: 'Reset' },
saveAsImage: { show: true, title: "Download" }
},
}
the magic lies in the toolbox.feature.title
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.