首先下載並引入echarts.js檔案

  1 function Btn_Search_12C() {
  2         var startDate = $("#startDate").val();
  3         var endDate = $("#endDate").val();
  4 
  5         if (startDate === "" || endDate === "") {
  6             alert("期之日止不能為空");
  7         } else {
  8 
  9             var myChart = echarts.init(document.getElementById('12CzhoubaoMap'));
 
 10             // 顯示標題，圖例和空的座標軸
 11             myChart.setOption({
 12                 title: {
 13                     text: '介面報錯前十柱形圖'
 14                 },
 15                 tooltip: {},
 16                 legend: {
 17                     data: [
 18                         {name: '請求量'},
 19
 
                         {name: '錯誤量'}
 20                     ]
 21                 },
 22                 xAxis: {
 23                     data: []
 24                 },
 25                 yAxis: {},
 26                 series: [{
 27                     name: '請求量',
 28                     type: 'bar',
 
 29                     data: []
 30                 }, {
 31                     name: '錯誤量',
 32                     type: 'bar',
 33                     data: []
 34                 }]
 35             });
 36             myChart.showLoading();    //資料載入完之前先顯示一段簡單的loading動畫
 37 
 38             var names = [];    //類別陣列（實際用來盛放X軸座標值）
 39             var request = [];    //銷量陣列（實際用來盛放Y座標值）
 40             var error = [];    //銷量陣列（實際用來盛放Y座標值）
 41 
 42             $.ajax({
 43                 method: "post",
 44                 url: "${pageContext.request.contextPath}/_12C/select",
 45                 data: {"startDate": startDate, "endDate": endDate},
 46                 dataType: "json", //指定反饋回來的是json資料
 47                 success: function (data) {
 48 
 49 
 50                     var servicename = new Array();
 51                     var requestcount = new Array();
 52                     var errorcount = new Array();
 53                     var i = 0;
 54 
 55                     //取出來反饋的json,迴圈賦值
 56                     $.each(data._12cdomain, function (idx, obj) {
 57                         //servicename[i] = 'FOTON_' + obj.servicename.replace(/[^\d]/g, ''); //將非數字的字母剔除
 58                         servicename[i] = obj.servicename; //將非數字的字母剔除
 59                         requestcount[i] = obj.requestcount;
 60                         errorcount[i] = obj.errorcount;
 61                         console.log(obj.errorcount);
 62                         i = i + 1;
 63                     });
 64 
 65                     for (let i = 0; i < servicename.length; i++) {
 66                         console.log(servicename[i]);
 67                         console.log(requestcount[i]);
 68                         console.log(errorcount[i]);
 69                     }
 70 
 71 
 72                     $("#tbodyrequest").empty()
 73                     $("#tbodyerror").empty()
 74                     var s = "";
 75                     for (var i = 0; i < servicename.length; i++) {
 76                         s = "<tr><td>" + servicename[i] + "</td><td>" + requestcount[i] + "</td><td>" + errorcount[i] + "</td><td>" + ((errorcount[i] / requestcount[i])*100).toFixed(2)+"%" + "</td></tr>";
 77                         $("#tbodyrequest").append(s);
 78                         $("#tbodyerror").append(s);
 79                     }
 80 
 81 
 82                     //請求成功時執行該函式內容，result即為伺服器返回的json物件
 83                     if (data) {
 84                         for (var i = 0; i < servicename.length; i++) {
 85                             names.push(servicename[i]);    //挨個取出類別並填入類別陣列
 86                             request.push(requestcount[i]);    //挨個取出銷量並填入銷量陣列
 87                             error.push(errorcount[i]);    //挨個取出銷量並填入銷量陣列
 88                         }
 89                         myChart.hideLoading();    //隱藏載入動畫
 90                         myChart.setOption({        //載入資料圖表
 91                             xAxis: {
 92                                 data: names
 93                             },
 94                             series: [{
 95                                 // 根據名字對應到相應的系列
 96                                 name: '請求量',
 97                                 type: 'bar',
 98                                 data: request
 99                             }, {
100                                 // 根據名字對應到相應的系列
101                                 name: '錯誤量',
102                                 type: 'bar',
103                                 data: error
104                             }]
105                         });
106                     }
107                 }
108             })
109         }
110 
111     }
112 </script>

 1 <div style="width: 100%;height: 300px;background: white;margin: 0 auto;padding: 10px;" id="12CzhoubaoMap">
 2 </div>
 3 
 4 
 5 <div style="width: 100%;height: auto;background: white;margin-top: 10px;padding: 10px;display: flex;flex-direction: row">
 6 
 7     <!--請求前十-->
 8     <table class="table table-bordered table-hover table-condensed" style="margin-left: 5px;">
 9         <caption>請求前十</caption>
10         <thead>
11         <tr>
12             <th>服務名</th>
13             <th>請求量</th>
14             <th>錯誤量</th>
15             <th>故障佔比</th>
16         </tr>
17         </thead>
18         <tbody id="tbodyrequest">
19 
20         </tbody>
21     </table>
22 </div>