基于Echatrs的heatmap实现告警矩阵

Echarts官网Demo链接 http://www.echartsjs.com/gallery/editor.html?c=heatmap-cartesian

在Html页面中，内容如下：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>告警矩阵</title>
 6     </head>
 7     <body style="background-color: #040A25;">
 8       <div id="ID1_1" style="width: 1196px; height:580px;float:left;border: 1px solid #3D66A1;margin:10px 0px 0px 10px;">
 9     </div>
10     </body>
11     <script type="application/javascript" src="source/jquery.js"></script>
12     <script type="text/javascript">
13             var CTX_PATH = 'http://127.0.0.1:8880/CMIVisual/';
14             $(document).ready(function(){
15                 alarmMatrixChart();
16             });
17             var globalChartAxisFontSize = 22;
18     </script>
19     <script type="application/javascript" src="source/echarts.min.js"></script>
20     <script type="application/javascript" src="source/alarmMatrix.js"></script>
21     
22 </html>

其中，引入了echarts.min.js文件以及告警矩阵对应的alarmMatrux 的JS文件

变量：

var alarmMatrixChart;
var alarmMatrixoptions;
var availabilityData = [];
var average_round_trip_timeData = [];
var packet_loss_to_destinationData = [];
var endCityObjData = [];

View Code