eCharts gráficos apilados de demostración

1  < html > 
2    < cabeza > 
3      < base de href = "<% = basePath%>" > 
4      < título >堆叠柱状图</ título > 
5      < secuencia de comandos de tipo = "/ javascript texto" src = "echarts.min. js " > </ escritura > 
6    </ cabeza > 
7    < cuerpo > 
8      < div ID = "" principal estilo =" width: 600px; altura: 400px;" > </ Div >
. 9      < script tipo = "text / JavaScript" > 
10          // basado dom listo, eCharts ejemplo de inicialización 
11.          Var MYCHART = echarts.init (document.getElementById ( ' principal ' ));
 12 es          // gráfico CI y designado datos 
13 es          var Opción = {
 14              título: {
 15                  texto: ' índice de recursos ' ,
 16                  izquierda: ' 20px ' ,
 17.                  TextStyle: {    
 18 es                 Color: " # 436EEE " ,
 19.                  La fontSize: . 17 ,   
 20 es                  }
 21 es              },
 22 es              información sobre herramientas: {
 23 es                   Disparador: " Axis " ,  
 24              },
 25             // Leyenda: { 
26 se             //      itemWidth: 15,   
27             //      ItemHeight: 15 ,   
28            //       datos: [ 'disponible', 'no disponible'], 
29            //   }, 
30             XAXIS: {
 31 es                Datos: [ " dispositivo de red " , " servidor " , " aplicación " , " otros " , " máquina virtual " , " almacenamiento " ],
 32                SplitLine: {
 33 es                      Mostrar: a falso ,
 34 es                 },
 35             },
 36              eje Y: {
 37 [                   SplitLine: {
 38 es                      Mostrar: false ,
 39                  },
40              },
 41 es              de la serie: [{
 42 es                  nombre: ' Disponible ' ,
 43 es                  de tipo: ' bar ' ,
 44 es                  Stack: '1 ' , // Los datos de parámetros de apilado 45                 de datos: [ 5. , 20 es , 36 , 10 , 10 , 20 es ],
 46 es                 ItemStyle: {
 47                      normal: {color: " # FF8849 "
   },
 48                  }
 49              }, {
 50                  nombre: ' no disponible ' ,
 51 es                  de tipo: ' bar ' ,
 52 es                  Stack: ' 1. ' , // Los datos de parámetros de apilado 
53 es                  de datos: [ 40 , 22 es , 18 es , 35 , 42 es , 40 ],
 54 es                  ItemStyle: {
 55                       normal: {color: " # 3FBB49" }
 56                  }
 57              }]
 58          };
 59          // uso justo especificado elementos de datos de configuración y mostrar el gráfico. 
60          myChart.setOption (Opción);
 61 es      </ script > 
62 es    </ cuerpo > 
63 es  </ HTML > 

representaciones :

 

 

descargar https://files.cnblogs.com/files/jsliao/echarts%E5%A0%86%E7%A7%AF%E5%9B%BEdemo.rar