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 }

 

转载于:https://www.cnblogs.com/yongwangzhiqian/p/5688636.html