Echart绘制趋势图和柱状图总结
1.legend名字与series名字一样，即可联动，且不可手动去掉联动效果
2.通过legend图例联动，隐藏绘制图线后，对应（ yAxisIndex: 1）坐标y轴如果没有同时设置min和max的情况下，会自动隐藏。
3.grid可以通过设置x、y等为百分比达到自适应效果。
4.隐藏部分图线时，tooltip显示有格式要求时，通过给tooltip的formatter传递函数处理。
echart绘制图线实现代码：
1 var modalChart = null; 2 3 function createModalTrend(convertedData) { 4 if(convertedData && convertedData[0] && convertedData[1] && convertedData[2]){ 5 //有数据情况下 6 $("#serviceTrendChart").attr('class','box'); 7 var modalOption = { 8 legend:{ 9 orient:'horizontal', 10 show:true, 11 x:'center', 12 y:'bottom', 13 data: ['数','率'] 14 }, 15 title:{ 16 x:'center', 17 show:true, 18 text:'' , 19 textAlign:'center', 20 textStyle:{ 21 fontSize:14 22 } 23 }, 24 backgroundColor: '#ffffff', 25 tooltip: { 26 formatter: function (params,ticket,callback) { 27 28 var res = params[0].name + '<br>'; 29 for (var i = 0; i < params.length; i++) { 30 if(params[i].seriesName == '数'){ 31 res += "数：" + params[i].value + '<br>'; 32 } 33 if(params[i].seriesName == '率'){ 34 res += "率：" + params[i].value + '%<br>'; 35 } 36 } 37 return res; 38 }, 39 trigger: 'axis', 40 backgroundColor: 'rgba(250,250,250,0.7)',// 悬浮框的颜色 41 axisPointer: { // 坐标轴指示器，坐标轴触发有效 42 type: 'line', // 默认为直线，可选为：'line' | 'shadow' 43 lineStyle: { // 直线指示器样式设置 44 color: '#D6D7D7',// 纵向竖虚线的颜色 45 type: 'dashed' 46 }, 47 crossStyle: { 48 color: 'rgba(250,190,31,0.7)' 49 }, 50 shadowStyle: { // 阴影指示器样式设置 51 color: 'rgba(250,190,31,0.7)' 52 } 53 }, 54 textStyle: { 55 color: 'rgba(0,0,0,0.7)'// 悬浮框内容的颜色 56 } 57 }, 58 // calculable: false, 59 grid: { 60 x:'10%', 61 y: '18%', 62 x2:'10%', 63 y2:'28%', 64 borderWidth: 1, 65 borderColor: '#D6D7D7' 66 }, 67 xAxis: [ 68 { 69 70 axisLabel: { 71 show: true, 72 rotate: 0, 73 interval: 'auto', 74 onGap: true 75 }, 76 axisTick: { 77 show: false, 78 inside:false 79 }, 80 type: 'category', 81 splitLine: { 82 show: false 83 }, 84 boundaryGap: true, 85 data: convertedData[0], 86 axisLine: { 87 show: true, 88 lineStyle: { 89 width: 1, 90 color: '#F0F0F0' 91 } 92 }, 93 nameTextStyle: { 94 color: '#000000', 95 fontStyle: 'normal', 96 fontWeight: 'normal', 97 fontFamily: 'sans-serif', 98 fontSize: 12 99 } 100 } 101 ], 102 yAxis: [ 103 { 104 min:0, 105 type: 'value', 106 position:'left', 107 splitArea: { 108 show: false 109 }, 110 splitNumber: 5, 111 boundaryGap: [ 112 0, 113 0.2 114 ], 115 axisLine: { 116 show: true, 117 lineStyle: { 118 width: 1, 119 color: '#D6D7D7' 120 } 121 }, 122 axisLabel: { 123 formatter: '{value}' 124 } 125 }, 126 { 127 max:100, 128 type: 'value', 129 position:'right', 130 splitArea: { 131 show: false 132 }, 133 splitNumber: 5, 134 boundaryGap: [ 135 0, 136 0.2 137 ], 138 axisLine: { 139 show: true, 140 lineStyle: { 141 width: 1, 142 color: '#D6D7D7' 143 } 144 }, 145 axisLabel: { 146 formatter: '{value}%' 147 } 148 } 149 ], 150 color:['#9AD0E2','#FAC026'], 151 series: [ 152 { 153 name: '数', 154 type: 'bar', 155 smooth: true, 156 clickable: false,//设置为不可以点击 157 showAllSymbol: true, 158 data: convertedData[1] 159 }, 160 { 161 name: '率', 162 type: 'line', 163 symbol:'circle', 164 smooth: true, 165 clickable: false,//设置为不可以点击 166 showAllSymbol: true, 167 yAxisIndex: 1, 168 data: convertedData[2] 169 } 170 ] 171 172 }; 173 174 if(modalChart && modalChart.clear && modalChart.setOption){ 175 //有数据且已经被初始化过 176 modalChart.clear();//clear清空了option 177 modalChart.setOption(modalOption); 178 }else{ 179 //有数据未被初始化 180 modalChart = echarts.init(document.getElementById('serviceTrendChart')); 181 modalChart.setOption(modalOption); 182 } 183 }else{ 184 //无数据情况下 185 if(modalChart && modalChart.clear) modalChart.clear();//被初始化过，清空 186 187 $("#serviceTrendChart").attr('class','box nodataModal'); 188 } 189 } 190 191 function genModalTrend(flag) { 192 var theFlag = '0' + flag; 193 var datatrend = null; 194 var url = xxxxx; 195 var endTime = condition.time;//暴露给外部，发请求直接用time,内部计算用 condition.selectedTime 196 var beginTime = getStartTime(condition.selectedTime,condition.timeUnit); 197 var para = [ 198 {"name": "provincecode", "value": condition.provincecode}, 199 {"name": "citycode", "value": condition.citycode}, 200 {"name": "districtcode", "value": condition.districtcode}, 201 {"name": "beginTime", "value": beginTime}, 202 {"name": "endTime", "value": endTime}, 203 {"name":"unit","value":condition.timeUnit}, 204 {"name":"flag","value":theFlag} 205 ]; 206 207 $.ajax({ 208 type: "GET", 209 contentType: "application/json", 210 url: url, 211 data: rdkData(para), 212 // async: false, //必须同步，还是可以异步，放到回调函数里面做？ 213 success: function (data) { 214 datatrend = eval("(" + data.result + ")"); 215 var convertedData = convertModalData(datatrend, endTime, condition.timeUnit); 216 createModalTrend(convertedData); 217 if (modalChart && modalChart.resize) { 218 modalChart.resize(); 219 } 220 }, 221 error: function (XMLHttpRequest, textStatus, errorThrown) { 222 createModalTrend(null); 223 // var fakeData = [['2016-07-04',32,98.5],['2016-07-07',88,52.2],['2016-07-08',100,40],['2016-07-14',111,2]]; 224 // createModalTrend(convertModalData(fakeData,endTime,condition.timeUnit)); 225 } 226 }); 227 } 228 229 function convertModalData(reqData, endDate, timeUnit) { 230 if (reqData == null || reqData.length == 0) { 231 return null; 232 } 233 var num = 0; 234 var k = 0; 235 236 var arrData = []; 237 arrData[0] = [];//日期 238 arrData[1] = [];//数 239 arrData[2] = [];//率 240 switch (timeUnit) { 241 case 'day': 242 num = 30; 243 for (k = 0; k <= num; k++) { 244 arrData[1][k] = 0;//数 245 arrData[2][k] = 0;//率 246 arrData[0][k] = getPreDay(endDate, num-k);//日期初始化,从小到大 247 } 248 break; 249 case 'week': 250 num = 7; 251 for (k = 0; k <= num; k++) { 252 arrData[1][k] = 0;//数 253 arrData[2][k] = 0;//率 254 arrData[0][k] = getPreWeek(endDate, num-k);//日期初始化 255 } 256 break; 257 case 'month': 258 num = 11; 259 for (k = 0; k <= num; k++) { 260 arrData[1][k] = 0;//数 261 arrData[2][k] = 0;//率 262 arrData[0][k] = getPreMonth(endDate, num-k);//日期初始化 263 } 264 break; 265 default : 266 return null; 267 break; 268 } 269 /** 趋势图数据数量[0,num] **/ 270 //数据reqData没有按日期从小到大排列 271 for(k=0;k<=num;k++){ 272 273 for (var i = 0; i < reqData.length; i++){ 274 //如果日期对的上 275 if (reqData[i] && reqData[i][0] && arrData[0][k] === reqData[i][0]){ 276 if(reqData[i][1] && parseFloat(reqData[i][1])){ 277 //reqData[i][0]//如果数有效 278 arrData[1][k] = reqData[i][1]; 279 } 280 if(reqData[i][2] && parseFloat(reqData[i][2])){ 281 // reqData[i][1]//如果率有效 282 arrData[2][k] = reqData[i][2]; 283 } 284 } 285 } 286 } 287 return arrData; 288 }
时间处理函数：
1 function getTimeStr(dateObj){ 2 var strYear = dateObj.getFullYear(); 3 var strMonth = dateObj.getMonth() + 1; 4 if (strMonth < 10) { 5 strMonth = '0' + strMonth; 6 } 7 var strDay = dateObj.getDate(); 8 if (strDay < 10) { 9 strDay = '0' + strDay; 10 } 11 return strYear + '-' + strMonth + '-' + strDay; 12 } 13 14 /**以参数dateString为基准，前days天的日期**/ 15 16 function getPreDay(dateString, days) { 17 if(days === 0) return dateString; 18 if (dateString.split('-').length != 3) return ''; 19 var result = dateString.replace(/-/g, '/'); 20 var theMiliseconds = Date.parse(result); 21 var pre_milliseconds = theMiliseconds - 1000 * 60 * 60 * 24 * parseInt(days); 22 var preDate = new Date(pre_milliseconds); 23 var strPreDate = getTimeStr(preDate); 24 return strPreDate; 25 } 26 /**若粒度为周，则显示最近8周内的趋势,weeks传入7。周基于天计算，传入dateString必须为天形式,dateString应该为selectedTime **/ 27 28 function getPreWeek(dateString, weeks) { 29 30 if (dateString.split('-').length != 3) return '';//dateString应该传入selectedTime 31 var strPreDate = getPreDay(dateString, weeks * 7); 32 var checkDate = new Date(strPreDate.replace(/-/g, '/')); 33 checkDate.setDate(checkDate.getDate() + 4 - (checkDate.getDay() || 7)); 34 var time = checkDate.getTime(); 35 checkDate.setMonth(0); 36 checkDate.setDate(1); 37 var week = Math.floor(Math.round((time - checkDate) / 86400000) / 7) + 1; //86400000即一天的毫秒数 38 var timeText = checkDate.getFullYear() + "-" + (week < 10 ? '0' : '') + week; 39 return timeText; 40 } 41 42 /**若粒度为月，则显示12月内的趋势，months传入11 **/ 43 44 function getPreMonth(dateString, months) { 45 if(months === 0) return dateString; 46 if (dateString.split('-').length != 2) return; 47 var y = Math.round(months / 12); //满12月减一年 48 var m = months % 12; 49 var result = dateString.split('-'); 50 var theYear = parseInt(result[0]); 51 var theMonth = parseInt(result[1]); 52 if (theMonth <= m) { 53 theYear = theYear - 1 - y; 54 theMonth = theMonth + 12 - m; 55 } else 56 { 57 theYear = theYear - y; 58 theMonth = theMonth - m 59 } 60 if (theMonth <= 9) { 61 theMonth = '0' + theMonth; 62 } 63 return theYear + '-' + theMonth; 64 } 65 66 /**针对天周月，求趋势图 开始时间 67 * 30天 68 * 8周 69 * 12月 70 * **/ 71 function getStartTime(endTime,timeUnit) { 72 switch (timeUnit){ 73 case 'day': 74 return getPreDay(endTime,30);//起始日期为[前30天,endTime] 共31天 75 break; 76 case 'week': 77 return getPreWeek(endTime,7);//共八周 78 break; 79 case 'month': 80 return getPreMonth(endTime,11);//共12月 81 break; 82 default : 83 return endTime; 84 } 85 86 }
