Echarts官网Demo链接
在Html页面中，内容如下：
1 2 3 4 5告警矩阵 6 7 8910 11 12 19 20 21 22
其中，引入了echarts.min.js文件以及告警矩阵对应的alarmMatrux 的JS文件
变量：
var alarmMatrixChart;var alarmMatrixoptions;var availabilityData = [];var average_round_trip_timeData = [];var packet_loss_to_destinationData = [];var endCityObjData = [];
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:10015 //colorAlpha:1016 }, // 不指定 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:10024 //colorAlpha:1025 }, // 不指定 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:10032 //colorAlpha:0.533 } // 不指定 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' horizontal54 left: 'right', //center 55 top: 'top',56 }; 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:10013 //colorAlpha:1014 }, // 不指定 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:10022 //colorAlpha:1023 }, // 不指定 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:10030 //colorAlpha:0.531 } // 不指定 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' horizontal43 left: 'right', //center 44 top: 'top',45 }; 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:10013 //colorAlpha:1014 }, // 不指定 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:10022 //colorAlpha:1023 }, // 不指定 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:10030 //colorAlpha:0.531 } // 不指定 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' horizontal43 left: 'right', //center 44 top: 'top',45 }; 初始化函数：
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-7111 }112 },113 splitArea: {114 show: true115 },116 axisTick: {117 inside: true118 }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//globalChartAxisFontSize137 },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 } 数据加载函数：
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 相应的点击处理函数：
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 } --->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' horizontal107 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:100123 //colorAlpha:10124 }, // 不指定 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:100132 //colorAlpha:10133 }, // 不指定 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:100140 //colorAlpha:0.5141 } // 不指定 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' horizontal153 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: 1190 },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 line221 },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:90239 },240 xAxis: {241 type: 'category',242 data: {},243 position: 'top',244 axisLabel : {245 formatter : '{value}',246 textStyle : {247 color : '#FFFFFF',248 fontSize : globalChartAxisFontSize-7249 }250 },251 splitArea: {252 show: true253 },254 axisTick: {255 inside: true256 }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-7268 }269 },270 splitArea: {271 show: true272 },273 axisTick: {274 inside: true275 }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//globalChartAxisFontSize294 },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 在上述的初始化函数中，展示了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 } 运行效果如下所示：
