Graphique à tarte:
Environnement: Echarts 3.19 vs 2013
Méthode d'implémentation: AJAX + ASHX + JSON
Remarque: Le format requis du site officiel est [{valeur: 23, nom: 'xxxx'}] Veuillez ne pas écrire le nom de la clé incorrectement
Pour un code spécifique, veuillez regarder en bas.
<! - Veuillez citer le fichier d'abord-> <script src = "../ scripts / jQuery-1.8.2.min.js"> </ script> <script src = "../ scripts / eCharts / echarts.min.js"> </ script>
Définissez simplement une div dans la section Page
<div> <input type = "Button" id = "btNgo" value = "PIE" /> </ div> <div id = "Contanis"> </div>
Vient ensuite la partie JS. En fait, Echarts est toujours lié aux toiles de HTML5. Si vous voulez savoir, vous pouvez vérifier les informations.
$ ("# btngo"). cliquez sur (fonction () {// L'événement cliqueur est utilisé ici. Bien sûr, c'est aussi une simulation lorsque vous avez une requête conditionnelle var dom = document.getElementyid ('CONTANIS'); var MyCharts = eCharts.Init (DOM); Option = {Title: {Text: 'Department Population ratio', subtex {Trigger: 'item', formatter: "{a} <br/> {b}: {c} ({d}%)"}, légende: {orient: 'vertical', gauche: 'Left', data: []}, série: [{nom: '2012', type: 'Pie', Radius: '55% ', Centre: ['50%', '60% '] [].Ensuite, la partie Ajax. Le chargement dynamique des données est le problème fondamental. C'est tellement ennuyeux. Je vais faire ce bol de soupe de mengpo dans la prochaine vie. Je vais faire une conception d'interface utilisateur.
$ .ajax ({type: "get", async: true, // demande asynchrone (la demande synchrone verrouillera le navigateur, et d'autres opérations de l'utilisateur doivent attendre que la demande termine avant l'exécution) URL: "../handler/departmenthandler.ashx", data: {}, // Demo no conditionnel dataType: "json", // {pour (var i = 0; i <result.length; i ++) {name.push (result [i] .name);} myCharts.SetOption ({// Legit de données Légende: {data: name}, série: [{data: result}]});}, l'erreur: la fonction (ErrorSg) {// EXECTUR échoué!");}});La partie Ashx est beaucoup plus simple pour simplement sérialiser les données
Résultat dataTable = bll.department.getDeptNumber (); List <object> list = new list <object> (); foreach (datarow dr in result.rows) {// jOn the requis format pour eCharts: [{value: 335, nom: 'direct access'}] deart d = new deart (); d.value = convert.toint32 (dr ["nombre"]); // utiliser les valeurs eCharts dr ["d_name"]. toString (); list.add (d);} javascriptSerializer jss = new javascriptSerializer (); string json = jss.serialize (list); public class deart // en fait, vous n'avez pas besoin de vous définir dans la mesure où cela, afin que la valeur de celle-ci n'écrive est int {public int Value {get; ensemble; } Nom de chaîne publique {get; ensemble; }}Fixez les rendus:
Graphique à barres:
Environnement: Echarts 3.19 vs 2013
Méthode d'implémentation: AJAX + ASHX + JSON
Remarques: Le format requis du site officiel est: [5,6,7,9,34] Type de tableau
Pour un code spécifique, veuillez regarder en bas.
<! - JS Code -> <script src = "../ scripts / jQuery-1.8.2.min.js"> </ script> <script src = "../ scripts / echarts / echarts.min.js"> </ script> <div> <% --- bouton déclenche -%> <entrée = "bouton" id = "btncan" </div> <% - Déclare un div pour installer l'image dessinée par canvas -%> <div id = "contanis"> <script type = "text / javascript"> $ ("# btncanv"). cliquez sur (function () {// obtenir le dessin domvar dom = document.getElementByid ("Contistanis"); var MyChart = eCharts.Init (DOM); myChart.SetOption ({Title: {Text: 'Async Data Chargeing Exemple' // Title d'image}, TooltIp: {}, légende: {Data: ['Department Population']}, Xaxis: {Data: []}, Yaxis: {}, Series: [{name: '2015', Type: 'Bar', Données: [] // Issues vides ici pour attribuer une valeur ajax à lui}]});Les anciennes règles sont la partie Ajax:
MyChart.showloading (); // Avant le chargement des données, une simple animation de chargement s'affiche. var noms = []; // tableau de catégorie (réellement utilisé pour maintenir les valeurs de coordonnées de l'axe x) var nums = []; // Array de vente (réellement utilisé pour contenir des valeurs de coordonnée en y) $ .ajax ({type: "post", async: true, // demande asynchrone (la demande synchrone verrouille le navigateur, et d'autres opérations de l'utilisateur doivent attendre la demande à être terminée avant l'exécution) URL: "../handler/departmenthandler.ashx", // La demande est envoyée à ../handler/DepartmentHandler.ashx ", // La demande est envoyée à ../handler/Depart {}, DataType: "JSON", // RETOUR DES DONNÉES JSONCESSE: fonction (result) {// Exécuter le contenu de la fonction lorsque la demande est réussie, et le résultat est l'objet JSON renvoyé par le serveur if (result) {for (var i = 0; i <result.Length; i ++) {nom (var i = 0; i <Result.Length; i ++) {nums.push (Result [i] .Values); }]});}}, erreur: fonction (errormsg) {// Exécuter cette alerte de fonction lorsque la demande échoue ("Données de demande de caractères a échoué!");Fixez les rendus:
En fait, le paramètre d'option peut être placé dans l'Ajax et produira des effets et sera plus facile à voir.
Prenez le graphique à tarte comme exemple. Le code peut être écrit comme celui-ci
$ .ajax ({type: "get", async: true, // demande asynchrone (la demande synchrone verrouillera le navigateur, et d'autres opérations de l'utilisateur doivent attendre que la demande termine avant l'exécution) URL: "../handler/departmenthandler.ashx", data: {}, // Demo no conditionnel dataType: "json", // data forme jsonsucces: om (respect) antype: "json", // pour (var i = 0; i <result.length; i ++) {name.push (result [i] .name);} option = {title: {text: 'Department Population Ratio', sous-texte: 'Test Data', x: 'Centre'}, ToolTip: {Trigger: 'Item', Formatter: "{a} <br/> {b}: {C} ({d}%) "}, légende: {orient: 'vertical', à gauche: 'gauche', data: nom}, série: [{name: '2012', type: 'Pie', radius: '55% ', Centre: ['50%', '60% '], data: résultat, itemstyle: {empaSis: {shadowblur: 10, Shadowoffsetx: 0, {Empasis: {Shadowblur: 10, Shadowoffsetx: 0, {Empasis: {Shadowblur: 10, 10, Shadowoffsetx: 0, {Empasis: {Shadowblur 'rgba (0, 0, 0, 0,5)'}}}]};}, Erreur: fonction (errormsg) {// Exécuter l'alerte de fonction lorsque la demande échoue ("Données de demande de caractères a échoué!");Si vous voulez apprendre cela en tant que recrue qui a subi une perte, dites-vous de jeter un œil à l'exemple officiel d'abord, puis de clarifier vos idées et de commencer
Ce qui précède est la connaissance pertinente qui vous est présentée sur les graphiques couramment utilisés (non statiques) basés sur Echarts 3.19. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!