Echart绘制趋势图和柱状图总结
1.legend名字与series名字⼀样，即可联动，且不可⼿动去掉联动效果
2.通过legend图例联动，隐藏绘制图线后，对应（ yAxisIndex: 1）坐标y轴如果没有同时设置min和max的情况下，会⾃动隐藏。
4.隐藏部分图线时，tooltip显⽰有格式要求时，通过给tooltip的formatter传递函数处理。
echart绘制图线实现代码：
1var modalChart = null;
2
3function createModalTrend(convertedData) {
4if(convertedData && convertedData[0] && convertedData[1] && convertedData[2]){
5//有数据情况下
6        $("#serviceTrendChart").attr('class','box');
7var 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
28var res = params[0].name + '<br>';
29for (var i = 0; i < params.length;  i++) {
30if(params[i].seriesName == '数'){
31                            res += "数：" + params[i].value + '<br>';
32                        }
33if(params[i].seriesName == '率'){
34                            res += "率：" + params[i].value + '%<br>';
35                        }
36                    }
37return 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%',
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}%'
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
174if(modalChart && modalChart.clear && modalChart.setOption){
175//有数据且已经被初始化过
176            modalChart.clear();//clear清空了option
177            modalChart.setOption(modalOption);
178        }else{
179//有数据未被初始化
180            modalChart = echarts.ElementById('serviceTrendChart'));
181            modalChart.setOption(modalOption);
182        }
183    }else{
184//⽆数据情况下
185if(modalChart && modalChart.clear) modalChart.clear();//被初始化过，清空
186
187        $("#serviceTrendChart").attr('class','box nodataModal');
188    }
189 }
190
191function genModalTrend(flag) {
192var theFlag = '0' + flag;
193var datatrend = null;
194var url = xxxxx;
195var endTime = condition.time;//暴露给外部，发请求直接⽤time，内部计算⽤ condition.selectedTime
196var beginTime = getStartTime(condition.selectedTime,condition.timeUnit);
197var 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("(" + sult + ")");
215var convertedData = convertModalData(datatrend, endTime, condition.timeUnit);
216            createModalTrend(convertedData);
217if (modalChart && size) {
218                size();
219            }
220        },
221        error: function (XMLHttpRequest, textStatus, errorThrown) {
222              createModalTrend(null);
eval是做什么的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
229function convertModalData(reqData, endDate, timeUnit) {
230if (reqData == null || reqData.length == 0) {
233var num = 0;
234var k = 0;
235
236var arrData = [];
237    arrData[0] = [];//⽇期
238    arrData[1] = [];//数
239    arrData[2] = [];//率
240switch (timeUnit) {
241case 'day':
242            num = 30;
243for (k = 0; k <= num; k++) {
244                arrData[1][k] = 0;//数
245                arrData[2][k] = 0;//率
246                arrData[0][k] = getPreDay(endDate, num-k);//⽇期初始化，从⼩到⼤247            }
248break;
249case 'week':
250            num = 7;
251for (k = 0; k <= num; k++) {
252                arrData[1][k] = 0;//数
253                arrData[2][k] = 0;//率
254                arrData[0][k] = getPreWeek(endDate, num-k);//⽇期初始化
255            }
256break;
257case 'month':
258            num = 11;
259for (k = 0; k <= num; k++) {
260                arrData[1][k] = 0;//数
261                arrData[2][k] = 0;//率
262                arrData[0][k] = getPreMonth(endDate, num-k);//⽇期初始化
263            }
264break;
265default :
266return null;
267break;
268    }
269/** 趋势图数据数量[0,num] **/
270//数据reqData没有按⽇期从⼩到⼤排列
271for(k=0;k<=num;k++){
272
273for (var i = 0; i < reqData.length; i++){
274//如果⽇期对的上
275if (reqData[i] && reqData[i][0] && arrData[0][k] ===  reqData[i][0]){ 276if(reqData[i][1] && parseFloat(reqData[i][1])){
277//reqData[i][0]//如果数有效
278                    arrData[1][k] = reqData[i][1];
279                }
280if(reqData[i][2] && parseFloat(reqData[i][2])){
281// reqData[i][1]//如果率有效
282                    arrData[2][k] = reqData[i][2];
283                }
284            }
285        }
286    }
287return arrData;
288 }
时间处理函数：
1function getTimeStr(dateObj){
2var strYear = FullYear();
3var strMonth = Month() + 1;
4if (strMonth < 10) {
5        strMonth = '0' + strMonth;
6    }
7var strDay = Date();
8if (strDay < 10) {
9        strDay = '0' + strDay;
10    }
11return strYear + '-' + strMonth + '-' + strDay;
12 }
13
14/**以参数dateString为基准，前days天的⽇期**/
15
16function getPreDay(dateString, days) {
17if(days === 0) return dateString;
18if (dateString.split('-').length != 3) return '';
19var result = place(/-/g, '/');
20var theMiliseconds = Date.parse(result);
21var pre_milliseconds = theMiliseconds - 1000 * 60 * 60 * 24 * parseInt(days); 22var preDate = new Date(pre_milliseconds);
23var strPreDate = getTimeStr(preDate);
26/**若粒度为周，则显⽰最近8周内的趋势,weeks传⼊7。周基于天计算，传⼊dateString必须为天形式,dateString应该为selectedTime  **/ 27
28function getPreWeek(dateString, weeks) {
29
30if (dateString.split('-').length != 3) return '';//dateString应该传⼊selectedTime
31var strPreDate = getPreDay(dateString, weeks * 7);
32var checkDate = new place(/-/g, '/'));
33    checkDate.Date() + 4 - (Day() || 7));
34var time = Time();
35    checkDate.setMonth(0);
36    checkDate.setDate(1);
37var week = Math.und((time - checkDate) / 86400000) / 7) + 1; //86400000即⼀天的毫秒数
38var timeText = FullYear() + "-" + (week < 10 ? '0' : '') + week;
39return timeText;
40 }
41
42/**若粒度为⽉，则显⽰12⽉内的趋势，months传⼊11  **/
43
44function getPreMonth(dateString, months) {
45if(months === 0) return dateString;
46if (dateString.split('-').length != 2) return;
47var y = und(months / 12); //满12⽉减⼀年
48var m = months % 12;
49var result = dateString.split('-');
50var theYear = parseInt(result[0]);
51var theMonth = parseInt(result[1]);
52if (theMonth <= m) {
53        theYear = theYear - 1 - y;
54        theMonth = theMonth + 12 - m;
55    } else
56    {
57        theYear = theYear - y;
58        theMonth = theMonth - m
59    }
60if (theMonth <= 9) {
61        theMonth = '0' + theMonth;
62    }
63return theYear + '-' + theMonth;
64 }
65
66/**针对天周⽉，求趋势图开始时间
67 * 30天
68 * 8周
69 * 12⽉
70 * **/
71function getStartTime(endTime,timeUnit) {
72switch (timeUnit){
73case 'day':
74return getPreDay(endTime,30);//起始⽇期为[前30天,endTime]  共31天
75break;
76case 'week':
77return getPreWeek(endTime,7);//共⼋周
78break;
79case 'month':
80return getPreMonth(endTime,11);//共12⽉
81break;
82default :
83return endTime;
84    }
85
86 }

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。