Gráfico de pizza:
Ambiente: Echarts 3.19 vs 2013
Método de implementação: AJAX+ASHX+JSON
Nota: O formato necessário do site oficial é [{Value: 23, nome: 'xxxx'}] Por favor, não escreva o nome da chave incorretamente
Para um código específico, olhe para baixo.
<!-Por favor, cite o arquivo primeiro-> <script src = "../ scripts/jQuery-1.8.2.min.js"> </script> <script src = "../ scripts/echarts/echarts.min.js"> </script>
Basta definir uma div na seção Página
<div> <input type = "button" id = "btngo" value = "pie"/> </div> <div id = "contanis"> </div>
Em seguida é a parte JS. De fato, o ECHARTS ainda está relacionado a Canvans no HTML5. Se você quiser saber, pode verificar as informações.
$ ("#btngo"). Clique em (function () {// O evento de clique é usado aqui. É claro que isso também é uma simulação quando você tem consulta condicional var dom = document.getElementById ('contanis'); var myCharts = eCHarts.init (dom); opção = {title: {text: 'departamento Population', ratio ', Subt.init (Dom); {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: [], ItemStyle: {empase: {Shadowblur: 10, Shadowoffsetx: 0, ShadowColor: 'RGBA (0, 0, 0, 0.5)' // Como isso pode ser .5?Em seguida é a parte do Ajax. O carregamento dinâmico de dados é o problema fundamental. É tão chato. Farei esta tigela de sopa de Mengpo na próxima vida. Vou fazer um design de interface do usuário.
$ .ajax ({type: "get", assíncrono: true, // solicitação assíncrona (a solicitação síncrona bloqueará o navegador e outras operações do usuário devem aguardar a solicitação preenchida antes da execução) url: "../handler/DepartmentHandler.ashx", dados: {}, // Demo no condicional {for (var i = 0; i <resultado.Length; i ++) {name.push (resultado [i] .Name); fracassado!");}});A parte Ashx é muito mais simples de simplesmente serializar dados
Datatable resultado = bll.department.getDeptNumber (); List <jist> list = new List <Becut> (); foreach (Dataarow dr em resultado.rows) {// Anexe o formato necessário para ECHARTS: [{value: 335, nome: 'acesso direto'}] deart d = new Deart (); d.Value = convert.toint32 (dr ["número"]; dr ["d_name"]. ToString (); list.add (d);} javascriptSserializer jss = new javascriptSserializer (); string json = jss.Serialize (list); public class Deart // Na verdade, você não precisa se definir na medida em que isso, para que o valor seja lançado é int {public int vale {get; definir; } nome da string pública {get; definir; }}Anexe as renderizações:
Gráfico de barras:
Ambiente: Echarts 3.19 vs 2013
Método de implementação: AJAX+ASHX+JSON
Notas: O formato necessário do site oficial é: [5,6,7,9,34] Tipo de matriz
Para um código específico, olhe para baixo.
<!-code js-> <script src = "../ scripts/jQuery-1.8.2.min.js"> </script> <script src = "../ scripts/echarts/eccharts.min.js"> </script> <div> <%--- button "button" button "button" button "button" button "button (script> <dr) /> </div> <%-Declare uma div para instalar a imagem desenhada por Canvas-%> <div id = "contanis"> <script type = "text/javascript"> $ ("#btnccanv"). clique (functanis () {// obtenha o desenho domvar = document.getElementByid ("contanis"; ECHARTS.Init (DOM); MyChart.SeSteption ({Title: {Text: 'ASYNC Data Carreging Exemplo' // Título da imagem}, ToolTip: {}, legend: {Data: ['Departamento População']}, Xaxis: {Data: []}, Yaxis: {{}]}, [{Nome: {Data: []}, ianque Dados: [] // emitidos vazios aqui para atribuir o valor do AJAX a ele}]});As regras antigas são a parte do Ajax:
MyChart.ShowLoading (); // Antes que os dados sejam carregados, uma animação de carregamento simples é exibida. var nomes = []; // Matriz de categoria (na verdade usada para manter valores de coordenadas do eixo x) var nums = []; // Matriz de vendas (na verdade usada para manter valores de coordenadas em Y) $ .ajax ({type: "Post", assíncrono: true, // solicitação assíncrona (a solicitação síncrona bloqueará o navegador e outras operações do Usuário devem esperar que a solicitação seja concluída antes da Execution): " {}, Datatype: "JSON", // Retorne o formulário de dados JSONSUCCESS: function (resultado) {// Execute o conteúdo da função quando a solicitação é bem -sucedida, e o resultado é o objeto JSON retornado pelo servidor se (resultado) {para (var i = 0; i <resultado.length; Array} para (var i = 0; i <resultado.length; i ++) {nums.push (resultado [i] .Values); }]});}}, erro: function (errorMsg) {// Execute este alerta de função quando a solicitação falha ("Dados da solicitação de caracteres falham!");Anexe as renderizações:
De fato, a configuração da opção pode ser colocada no Ajax e produzirá efeitos e será mais fácil de ver.
Pegue o gráfico de pizza como exemplo. O código pode ser escrito assim
$ .ajax ({type: "get", assíncrono: true, // solicitação assíncrona (a solicitação síncrona bloqueará o navegador e outras operações do usuário devem aguardar a solicitação preenchida antes da execução) url: "../handler/DepartmentHandler.ashx", dados: {}, // Demo no condicional {para (var i = 0; i <resultado.Length; i ++) {name.push (resultado [i] .Name); ({d}%)"},legend: {orient: 'vertical',left: 'left',data:name},series: [{name: '2012',type: 'pie',radius: '55%',center: ['50%', '60%'],data: result,itemStyle: {empasis: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'RGBA (0, 0, 0.5)'}}}]};Se você quiser aprender isso como um novato que sofreu uma perda, peça para você dar uma olhada no exemplo oficial primeiro e depois esclarecer suas idéias e iniciar
O exposto acima é o conhecimento relevante introduzido sobre os gráficos comumente usados (não estáticos) com base no Echarts 3.19. Espero que seja útil para você. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a você a tempo. Muito obrigado pelo seu apoio ao site wulin.com!