echarts stacked charts demo

 1 <html>
 2   <head>
 3     <base href="<%=basePath%>">
 4     <title>堆叠柱状图</title>
 5     <script type="text/javascript" src="echarts.min.js"></script>
 6   </head>
 7   <body>
 8     <div id="main" style="width: 600px;height:400px;"></div>
. 9      < Script type = "text / JavaScript" > 
10          // based ready dom, instance initialization echarts 
. 11          var myChart = echarts.init (document.getElementById ( ' main ' ));
 12 is          // CI graph and designated data 
13 is          var Option = {
 14              title: {
 15                  text: ' resource Index ' ,
 16                  left: ' 20px ' ,
 . 17                  textStyle: {    
 18 is                 Color: " # 436EEE " ,
 . 19                  the fontSize: . 17 ,   
 20 is                  }
 21 is              },
 22 is              ToolTip: {
 23 is                   Trigger: " Axis " ,  
 24              },
 25             // Legend: { 
26 is             //      itemWidth: 15,   
27             //      itemHeight: 15 ,   
28            //       Data: [ 'available', 'unavailable'], 
29            //   }, 
30             XAXIS: {
 31 is                Data: [ " network device " , " server " , " application " , " others " , " virtual machine " , " storage " ],
 32                SplitLine: {
 33 is                      Show: to false ,
 34 is                 },
 35             },
 36              YAXIS: {
 37 [                   SplitLine: {
 38 is                      Show: to false ,
 39                  },
40              },
 41 is              Series: [{
 42 is                  name: ' Available ' ,
 43 is                  type: ' bar ' ,
 44 is                  Stack: ' . 1 ' , // The parameter stacked data 
45                  Data: [ . 5 , 20 is , 36 , 10 , 10 , 20 is ],
 46 is                  ItemStyle: {
 47                       Normal: {Color: " # FF8849 "},
 48                  }
 49              }, {
 50                  name: ' unavailable ' ,
 51 is                  type: ' bar ' ,
 52 is                  Stack: ' . 1 ' , // The parameter stacked data 
53 is                  Data: [ 40 , 22 is , 18 is , 35 , 42 is , 40 ],
 54 is                  ItemStyle: {
 55                       Normal: {Color: " # 3FBB49" }
 56                  }
 57              }]
 58          };
 59          // use just specified configuration data items and display the chart. 
60          myChart.setOption (Option);
 61 is      </ Script > 
62 is    </ body > 
63 is  </ HTML > 

renderings :


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

echarts stacked charts demo

Guess you like