CODEWITHSUNDEEP
javascriptchartsecharts
Andrew-NZ
Andrew-NZ

Reputation: 491

ECharts from Baidu

Does anyone know of an Echarts (http://echarts.baidu.com) example that:

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

Upvotes: 15

Views: 38095

Answers (8)

Cristian Scutaru
Cristian Scutaru

Reputation: 1517

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>

Upvotes: 11

Rahul Makhija
Rahul Makhija

Reputation: 609

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

Upvotes: 0

nizantz
nizantz

Reputation: 1621

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.

Upvotes: 5

Anjan Biswas
Anjan Biswas

Reputation: 7932

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

enter image description here

Upvotes: 2

runninghair08
runninghair08

Reputation: 313

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>

Upvotes: 15

Mr YI
Mr YI

Reputation: 36

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

Upvotes: 0

mg1075
mg1075

Reputation: 18155

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.

Upvotes: 4

Kamyar Gilak
Kamyar Gilak

Reputation: 1042

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

echart Example on 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>

Upvotes: 6

Related Questions