web-dev-qa-db-ger.com

ECharts von Baidu

Kennt jemand ein Echarts ( http://echarts.baidu.com ) Beispiel, das:

  • Verwendet nur englische Zeichen
  • Importiert alle erforderlichen Include-Dateien korrekt aus einer lokalen Verzeichnisstruktur
  • Arbeitet

Alle Echarts-Beispiele sind sehr schön dargestellt, aber es gibt keine Beispiele, die zeigen, wie sie lokal bereitgestellt werden (auf Englisch) und das (und das ist ziemlich wichtig) tatsächlich funktionieren. 

Durch meine vielen "Kopieren und Einfügen" und anschließenden Bearbeitungen bekomme ich nur endlose Dateien, die nicht überall gefunden wurden, und mysteriöse Charaktere (um ehrlich zu sein, sind sie chinesische Schriftzeichen, aber ich sehe sie nur als geheimnisvolle Kringel). Ich habe auch die Github-Sampes heruntergeladen und Google gesucht, jedoch ohne Erfolg.

Die Bibliothek sieht absolut brillant aus, aber ich kann sie nicht entziffern :(

Ein einzelnes .jsp-Seitenbeispiel auf Englisch (das funktioniert) wäre großartig. Weiß jemand wo ich einen finden kann?

Vielen Dank

12
Andrew NZ

Hier ist ein Beispiel, das einfach funktioniert. Speichern Sie es einfach in eine HTML-Datei und rendern Sie es in Ihrem Browser. Sie müssen nichts anderes herunterladen oder konfigurieren. Es verwendet eine Remote-Skriptdatei und keinen chinesischen 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>

7
Cristi S.

Ich weiß, dass es bereits eine akzeptierte Antwort gibt, aber ich dachte, ich würde einen Link für Leute hinzufügen, die diese Frage lesen.

Die neue Version der echarts-Dokumentation (echarts 3.4.0 zum Zeitpunkt des Schreibens) wurde ins Englische übersetzt. 

Sie haben alle Dokumentationen einschließlich Optionen, den API-Code, Downloads und viele Beispiele in englischer Sprache (mit einem Codepen-Entwicklungsbereich, in dem Sie Ihre Optionen testen und die Ergebnisse in Echtzeit anzeigen können).

Die Einstiegsseite finden Sie hier:
https://ecomfe.github.io/echarts-doc/public/en/

Die Bibliothek kann hier heruntergeladen werden:
https://ecomfe.github.io/echarts-doc/public/de/download.html

Das Tutorial zum Einstieg finden Sie hier:
ecomfe.github.io/echarts-doc/public/en/tutorial.html

Die Vielzahl der Optionen finden Sie hier:
ecomfe.github.io/echarts-doc/public/en/option.html

Eine Fülle von Beispielen finden Sie hier:
ecomfe.github.io/echarts-examples/public/index.html

Ein einfaches Balkendiagramm-Beispiel und dessen Spielplatz finden Sie hier: Ecomfe.github.io/echarts-examples/public/editor.html?c=bar-tick-align 

Im Folgenden habe ich ihr einfaches Balkendiagramm für Ihr Sehvergnügen in das Fenster eingefügt:

<!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>

11
runninghair08

Es gibt ein Beispiel in ihrem Github, das die Verwendung der Tabelle klar erklärt. Ich teste es einfach, es funktioniert sehr gut

echart Beispiel auf 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
Kamyar Gilak

Nur die Devs suchen immer noch nach der englischen Version von echarts, der cdn-Link unten enthält Links zur englischen Version:

https://cdnjs.com/libraries/echarts

Funktioniert gut für mich. 

4
nizantz

ECharts bietet eine englische Version ihrer Website mit Beispielen und Dokumentation an, die Sie aufgrund Ihrer Frage vermutlich nicht gesehen haben. 

https://ecomfe.github.io/echarts/index-de.html
(Zum Zeitpunkt dieser Bearbeitung müssen sie ihre englischen Dokumente auf die Version 3.0 von echarts aktualisieren).

https://ecomfe.github.io/echarts/doc/example-en.html

Abgesehen davon gibt es immer noch Zeiten, zu denen Sie wünschen, dass die gesamte .js-Datei und ihre Standardzeichenfolgen in Englisch sind. Google Translate kann jedoch helfen. 

4
mg1075

Ob sich jemand wundert. Jemand hat seine gesamten .js ins Englische übersetzt, sodass die Schaltflächen und Steuerelemente in Englisch angezeigt werden. Dieser Typ hat sie auch gebeten, seine "englische" Version auf Github zu beherrschen, aber ich denke, sie sind noch nicht interessiert.

Ich habe seine js-Datei getestet und ist auf Englisch. Dort ist auch der Link zur Zip-Datei enthalten. Nur für den Fall, dass es hier zu finden ist - Download

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

 enter image description here

1
Annjawn

Wenn jemand echarts-for-react verwendet, habe ich das folgendermaßen gelöst

toolbox: {
  show: true,
  orient: 'vertical',
  feature: {
    dataView: { show: true, title: 'Data View', readOnly: false },
    restore: { show: true, title: 'Reset' },
    saveAsImage: { show: true, title: "Download" }
  },
}

die Magie liegt in der toolbox.feature.title

0
Rahul Makhija

Die Daten werden in Chinesisch angezeigt, die Codestruktur und das Framework in Englisch.

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

0
Mr YI