基于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

visualMap函数1：

 1 var availabilityDataThreshold={
 2         show:false,
 3         showLabel:false,
 4         type: 'piecewise',
 5         splitNumber: 2,
 6         pieces: [{
 7             //lt（小于，little than），gt（大于，greater than）
 8             //lte（小于等于 lettle than or equals），gte（大于等于，greater than or equals）
 9                 gt: 0,
10                 lte: 99,
11                 color: 'rgba(255,51,51,0.7)', //红色 一定要带透明度,否则背景的网格看不出来
12                 //symbol:'pin',
13                 //symbolSize:'10'
14                 //opacity:100
15                 //colorAlpha:10
16             }, // 不指定 min，表示 min 为无限大（-Infinity）。
17             {
18                 gt: 99,
19                 lte: 99.9,
20                 color: 'rgba(211, 200, 64,0.7)', //红色 一定要带透明度,否则背景的网格看不出来
21                 //symbol:'pin',
22                 //symbolSize:'10'
23                 //opacity:100
24                 //colorAlpha:10
25             }, // 不指定 min，表示 min 为无限大（-Infinity）。
26             {
27                 gt: 99.9,
28                 lte: 100,
29                 //color:'rgba(204,204,153,0.4)',//一定要带透明度,否则背景的网格看不出来
30                 color: 'rgba(56, 206, 239,0.4)',
31                 //opacity:100
32                 //colorAlpha:0.5
33             }     // 不指定 min，表示 min 为无限大（-Infinity）。
34         ],
35 
36         dimension: 2,
37         /*指定用数据的『哪个维度』，映射到视觉元素上。『数据』即 series.data。 可以把 series.data 理解成一个二维数组，例如：
38         [
39             [12, 23, 43],
40             [12, 23, 43],
41             [43, 545, 65],
42             [92, 23, 33]
43         ]
44         其中每个列是一个维度，即 dimension。 例如 dimension 为 1 时，取第二列（即 23，23，545，23），映射到视觉元素上。
45         默认取 data 中最后一个维度。*/
46         //min: 0,
47         // max: 100,
48         //itemWidth: '20',
49         //itemHeight: '20',
50         align: 'left',
51         show: true,
52         //calculable: true,
53         orient: 'horizontal', //'vertical'  horizontal
54         left: 'right', //center   
55         top: 'top',
56     };
availabilityDataThreshold

visualMap函数2：

 1 var average_round_trip_timeThreshold={
 2         show:false,
 3         showLabel:false,
 4         type: 'piecewise',
 5         splitNumber: 2,
 6         pieces: [{
 7                 gt: 0,
 8                 lte: 99,
 9                 color: 'rgba(255,51,51,0.7)', //红色 一定要带透明度,否则背景的网格看不出来
10                 //symbol:'pin',
11                 //symbolSize:'10'
12                 //opacity:100
13                 //colorAlpha:10
14             }, // 不指定 min，表示 min 为无限大（-Infinity）。
15             {
16                 gt: 99,
17                 lte: 99.9,
18                 color: 'rgba(211, 200, 64,0.7)', //红色 一定要带透明度,否则背景的网格看不出来
19                 //symbol:'pin',
20                 //symbolSize:'10'
21                 //opacity:100
22                 //colorAlpha:10
23             }, // 不指定 min，表示 min 为无限大（-Infinity）。
24             {
25                 gt: 99.9,
26                 lte: 100,
27                 //color:'rgba(204,204,153,0.4)',//一定要带透明度,否则背景的网格看不出来
28                 color: 'rgba(56, 206, 239,0.4)',
29                 //opacity:100
30                 //colorAlpha:0.5
31             }     // 不指定 min，表示 min 为无限大（-Infinity）。
32         ],
33 
34         dimension: 2,
35         //min: 0,
36         // max: 100,
37         //itemWidth: '20',
38         //itemHeight: '20',
39         align: 'left',
40         show: true,
41         //calculable: true,
42         orient: 'horizontal', //'vertical'  horizontal
43         left: 'right', //center   
44         top: 'top',
45     };
average_round_trip_timeThreshold

visualMap函数3：

 1 var packet_loss_to_destinationThreshold={
 2         show:false,
 3         showLabel:false,
 4         type: 'piecewise',
 5         splitNumber: 2,
 6         pieces: [{
 7                 gt: 0,
 8                 lte: 99,
 9                 color: 'rgba(255,51,51,0.7)', //红色 一定要带透明度,否则背景的网格看不出来
10                 //symbol:'pin',
11                 //symbolSize:'10'
12                 //opacity:100
13                 //colorAlpha:10
14             }, // 不指定 min，表示 min 为无限大（-Infinity）。
15             {
16                 gt: 99,
17                 lte: 99.9,
18                 color: 'rgba(211, 200, 64,0.7)', //红色 一定要带透明度,否则背景的网格看不出来
19                 //symbol:'pin',
20                 //symbolSize:'10'
21                 //opacity:100
22                 //colorAlpha:10
23             }, // 不指定 min，表示 min 为无限大（-Infinity）。
24             {
25                 gt: 99.9,
26                 lte: 100,
27                 //color:'rgba(204,204,153,0.4)',//一定要带透明度,否则背景的网格看不出来
28                 color: 'rgba(56, 206, 239,0.4)',
29                 //opacity:100
30                 //colorAlpha:0.5
31             }     // 不指定 min，表示 min 为无限大（-Infinity）。
32         ],
33 
34         dimension: 2,
35         //min: 0,
36         // max: 100,
37         //itemWidth: '20',
38         //itemHeight: '20',
39         align: 'left',
40         show: true,
41         //calculable: true,
42         orient: 'horizontal', //'vertical'  horizontal
43         left: 'right', //center   
44         top: 'top',
45     };
packet_loss_to_destinationThreshold

初始化函数：

  1 function initAlarmMatrixChart() {// 三号区域 GSM 柱线图
  2     // var ProcessDetails =
  3     // [[72,73,75,78,85,80,73],[11.250,11.300,7.250,6.250,11.300,5.625,6.250],[7.500,8.000,7.000,5.000,8.125,5.000,5.100]];
  4     alarmMatrixChart = echarts.init($("#ID1_1")[0]);
  5     // 指定图表的配置项和数据
  6     alarmMatrixoptions = [{
  7         baseOption: {
  8             //timeline 组件，提供了在多个 ECharts option 间进行切换、播放等操作的功能。
  9             timeline: {
 10                 show:false,//是否显示 timeline 组件
 11                 // y: 0,
 12                 axisType: 'category',
 13                 //'value' 数值轴，适用于连续数据。
 14                 //'category' 类目轴，适用于离散的类目数据。
 15                 //'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，
 16                 realtime: true,//拖动圆点的时候，是否实时更新视图。
 17                 x: '5%',
 18                 x2: '5%',
 19                 loop: false,//是否循环
 20                 autoPlay: true,//是否自动播放
 21                 // currentIndex: 2,
 22                 playInterval: 3000,//播放时间间隔
 23                 controlStyle: {
 24                     position: 'left'//控制按钮的样式
 25                 },
 26                 //type: 'number',
 27                 height: '30',
 28                 symbol: 'circle',
 29                 symbolSize: '8',
 30                 lineStyle: {
 31                     // show: false,
 32                     width: 1
 33                 },
 34                 padding: [
 35                     0, // 上
 36                     0, // 右
 37                     0, // 下
 38                     0, // 左
 39                 ],
 40                 data: ['0点', '1点', '2点', '3点', '4点', '5点', '7点', '8点',
 41                     '9点', '10点', '11点', '12点', '13点', '14点', '15点',
 42                     '16点', '17点', '18点', '19点', '20点', '21点', '22点',
 43                     '23点'
 44                 ]//此处的data是显示在时间轴上的
 45             },
 46             title: {
 47                 text: '',
 48                 subtext: ''
 49             },
 50             tooltip: {
 51                 //position: 'top',
 52                 /*axisPointer: { // 坐标轴指示器，坐标轴触发有效
 53                     type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
 54                 },*/
 55                 trigger: 'item',//触发类型 
 56                 //'item' 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
 57                 formatter: function(params, ticket, callback) {
 58                     var ch = params.value[3]; //频道名称
 59                     return ch;
 60                 },
 61                 axisPointer: {
 62                     show: false,
 63                     type: 'shadow' //shadow  cross line
 64                 },
 65                 backgroundColor: 'rgba(245, 245, 245, 0.1)',
 66                 borderWidth: 1,
 67                 borderColor: '#ccc',
 68                 padding: 10,
 69                 textStyle: {
 70                     color: '#000'
 71                 },
 72             },
 73             animation: false,
 74             grid: {
 75                 //height: '50%',
 76                 y: '0',
 77                 y2: '0',
 78                 x: '0',
 79                 x2: '0',
 80                 top:30,
 81                 right:90
 82             },
 83             xAxis: {
 84                 type: 'category',
 85                 data: {},
 86                 position: 'top',
 87                 axisLabel : {
 88                     formatter : '{value}',
 89                     textStyle : {
 90                         color : '#FFFFFF',
 91                         fontSize : globalChartAxisFontSize-7
 92                     }
 93                 },
 94                 splitArea: {
 95                     show: true
 96                 },
 97                 axisTick: {
 98                     inside: true
 99                 }
100             },
101             yAxis: {
102                 inverse: true,
103                 type: 'category',
104                 data: {},
105                 position: 'right',
106                 axisLabel : {
107                     formatter : '{value}',
108                     textStyle : {
109                         color : '#FFFFFF',
110                         fontSize : globalChartAxisFontSize-7
111                     }
112                 },
113                 splitArea: {
114                     show: true
115                 },
116                 axisTick: {
117                     inside: true
118                 }
119             },
120             legend: {
121                 show:false,
122                 orient: 'vertical',
123                 x: 'right',
124                 data: ['质差', '良好']
125             },
126             visualMap: availabilityDataThreshold,
127             series: [{
128                 name: 'channel',
129                 type: 'heatmap',
130                 data: [],
131                 label: {
132                     normal: {
133                         show: false, //是否显示叉叉
134                             textStyle : {
135                             color : '#FFFFFF',
136                             fontSize : 10//globalChartAxisFontSize
137                         },
138                         formatter: function(v) {
139                             //显示内容
140                             return v.value[3];
141 
142                         }
143                     }
144                 },
145                 itemStyle: {
146                     emphasis: {
147                         shadowBlur: 10,
148                         shadowColor: 'rgba(0, 0, 0, 0.5)'
149                     }
150                 }
151             }]
152         },
153         options: []
154     }];
155     // 使用刚指定的配置项和数据显示图表。
156 }
initAlarmMatrixChart

数据加载函数：

 1 function alarmMatrixChart() {// 三号区域 GSM 柱线图
 2     if(alarmMatrixoptions == null){
 3         initAlarmMatrixChart();
 4     }
 5     $.ajax({
 6         cache : false,
 7         type : "POST",
 8         url : CTX_PATH + "getMatrixData_alr.do",
 9         dataType : "json",
10         data : {},
11         success : function(data) {
12             var relsultList = data.relsultList;
13             var startCitys = data.startCitys;
14             var endCitys = data.endCitys;
15             
16             for(var x=0;x<startCitys.length;x++){
17                 var startCityname = startCitys[x];
18                 var startCity;
19                 for(var r=0;r<relsultList.length;r++){
20                     if(startCityname in relsultList[r]){
21                         startCity =  relsultList[r];
22                         break;
23                     }
24                 }
25                 for(var y=0;y<endCitys.length;y++){
26                     var endCityName = endCitys[y];
27                     var findEndCity = false;
28                     for(var e=0;e<startCity[startCityname].length;e++){
29                         if(endCityName in startCity[startCityname][e]){
30                             var endCityObj = startCity[startCityname][e][endCityName];
31                             findEndCity = true;
32                             availabilityData.push([x,
33                                           y,
34                                           parseFloat(endCityObj.availability),
35                                           "\nAVL:"+endCityObj.availability+"%"
36                                 ]);
37                             average_round_trip_timeData.push([x,
38                                           y,
39                                           parseFloat(endCityObj.average_round_trip_time),
40                                           "\nARTT:"+endCityObj.average_round_trip_time+"ms"
41                                 ]);
42                             packet_loss_to_destinationData.push([x,
43                                           y,
44                                           parseInt(endCityObj.packet_loss_to_destination),
45                                           "\nPLTD:"+endCityObj.packet_loss_to_destination
46                                 ]);
47                             break;
48                         }
49                     }
50                     if(!findEndCity){
51                         availabilityData.push([x,y,100,""]);
52                         average_round_trip_timeData.push([x,y,100,""]);
53                         packet_loss_to_destinationData.push([x,y,100,""]);
54                     }
55                 }
56             }
57             
58             alarmMatrixoptions[0].baseOption.xAxis.data = startCitys;
59             alarmMatrixoptions[0].baseOption.yAxis.data = endCitys;
60             alarmMatrixoptions[0].baseOption.series[0].data = availabilityData;
61             
62             alarmMatrixChart.setOption(alarmMatrixoptions[0]);
63         },
64         complete : function(XHR, TS) {
65             XHR = null;
66         }
67     });
68      $("#MatrixAVL").click(function(){
69            availability();
70            removeclickbutton();
71            $(this).addClass("Matrixactive");
72       });
73          $("#MatrixARTT").click(function(){
74            average_round_trip_time();
75            removeclickbutton();
76             $(this).addClass("Matrixactive");
77     });
78        $("#MatrixPLTD").click(function(){
79            packet_loss_to_destination();
80            removeclickbutton();
81            $(this).addClass("Matrixactive");
82      });
83 }
alarmMatrixChart

相应的点击处理函数：

 1 function removeclickbutton(){
 2      $("#MatrixAVL").removeClass("Matrixactive");
 3      $("#MatrixARTT").removeClass("Matrixactive");
 4      $("#MatrixPLTD").removeClass("Matrixactive");
 5  }
 6 function availability(){
 7     alarmMatrixoptions[0].baseOption.visualMap = availabilityDataThreshold;
 8     alarmMatrixoptions[0].baseOption.series[0].data = availabilityData;
 9     alarmMatrixChart.setOption(alarmMatrixoptions[0]);
10 }
11 function average_round_trip_time(){
12     alarmMatrixoptions[0].baseOption.visualMap = average_round_trip_timeThreshold;
13     alarmMatrixoptions[0].baseOption.series[0].data = average_round_trip_timeData;
14     alarmMatrixChart.setOption(alarmMatrixoptions[0]);
15 }
16 function packet_loss_to_destination(){
17     alarmMatrixoptions[0].baseOption.visualMap = packet_loss_to_destinationThreshold;
18     alarmMatrixoptions[0].baseOption.series[0].data = packet_loss_to_destinationData;
19     alarmMatrixChart.setOption(alarmMatrixoptions[0]);
20 }
click

--->alarmMatrix.js文件以上的汇总：

  1 var alarmMatrixChart;
  2 var alarmMatrixoptions;
  3 var availabilityData = [];
  4 var average_round_trip_timeData = [];
  5 var packet_loss_to_destinationData = [];
  6 var endCityObjData = [];
  7 
  8 var availabilityDataThreshold={
  9         show:false,
 10         showLabel:false,
 11         type: 'piecewise',
 12         splitNumber: 2,
 13         pieces: [{
 14             //lt（小于，little than），gt（大于，greater than）
 15             //lte（小于等于 lettle than or equals），gte（大于等于，greater than or equals）
 16                 gt: 0,
 17                 lte: 99,
 18                 color: 'rgba(255,51,51,0.7)', //红色 一定要带透明度,否则背景的网格看不出来
 19                 //symbol:'pin',
 20                 //symbolSize:'10'
 21                 //opacity:100
 22                 //colorAlpha:10
 23             }, // 不指定 min，表示 min 为无限大（-Infinity）。
 24             {
 25                 gt: 99,
 26                 lte: 99.9,
 27                 color: 'rgba(211, 200, 64,0.7)', //红色 一定要带透明度,否则背景的网格看不出来
 28                 //symbol:'pin',
 29                 //symbolSize:'10'
 30                 //opacity:100
 31                 //colorAlpha:10
 32             }, // 不指定 min，表示 min 为无限大（-Infinity）。
 33             {
 34                 gt: 99.9,
 35                 lte: 100,
 36                 //color:'rgba(204,204,153,0.4)',//一定要带透明度,否则背景的网格看不出来
 37                 color: 'rgba(56, 206, 239,0.4)',
 38                 //opacity:100
 39                 //colorAlpha:0.5
 40             }     // 不指定 min，表示 min 为无限大（-Infinity）。
 41         ],
 42 
 43         dimension: 2,
 44         /*指定用数据的『哪个维度』，映射到视觉元素上。『数据』即 series.data。 可以把 series.data 理解成一个二维数组，例如：
 45         [
 46             [12, 23, 43],
 47             [12, 23, 43],
 48             [43, 545, 65],
 49             [92, 23, 33]
 50         ]
 51         其中每个列是一个维度，即 dimension。 例如 dimension 为 1 时，取第二列（即 23，23，545，23），映射到视觉元素上。
 52         默认取 data 中最后一个维度。*/
 53         //min: 0,
 54         // max: 100,
 55         //itemWidth: '20',
 56         //itemHeight: '20',
 57         align: 'left',
 58         show: true,
 59         //calculable: true,
 60         orient: 'horizontal', //'vertical'  horizontal
 61         left: 'right', //center   
 62         top: 'top',
 63     };
 64 
 65 var average_round_trip_timeThreshold={
 66         show:false,
 67         showLabel:false,
 68         type: 'piecewise',
 69         splitNumber: 2,
 70         pieces: [{
 71                 gt: 0,
 72                 lte: 99,
 73                 color: 'rgba(255,51,51,0.7)', //红色 一定要带透明度,否则背景的网格看不出来
 74                 //symbol:'pin',
 75                 //symbolSize:'10'
 76                 //opacity:100
 77                 //colorAlpha:10
 78             }, // 不指定 min，表示 min 为无限大（-Infinity）。
 79             {
 80                 gt: 99,
 81                 lte: 99.9,
 82                 color: 'rgba(211, 200, 64,0.7)', //红色 一定要带透明度,否则背景的网格看不出来
 83                 //symbol:'pin',
 84                 //symbolSize:'10'
 85                 //opacity:100
 86                 //colorAlpha:10
 87             }, // 不指定 min，表示 min 为无限大（-Infinity）。
 88             {
 89                 gt: 99.9,
 90                 lte: 100,
 91                 //color:'rgba(204,204,153,0.4)',//一定要带透明度,否则背景的网格看不出来
 92                 color: 'rgba(56, 206, 239,0.4)',
 93                 //opacity:100
 94                 //colorAlpha:0.5
 95             }     // 不指定 min，表示 min 为无限大（-Infinity）。
 96         ],
 97 
 98         dimension: 2,
 99         //min: 0,
100         // max: 100,
101         //itemWidth: '20',
102         //itemHeight: '20',
103         align: 'left',
104         show: true,
105         //calculable: true,
106         orient: 'horizontal', //'vertical'  horizontal
107         left: 'right', //center   
108         top: 'top',
109     };
110 
111 var packet_loss_to_destinationThreshold={
112         show:false,
113         showLabel:false,
114         type: 'piecewise',
115         splitNumber: 2,
116         pieces: [{
117                 gt: 0,
118                 lte: 99,
119                 color: 'rgba(255,51,51,0.7)', //红色 一定要带透明度,否则背景的网格看不出来
120                 //symbol:'pin',
121                 //symbolSize:'10'
122                 //opacity:100
123                 //colorAlpha:10
124             }, // 不指定 min，表示 min 为无限大（-Infinity）。
125             {
126                 gt: 99,
127                 lte: 99.9,
128                 color: 'rgba(211, 200, 64,0.7)', //红色 一定要带透明度,否则背景的网格看不出来
129                 //symbol:'pin',
130                 //symbolSize:'10'
131                 //opacity:100
132                 //colorAlpha:10
133             }, // 不指定 min，表示 min 为无限大（-Infinity）。
134             {
135                 gt: 99.9,
136                 lte: 100,
137                 //color:'rgba(204,204,153,0.4)',//一定要带透明度,否则背景的网格看不出来
138                 color: 'rgba(56, 206, 239,0.4)',
139                 //opacity:100
140                 //colorAlpha:0.5
141             }     // 不指定 min，表示 min 为无限大（-Infinity）。
142         ],
143 
144         dimension: 2,
145         //min: 0,
146         // max: 100,
147         //itemWidth: '20',
148         //itemHeight: '20',
149         align: 'left',
150         show: true,
151         //calculable: true,
152         orient: 'horizontal', //'vertical'  horizontal
153         left: 'right', //center   
154         top: 'top',
155     };
156 
157 
158 function initAlarmMatrixChart() {// 三号区域 GSM 柱线图
159     // var ProcessDetails =
160     // [[72,73,75,78,85,80,73],[11.250,11.300,7.250,6.250,11.300,5.625,6.250],[7.500,8.000,7.000,5.000,8.125,5.000,5.100]];
161     alarmMatrixChart = echarts.init($("#ID1_1")[0]);
162     // 指定图表的配置项和数据
163     alarmMatrixoptions = [{
164         baseOption: {
165             //timeline 组件，提供了在多个 ECharts option 间进行切换、播放等操作的功能。
166             timeline: {
167                 show:false,//是否显示 timeline 组件
168                 // y: 0,
169                 axisType: 'category',
170                 //'value' 数值轴，适用于连续数据。
171                 //'category' 类目轴，适用于离散的类目数据。
172                 //'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，
173                 realtime: true,//拖动圆点的时候，是否实时更新视图。
174                 x: '5%',
175                 x2: '5%',
176                 loop: false,//是否循环
177                 autoPlay: true,//是否自动播放
178                 // currentIndex: 2,
179                 playInterval: 3000,//播放时间间隔
180                 controlStyle: {
181                     position: 'left'//控制按钮的样式
182                 },
183                 //type: 'number',
184                 height: '30',
185                 symbol: 'circle',
186                 symbolSize: '8',
187                 lineStyle: {
188                     // show: false,
189                     width: 1
190                 },
191                 padding: [
192                     0, // 上
193                     0, // 右
194                     0, // 下
195                     0, // 左
196                 ],
197                 data: ['0点', '1点', '2点', '3点', '4点', '5点', '7点', '8点',
198                     '9点', '10点', '11点', '12点', '13点', '14点', '15点',
199                     '16点', '17点', '18点', '19点', '20点', '21点', '22点',
200                     '23点'
201                 ]//此处的data是显示在时间轴上的
202             },
203             title: {
204                 text: '',
205                 subtext: ''
206             },
207             tooltip: {
208                 //position: 'top',
209                 /*axisPointer: { // 坐标轴指示器，坐标轴触发有效
210                     type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
211                 },*/
212                 trigger: 'item',//触发类型 
213                 //'item' 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
214                 formatter: function(params, ticket, callback) {
215                     var ch = params.value[3]; //频道名称
216                     return ch;
217                 },
218                 axisPointer: {
219                     show: false,
220                     type: 'shadow' //shadow  cross line
221                 },
222                 backgroundColor: 'rgba(245, 245, 245, 0.1)',
223                 borderWidth: 1,
224                 borderColor: '#ccc',
225                 padding: 10,
226                 textStyle: {
227                     color: '#000'
228                 },
229             },
230             animation: false,
231             grid: {
232                 //height: '50%',
233                 y: '0',
234                 y2: '0',
235                 x: '0',
236                 x2: '0',
237                 top:30,
238                 right:90
239             },
240             xAxis: {
241                 type: 'category',
242                 data: {},
243                 position: 'top',
244                 axisLabel : {
245                     formatter : '{value}',
246                     textStyle : {
247                         color : '#FFFFFF',
248                         fontSize : globalChartAxisFontSize-7
249                     }
250                 },
251                 splitArea: {
252                     show: true
253                 },
254                 axisTick: {
255                     inside: true
256                 }
257             },
258             yAxis: {
259                 inverse: true,
260                 type: 'category',
261                 data: {},
262                 position: 'right',
263                 axisLabel : {
264                     formatter : '{value}',
265                     textStyle : {
266                         color : '#FFFFFF',
267                         fontSize : globalChartAxisFontSize-7
268                     }
269                 },
270                 splitArea: {
271                     show: true
272                 },
273                 axisTick: {
274                     inside: true
275                 }
276             },
277             legend: {
278                 show:false,
279                 orient: 'vertical',
280                 x: 'right',
281                 data: ['质差', '良好']
282             },
283             visualMap: availabilityDataThreshold,
284             series: [{
285                 name: 'channel',
286                 type: 'heatmap',
287                 data: [],
288                 label: {
289                     normal: {
290                         show: false, //是否显示叉叉
291                             textStyle : {
292                             color : '#FFFFFF',
293                             fontSize : 10//globalChartAxisFontSize
294                         },
295                         formatter: function(v) {
296                             //显示内容
297                             return v.value[3];
298 
299                         }
300                     }
301                 },
302                 itemStyle: {
303                     emphasis: {
304                         shadowBlur: 10,
305                         shadowColor: 'rgba(0, 0, 0, 0.5)'
306                     }
307                 }
308             }]
309         },
310         options: []
311     }];
312     // 使用刚指定的配置项和数据显示图表。
313 }
314 
315 
316 function alarmMatrixChart() {// 三号区域 GSM 柱线图
317     if(alarmMatrixoptions == null){
318         initAlarmMatrixChart();
319     }
320     $.ajax({
321         cache : false,
322         type : "POST",
323         url : CTX_PATH + "getMatrixData_alr.do",
324         dataType : "json",
325         data : {},
326         success : function(data) {
327             var relsultList = data.relsultList;
328             var startCitys = data.startCitys;
329             var endCitys = data.endCitys;
330             
331             for(var x=0;x<startCitys.length;x++){
332                 var startCityname = startCitys[x];
333                 var startCity;
334                 for(var r=0;r<relsultList.length;r++){
335                     if(startCityname in relsultList[r]){
336                         startCity =  relsultList[r];
337                         break;
338                     }
339                 }
340                 for(var y=0;y<endCitys.length;y++){
341                     var endCityName = endCitys[y];
342                     var findEndCity = false;
343                     for(var e=0;e<startCity[startCityname].length;e++){
344                         if(endCityName in startCity[startCityname][e]){
345                             var endCityObj = startCity[startCityname][e][endCityName];
346                             findEndCity = true;
347                             availabilityData.push([x,
348                                           y,
349                                           parseFloat(endCityObj.availability),
350                                           "\nAVL:"+endCityObj.availability+"%"
351                                 ]);
352                             average_round_trip_timeData.push([x,
353                                           y,
354                                           parseFloat(endCityObj.average_round_trip_time),
355                                           "\nARTT:"+endCityObj.average_round_trip_time+"ms"
356                                 ]);
357                             packet_loss_to_destinationData.push([x,
358                                           y,
359                                           parseInt(endCityObj.packet_loss_to_destination),
360                                           "\nPLTD:"+endCityObj.packet_loss_to_destination
361                                 ]);
362                             break;
363                         }
364                     }
365                     if(!findEndCity){
366                         availabilityData.push([x,y,100,""]);
367                         average_round_trip_timeData.push([x,y,100,""]);
368                         packet_loss_to_destinationData.push([x,y,100,""]);
369                     }
370                 }
371             }
372             
373             alarmMatrixoptions[0].baseOption.xAxis.data = startCitys;
374             alarmMatrixoptions[0].baseOption.yAxis.data = endCitys;
375             alarmMatrixoptions[0].baseOption.series[0].data = availabilityData;
376             
377             alarmMatrixChart.setOption(alarmMatrixoptions[0]);
378         },
379         complete : function(XHR, TS) {
380             XHR = null;
381         }
382     });
383      $("#MatrixAVL").click(function(){
384            availability();
385            removeclickbutton();
386            $(this).addClass("Matrixactive");
387       });
388          $("#MatrixARTT").click(function(){
389            average_round_trip_time();
390            removeclickbutton();
391             $(this).addClass("Matrixactive");
392     });
393        $("#MatrixPLTD").click(function(){
394            packet_loss_to_destination();
395            removeclickbutton();
396            $(this).addClass("Matrixactive");
397      });
398 }
399 function removeclickbutton(){
400      $("#MatrixAVL").removeClass("Matrixactive");
401      $("#MatrixARTT").removeClass("Matrixactive");
402      $("#MatrixPLTD").removeClass("Matrixactive");
403  }
404 function availability(){
405     alarmMatrixoptions[0].baseOption.visualMap = availabilityDataThreshold;
406     alarmMatrixoptions[0].baseOption.series[0].data = availabilityData;
407     alarmMatrixChart.setOption(alarmMatrixoptions[0]);
408 }
409 function average_round_trip_time(){
410     alarmMatrixoptions[0].baseOption.visualMap = average_round_trip_timeThreshold;
411     alarmMatrixoptions[0].baseOption.series[0].data = average_round_trip_timeData;
412     alarmMatrixChart.setOption(alarmMatrixoptions[0]);
413 }
414 function packet_loss_to_destination(){
415     alarmMatrixoptions[0].baseOption.visualMap = packet_loss_to_destinationThreshold;
416     alarmMatrixoptions[0].baseOption.series[0].data = packet_loss_to_destinationData;
417     alarmMatrixChart.setOption(alarmMatrixoptions[0]);
418 }
alarmMatrix.js

 在上述的初始化函数中，展示了timeline的使用情况，就实现告警矩阵而言，完全可以去除这部分，去除后如下所示：

  1 function initAlarmMatrixChart() {// 三号区域 GSM 柱线图
  2     // var ProcessDetails =
  3     // [[72,73,75,78,85,80,73],[11.250,11.300,7.250,6.250,11.300,5.625,6.250],[7.500,8.000,7.000,5.000,8.125,5.000,5.100]];
  4     alarmMatrixChart = echarts.init($("#ID1_1")[0]);
  5     // 指定图表的配置项和数据
  6     alarmMatrixoptions = [{
  7         baseOption: {
  8             title: {
  9                 text: '',
 10                 subtext: ''
 11             },
 12             tooltip: {
 13                 //position: 'top',
 14                 /*axisPointer: { // 坐标轴指示器，坐标轴触发有效
 15                     type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
 16                 },*/
 17                 trigger: 'item',//触发类型 
 18                 //'item' 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
 19                 formatter: function(params, ticket, callback) {
 20                     var ch = params.value[3]; //频道名称
 21                     return ch;
 22                 },
 23                 axisPointer: {
 24                     show: false,
 25                     type: 'shadow' //shadow  cross line
 26                 },
 27                 backgroundColor: 'rgba(245, 245, 245, 0.1)',
 28                 borderWidth: 1,
 29                 borderColor: '#ccc',
 30                 padding: 10,
 31                 textStyle: {
 32                     color: '#000'
 33                 },
 34             },
 35             animation: false,
 36             grid: {
 37                 //height: '50%',
 38                 y: '0',
 39                 y2: '0',
 40                 x: '0',
 41                 x2: '0',
 42                 top:30,
 43                 right:90
 44             },
 45             xAxis: {
 46                 type: 'category',
 47                 data: {},
 48                 position: 'top',
 49                 axisLabel : {
 50                     formatter : '{value}',
 51                     textStyle : {
 52                         color : '#FFFFFF',
 53                         fontSize : globalChartAxisFontSize-7
 54                     }
 55                 },
 56                 splitArea: {
 57                     show: true
 58                 },
 59                 axisTick: {
 60                     inside: true
 61                 }
 62             },
 63             yAxis: {
 64                 inverse: true,
 65                 type: 'category',
 66                 data: {},
 67                 position: 'right',
 68                 axisLabel : {
 69                     formatter : '{value}',
 70                     textStyle : {
 71                         color : '#FFFFFF',
 72                         fontSize : globalChartAxisFontSize-7
 73                     }
 74                 },
 75                 splitArea: {
 76                     show: true
 77                 },
 78                 axisTick: {
 79                     inside: true
 80                 }
 81             },
 82             legend: {
 83                 show:false,
 84                 orient: 'vertical',
 85                 x: 'right',
 86                 data: ['质差', '良好']
 87             },
 88             visualMap: availabilityDataThreshold,
 89             series: [{
 90                 name: 'channel',
 91                 type: 'heatmap',
 92                 data: [],
 93                 label: {
 94                     normal: {
 95                         show: false, //是否显示叉叉
 96                             textStyle : {
 97                             color : '#FFFFFF',
 98                             fontSize : 10//globalChartAxisFontSize
 99                         },
100                         formatter: function(v) {
101                             //显示内容
102                             return v.value[3];
103 
104                         }
105                     }
106                 },
107                 itemStyle: {
108                     emphasis: {
109                         shadowBlur: 10,
110                         shadowColor: 'rgba(0, 0, 0, 0.5)'
111                     }
112                 }
113             }]
114         },
115         options: []
116     }];
117     // 使用刚指定的配置项和数据显示图表。
118 }
View Code

运行效果如下所示：

 

posted on 2017-12-15 13:02  Cultivate  阅读(973)  评论(0)  编辑  收藏  举报

导航