Gráfico circular:
Medio ambiente: Echarts 3.19 vs 2013
Método de implementación: AJAX+ASHX+JSON
Nota: El formato requerido del sitio web oficial es [{valor: 23, nombre: 'xxxx'}] No escriba el nombre de la clave incorrectamente
Para un código específico, mira hacia abajo.
<
Simplemente establezca un div en la sección de la página
<div> <input type = "button" id = "btngo" value = "pastel"/> </div> <div id = "contanis"> </div>
El siguiente es la parte JS. De hecho, Echarts todavía está relacionado con lienzos en HTML5. Si desea saber, puede verificar la información.
$ ("#btngo"). Click (function () {// El evento de clic aquí se usa aquí. Por supuesto, esta también es una simulación cuando tiene una consulta condicional var dom = document.getElementById ('contanis'); var myCharts = echarts.init (dom); opción = {título: {texto: 'Ratio de población de departamento', subtext: 'Test Data', x: 'X:' {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: {empasis: {shadowblur: 10, shadowoffsetx: 0, shadowcolor: 'rgba (0, 0, 0, 0.5)' // ¿Cómo puede ser esto .5?El siguiente es la parte Ajax. La carga dinámica de datos es el problema fundamental. Es muy aburrido. Haré este tazón de sopa de Mengpo en la próxima vida. Haré un diseño de ui.
$ .AJAX ({Tipo: "Get", Async: True, // Async Solicitud (la solicitud sincronea bloqueará el navegador, y otras operaciones del usuario deben esperar a que la solicitud complete antes de la ejecución) url: "../handler/departmentmentHandler.ashx", Data: {}, // Demo No condicionalmente DataType: "JSON", // Devoluciones de datos de regreso JSUD: {for (var i = 0; i <result.length; i ++) {name.push (resultado [i] .name); ¡fallido!");}});La parte ashx es mucho más simple para ser simplemente serializar datos
Resultado dataTable = bll.department.getDeptNumber (); List <Sect> list = new List <Sectus> (); foreach (dataRow dr en result.rows) {// Adjunte el formato requerido para Echarts: [{valor: 335, nombre: 'Acceso directo'}] Deart D = New Deart (); D.Value = Convert.Toint32 (DR ["Número"]); // Usar valores ICHART y no lo reconoce. dr ["d_name"]. toString (); list.add (d);} javaScriptSerializer jss = new JavaScriptSerializer (); String json = jss.Serialize (list); clase pública Deart // De hecho, no necesita definirse en la medida en colocar; } nombre de cadena pública {get; colocar; }}Adjunte las representaciones:
Gráfico de barras:
Medio ambiente: Echarts 3.19 vs 2013
Método de implementación: AJAX+ASHX+JSON
Notas: El formato requerido del sitio web oficial es: [5,6,7,9,34] Tipo de matriz
Para un código específico, mira hacia abajo.
< </div> <%-declare un div para instalar la imagen dibujada por Canvas-%> <div id = "contanis"> <script type = "text/javascript"> $ ("#btncanv"). click (function () {// Obtener el dibujo domvar dom = document.getElementByid ("Contanis"); var mychart = echarts.init (dom); myChart.SetOption ({Title: {Text: 'Async Data Carging Ejemplo' // Image Title}, ToolTip: {}, Legend: {Data: ['Departamento de población']}, xaxis: {data: []}, yaxis: {}, serie: {name: '2015', type: 'Bar',////a línea (puede ser cambiado a alinearse (line), Datos: [] // problemas vacíos aquí para asignarle valor ajax}]});Las viejas reglas son la parte Ajax:
mychart.showloading (); // Antes de cargar los datos, se muestra una simple animación de carga. Var nombres = []; // matriz de categoría (en realidad se usa para contener valores de coordenadas del eje X) var nums = []; // matriz de ventas (en realidad se usa para mantener valores de coordenados y) $ .AJAX ({type: "post", async: true, // async solicitud (la solicitud sincronea bloqueará el navegador, y otras operaciones del usuario deben esperar a que la solicitud se complete antes de la ejecución) URL: "../handler/DepartmentHandler.ashx", // La solicitud se envía a ../handler/DETHEMAnter/DATHETLER: DATENTER:: {}, DataType: "JSON", // Formulario de datos de retorno JSonSuccess: function (resultado) {// Ejecutar el contenido de la función cuando la solicitud es exitosa, y el resultado es el objeto JSON devuelto por el servidor if (result) {for (var i = 0; i <result.length; i ++) {nombres.push (resultado [i] .name); (var i = 0; i <result.length; i ++) {nums.push (resultado [i] .values); }]});}}, error: function (errorMsg) {// Ejecutar esta alerta de funciones cuando la solicitud falla ("¡Los datos de la solicitud de carácter fallan!");Adjunte las representaciones:
De hecho, la configuración de opción se puede colocar en AJAX y producirá efectos y será más fácil de ver.
Tome el gráfico de pasteles como ejemplo. El código se puede escribir así
$ .AJAX ({tipo: "Get", async: true, // async solicitud (la solicitud sincronea bloqueará el navegador, y otras operaciones del usuario deben esperar a que la solicitud complete antes de la ejecución) url: "../handler/departmentmenthandler.ashx", data: {}, // Demo No condicional Datatype: "JSON", // Devuelve los datos JSUCES: for (var i = 0; i <result.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, 0, 0, 0, 0, 'rgba (0, 0, 0, 0.5)'}}}]};Si desea aprender esto como un novato que ha sufrido una pérdida, dígale que eche un vistazo al ejemplo oficial primero y luego aclare sus ideas y comience
Lo anterior es el conocimiento relevante que le presentó sobre los gráficos de uso común (no estático) basados en Echarts 3.19. Espero que te sea útil. Si tiene alguna pregunta, déjame un mensaje y el editor le responderá a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!