Kreisdiagramm:
Umgebung: Echarts 3.19 vs 2013
Implementierungsmethode: AJAX+ASHX+JSON
Hinweis: Das erforderliche Format der offiziellen Website lautet [{Wert: 23, Name: 'xxxx'}] Bitte schreiben Sie den Namen des Schlüssels nicht falsch
Für einen bestimmten Code schauen Sie bitte nach unten.
<!-Bitte zitieren Sie die Datei First-> <script src = "../ scripts/jquery-1.8.2.min.js"> </script> <script src = "../ scripts/echarts/echarts.min.js"> </script>
Legen Sie einfach eine DIV im Bereich der Seiten ein
<div> <Eingabe type = "button" id = "btngo" value = "pie"/> </div> <div id = "contanis"> </div>
Als nächstes kommt der JS -Teil. Tatsächlich ist Echarts in HTML5 immer noch mit Leinwand zusammenhängen. Wenn Sie wissen möchten, können Sie die Informationen überprüfen.
$ ("#Btngo"). Click (function () {// Das Klickereignis wird hier verwendet. Natürlich ist dies auch eine Simulation, wenn Sie bedingte Abfrage var domd = document.getElementById ('contanis'); {trigger: 'item',formatter: "{a} <br/>{b} : {c} ({d}%)"},legend: {orient: 'vertical',left: 'left',data: []},series: [{name: '2012',type: 'pie',radius: '55%',center: ['50%', '60%'],data: [eiAls nächstes kommt der AJAX -Teil. Die dynamische Belastung von Daten ist das grundlegende Problem. Es ist so langweilig. Ich mache diese Schüssel Mengpo -Suppe im nächsten Leben. Ich werde UI -Design machen.
$ .ajax ({type: "get", async: true, // async request (synchronous request sperle den browser und andere operationen des user müssen warten, um vor der Ausführung abgeschlossen zu werden {für (var i = 0; i <result.length; i ++) {name.push (result [i] .name); fehlgeschlagen!");}});Der ASHX -Teil ist viel einfacher, um Daten einfach zu serialisieren
DataTable result = Bll.Department.getDeptNumber (); LIST <FOLGEL> LISTE = NEW LIST <FOLGEL> (); foreach (datarow dr in Ergebnis.Rows) {// das erforderliche Format für Echarts anhängen: [{value: 335, Name: 'Direktzugriff'}] Deart d = new Deart (); D. value = convert.toint32 (DR. dr ["d_name"]. toString (); list.add (d);} javaScriptSerializer JSS = New JavaScriptSerializer (); String json = jSS.Serialize (Liste); öffentliche Klasse LIEVET // Tatsächlich müssen Sie sich nicht so nicht definieren, dass der Wert von INT {public int Value {Get; Satz; } public String Name {get; Satz; }}Binden Sie die Renderings an:
Balkendiagramm:
Umgebung: Echarts 3.19 vs 2013
Implementierungsmethode: AJAX+ASHX+JSON
Anmerkungen: Das erforderliche Format der offiziellen Website lautet: [5,6,7,9,34] Array -Typ -Array -Typ
Für einen bestimmten Code schauen Sie bitte nach unten.
<!-JS Code-> <script src = "../ scripts/jQuery-1.8.2.min.js"> </script> <script src = "../ scripts/echarts/echarts.min </div> <%-deklarieren Sie eine DIV, um das von Canvas gezeichnete Bild zu installieren-%> <div id = "contanis"> <script type = "text/javaScript"> $ ("#btncanv"). click (function (function (function) {// das Zeichnung domvar document). {text: 'asynchrisches Datenladebeispiel' // Bildbezeichnung}, Tooltip: {}, Legende: {Daten: ['Abteilungsbevölkerung']}, xaxis: {data: []}, yaxis: {}, Serie: [{Name ', 2015', Typ 'type' Bar ', // kann zu einer Linie (Polyline). Es}]});Die alten Regeln sind der AJAX -Teil:
mychart.showloading (); // Bevor die Daten geladen werden, wird eine einfache Ladeanimation angezeigt. var names = []; // Kategorie-Array (tatsächlich verwendet, um X-Achse-Koordinatenwerte zu halten) var nums = []; // Verkaufsarray (tatsächlich verwendet, um Y-Koordinate-Werte zu halten) $ .ajax ({Typ: "post", async: true, // Async Request (Synchronous Anfrage sperrt den Browser und andere Vorgänge des Benutzers müssen darauf warten, dass die Anfrage vor der Ausführung abgeschlossen wird. oder (var i = 0; i <result.length; i ++) {nums.push (Ergebnis [i] .Values); }]});}}, Fehler: Funktion (ErrorMSg) {// diese Funktion alarmieren, wenn die Anforderung fehlschlägt ("Zeichenanforderungsdaten fehlgeschlagen!");Binden Sie die Renderings an:
Tatsächlich kann die Optionseinstellung in AJAX platziert werden und erzeugt Effekte und ist leichter zu erkennen.
Nehmen Sie das Kreisdiagramm als Beispiel. Der Code kann so geschrieben werden
$ .ajax ({type: "get", async: true, // async request (synchronous request sperle den browser und andere operationen des user mussten, um vor der Ausführung abgeschlossen zu werden für (var i = 0; i <result.length; i ++) {name.push (result [i] .name); . 'RGBA (0, 0, 0, 0,5)'}}}]};Wenn Sie dies als Anfänger lernen möchten, der einen Verlust erlitten hat, müssen Sie sich zuerst das offizielle Beispiel ansehen und dann Ihre Ideen klären und anfangen
Das obige ist das relevante Wissen, das Ihnen über die häufig verwendeten Grafiken (nicht statisch) auf der Grundlage von Echarts 3.19 vorgestellt wurde. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!