Geek Answers Handbook

ECharts of Baidu

Does anyone know about Echarts ( http://echarts.baidu.com ):

  • Uses English characters only
  • Correctly imports all necessary components from the local directory structure
  • Job

All Echarts examples are presented very well, but there are no examples showing how to deploy and run locally (in English), which (and this is pretty important) actually work.

From my many “copy and paste" and then edit the efforts, I just get an endless file that did not find messages and mysterious characters everywhere (to be honest, these are Chinese characters, but I see them only as mysterious screams). I also downloaded github sampes and searched Google, but without success.

The library looks absolutely brilliant, but I can not decrypt it :(

One example English .jsp page (this works) would be great. Does anyone know where I can find him?

thanks

+8
javascript charts echarts
source share
7 answers

Here is an example that just works. Just save it in an HTML file and take it to your browser. No need to download or configure anything else. It uses a remote script file and does not contain Chinese text:

<!doctype html> <html> <head> <title>ECharts Sample</title> <script src="http://echarts.baidu.com/dist/echarts.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>
+5
source share

I know that 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 at the time of writing) has been converted to English.

They have all the documentation, including options, api code, downloadable files, and many examples in English (with a code-type development area where you can check your parameters and see the results in real time).

The login page can be found here:
https://ecomfe.imtqy.com/echarts-doc/public/en/

The library can be downloaded here:
https://ecomfe.imtqy.com/echarts-doc/public/en/download.html

A getting started tutorial can be found here:
ecomfe.imtqy.com/echarts-doc/public/en/tutorial.html

Many options can be found here:
ecomfe.imtqy.com/echarts-doc/public/en/option.html

Many examples can be found here:
ecomfe.imtqy.com/echarts-examples/public/index.html

An example of a simple histogram and their codepen playground can be found here: ecomfe.imtqy.com/echarts-examples/public/editor.html?c=bar-tick-align

Below I pasted my simple histogram into the window for your 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>
+7
source share

There is an example on their github that clearly explains how to use the chart, I just check it, it works very well

echart example for github

 <!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>
+6
source share

ECharts offers an English version of its site, including examples and documentation that I assume you have not seen on your subject.

https://ecomfe.imtqy.com/echarts/index-en.html
(During this edit, they need to update their English documents to version 3.0 for echarts).

https://ecomfe.imtqy.com/echarts/doc/example-en.html

However, there are still times when you want all .js and its strings to be in English by default, but Google Translate can help there.

+4
source share

Just deactivated developers are still looking for the English version of echarts, the cdn link below contains links to the English version:

https://cdnjs.com/libraries/echarts

Works great for me.

+2
source share

If anyone is wondering. Someone translated their entire .js into English, so that the buttons and controls are displayed in English. This guy also asked them to combine their "English" version to master github, but I think they are not interested yet.

I tested his js file and it was in English. A link to the zip file is also added here. But just in case, you can find it here - Download

https://github.com/ecomfe/echarts/issues/2321

enter image description here

+1
source share

Data is displayed in Chinese, the code structure and structure in English. Ignore specific data, try specifying some data that you want to show.

demon in English: http://echarts.baidu.com/echarts2/doc/example-en.html

0
source share

More articles:


All Articles