Echart绘制趋势图和柱状图总结

1.legend名字与series名字一样，即可联动，且不可手动去掉联动效果

2.通过legend图例联动，隐藏绘制图线后，对应（ yAxisIndex: 1）坐标y轴如果没有同时设置min和max的情况下，会自动隐藏。

3.grid可以通过设置x、y等为百分比达到自适应效果。

4.隐藏部分图线时，tooltip显示有格式要求时，通过给tooltip的formatter传递函数处理。

echart绘制图线实现代码：

 var modalChart = null;

 function createModalTrend(convertedData) {
     if(convertedData && convertedData[0] && convertedData[1] && convertedData[2]){
         //有数据情况下
         $("#serviceTrendChart").attr('class','box');
         var modalOption = {
             legend:{
                 orient:'horizontal',
                 show:true,
                 x:'center',
                 y:'bottom',
                 data: ['数','率']
             },
             title:{
                 x:'center',
                 show:true,
                 text:'' ,
                 textAlign:'center',
                 textStyle:{
                     fontSize:14
                 }
             },
             backgroundColor: '#ffffff',
             tooltip: {
                 formatter: function (params,ticket,callback) {

                     var res = params[0].name + '<br>';
                     for (var i = 0; i < params.length;  i++) {
                         if(params[i].seriesName == '数'){
                             res += "数：" + params[i].value + '<br>';
                         }
                         if(params[i].seriesName == '率'){
                             res += "率：" + params[i].value + '%<br>';
                         }
                     }
                     return res;
                 },
                 trigger: 'axis',
                 backgroundColor: 'rgba(250,250,250,0.7)',// 悬浮框的颜色
                 axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                     type: 'line',         // 默认为直线，可选为：'line' | 'shadow'
                     lineStyle: {          // 直线指示器样式设置
                         color: '#D6D7D7',// 纵向竖虚线的颜色
                         type: 'dashed'
                     },
                     crossStyle: {
                         color: 'rgba(250,190,31,0.7)'
                     },
                     shadowStyle: {                     // 阴影指示器样式设置
                         color: 'rgba(250,190,31,0.7)'
                     }
                 },
                 textStyle: {
                     color: 'rgba(0,0,0,0.7)'// 悬浮框内容的颜色
                 }
             },
             //  calculable: false,
             grid: {
                 x:'10%',
                 y: '18%',
                 x2:'10%',
                 y2:'28%',
                 borderWidth: 1,
                 borderColor: '#D6D7D7'
             },
             xAxis: [
                 {

                     axisLabel: {
                         show: true,
                         rotate: 0,
                         interval: 'auto',
                         onGap: true
                     },
                     axisTick: {
                         show: false,
                         inside:false
                     },
                     type: 'category',
                     splitLine: {
                         show: false
                     },
                     boundaryGap: true,
                     data: convertedData[0],
                     axisLine: {
                         show: true,
                         lineStyle: {
                             width: 1,
                             color: '#F0F0F0'
                         }
                     },
                     nameTextStyle: {
                         color: '#000000',
                         fontStyle: 'normal',
                         fontWeight: 'normal',
                         fontFamily: 'sans-serif',
                         fontSize: 12
                     }
                 }
             ],
             yAxis: [
                 {
                     min:0,
                     type: 'value',
                     position:'left',
                     splitArea: {
                         show: false
                     },
                     splitNumber: 5,
                     boundaryGap: [
                         0,
                         0.2
                     ],
                     axisLine: {
                         show: true,
                         lineStyle: {
                             width: 1,
                             color: '#D6D7D7'
                         }
                     },
                     axisLabel: {
                         formatter: '{value}'
                     }
                 },
                 {
                     max:100,
                     type: 'value',
                     position:'right',
                     splitArea: {
                         show: false
                     },
                     splitNumber: 5,
                     boundaryGap: [
                         0,
                         0.2
                     ],
                     axisLine: {
                         show: true,
                         lineStyle: {
                             width: 1,
                             color: '#D6D7D7'
                         }
                     },
                     axisLabel: {
                         formatter: '{value}%'
                     }
                 }
             ],
             color:['#9AD0E2','#FAC026'],
             series: [
                 {
                     name: '数',
                     type: 'bar',
                     smooth: true,
                     clickable: false,//设置为不可以点击
                     showAllSymbol: true,
                     data: convertedData[1]
                 },
                 {
                     name: '率',
                     type: 'line',
                     symbol:'circle',
                     smooth: true,
                     clickable: false,//设置为不可以点击
                     showAllSymbol: true,
                     yAxisIndex: 1,
                     data: convertedData[2]
                 }
             ]

         };

         if(modalChart && modalChart.clear && modalChart.setOption){
             //有数据且已经被初始化过
             modalChart.clear();//clear清空了option
             modalChart.setOption(modalOption);
         }else{
             //有数据未被初始化
             modalChart = echarts.init(document.getElementById('serviceTrendChart'));
             modalChart.setOption(modalOption);
         }
     }else{
         //无数据情况下
         if(modalChart && modalChart.clear) modalChart.clear();//被初始化过，清空

         $("#serviceTrendChart").attr('class','box nodataModal');
     }
 }

 function genModalTrend(flag) {
     var theFlag = '0' + flag;
     var datatrend = null;
     var url = xxxxx;
     var endTime = condition.time;//暴露给外部，发请求直接用time,内部计算用 condition.selectedTime
     var beginTime = getStartTime(condition.selectedTime,condition.timeUnit);
     var para = [
         {"name": "provincecode", "value": condition.provincecode},
         {"name": "citycode", "value": condition.citycode},
         {"name": "districtcode", "value": condition.districtcode},
         {"name": "beginTime", "value": beginTime},
         {"name": "endTime", "value": endTime},
         {"name":"unit","value":condition.timeUnit},
         {"name":"flag","value":theFlag}
     ];

     $.ajax({
         type: "GET",
         contentType: "application/json",
         url: url,
         data: rdkData(para),
       //  async: false, //必须同步，还是可以异步，放到回调函数里面做？
         success: function (data) {
             datatrend = eval("(" + data.result + ")");
             var convertedData = convertModalData(datatrend, endTime, condition.timeUnit);
             createModalTrend(convertedData);
             if (modalChart && modalChart.resize) {
                 modalChart.resize();
             }
         },
         error: function (XMLHttpRequest, textStatus, errorThrown) {
              createModalTrend(null);
            // var fakeData = [['2016-07-04',32,98.5],['2016-07-07',88,52.2],['2016-07-08',100,40],['2016-07-14',111,2]];
            // createModalTrend(convertModalData(fakeData,endTime,condition.timeUnit));
         }
     });
 }

 function convertModalData(reqData, endDate, timeUnit) {
     if (reqData == null || reqData.length == 0) {
         return null;
     }
     var num = 0;
     var k = 0;

     var arrData = [];
     arrData[0] = [];//日期
     arrData[1] = [];//数
     arrData[2] = [];//率
     switch (timeUnit) {
         case 'day':
             num = 30;
             for (k = 0; k <= num; k++) {
                 arrData[1][k] = 0;//数
                 arrData[2][k] = 0;//率
                 arrData[0][k] = getPreDay(endDate, num-k);//日期初始化,从小到大
             }
             break;
         case 'week':
             num = 7;
             for (k = 0; k <= num; k++) {
                 arrData[1][k] = 0;//数
                 arrData[2][k] = 0;//率
                 arrData[0][k] = getPreWeek(endDate, num-k);//日期初始化
             }
             break;
         case 'month':
             num = 11;
             for (k = 0; k <= num; k++) {
                 arrData[1][k] = 0;//数
                 arrData[2][k] = 0;//率
                 arrData[0][k] = getPreMonth(endDate, num-k);//日期初始化
             }
             break;
         default :
             return null;
             break;
     }
     /** 趋势图数据数量[0,num] **/
 //数据reqData没有按日期从小到大排列
     for(k=0;k<=num;k++){

         for (var i = 0; i < reqData.length; i++){
             //如果日期对的上
             if (reqData[i] && reqData[i][0] && arrData[0][k] ===  reqData[i][0]){
                 if(reqData[i][1] && parseFloat(reqData[i][1])){
                     //reqData[i][0]//如果数有效
                     arrData[1][k] = reqData[i][1];
                 }
                 if(reqData[i][2] && parseFloat(reqData[i][2])){
                     // reqData[i][1]//如果率有效
                     arrData[2][k] = reqData[i][2];
                 }
             }
         }
     }
     return arrData;
 }

时间处理函数：

 function getTimeStr(dateObj){
     var strYear = dateObj.getFullYear();
     var strMonth = dateObj.getMonth() + 1;
     if (strMonth < 10) {
         strMonth = '0' + strMonth;
     }
     var strDay = dateObj.getDate();
     if (strDay < 10) {
         strDay = '0' + strDay;
     }
     return strYear + '-' + strMonth + '-' + strDay;
 }

 /**以参数dateString为基准，前days天的日期**/

 function getPreDay(dateString, days) {
     if(days === 0) return dateString;
     if (dateString.split('-').length != 3) return '';
     var result = dateString.replace(/-/g, '/');
     var theMiliseconds = Date.parse(result);
     var pre_milliseconds = theMiliseconds - 1000 * 60 * 60 * 24 * parseInt(days);
     var preDate = new Date(pre_milliseconds);
     var strPreDate = getTimeStr(preDate);
     return strPreDate;
 }
 /**若粒度为周，则显示最近8周内的趋势,weeks传入7。周基于天计算，传入dateString必须为天形式,dateString应该为selectedTime  **/

 function getPreWeek(dateString, weeks) {

     if (dateString.split('-').length != 3) return '';//dateString应该传入selectedTime
     var strPreDate = getPreDay(dateString, weeks * 7);
     var checkDate = new Date(strPreDate.replace(/-/g, '/'));
     checkDate.setDate(checkDate.getDate() + 4 - (checkDate.getDay() || 7));
     var time = checkDate.getTime();
     checkDate.setMonth(0);
     checkDate.setDate(1);
     var week = Math.floor(Math.round((time - checkDate) / 86400000) / 7) + 1; //86400000即一天的毫秒数
     var timeText = checkDate.getFullYear() + "-" + (week < 10 ? '0' : '') + week;
     return timeText;
 }

 /**若粒度为月，则显示12月内的趋势，months传入11  **/

 function getPreMonth(dateString, months) {
     if(months === 0) return dateString;
     if (dateString.split('-').length != 2) return;
     var y = Math.round(months / 12); //满12月减一年
     var m = months % 12;
     var result = dateString.split('-');
     var theYear = parseInt(result[0]);
     var theMonth = parseInt(result[1]);
     if (theMonth <= m) {
         theYear = theYear - 1 - y;
         theMonth = theMonth + 12 - m;
     } else
     {
         theYear = theYear - y;
         theMonth = theMonth - m
     }
     if (theMonth <= 9) {
         theMonth = '0' + theMonth;
     }
     return theYear + '-' + theMonth;
 }

 /**针对天周月，求趋势图 开始时间
  * 30天
  * 8周
  * 12月
  * **/
 function getStartTime(endTime,timeUnit) {
     switch (timeUnit){
         case 'day':
             return getPreDay(endTime,30);//起始日期为[前30天,endTime]  共31天
             break;
         case 'week':
             return getPreWeek(endTime,7);//共八周
             break;
         case 'month':
             return getPreMonth(endTime,11);//共12月
             break;
         default :
             return endTime;
     }

 }