Echarts中的折线图使用方法

echarts中的折线图是常用的图形，引用的方式是<script type="text/javascript" src="<c:url value='/assets/global/scripts/echarts-all.js'/>"></script>

下面用代码来说明其使用：

1、option的设置：

 var option={
  title : {
   text : getConfig().regionUrl + 'AQI日均变化趋势图',
   textStyle:{color: '#333999'},
   x : 'center',
   y : 20
  },
  "tooltip" : {
   "trigger" : "axis"
  },
  grid: {
   x: 30,
   y: 55,
   x2: 10
  },
  "legend" : {
   "data" : [ "AQI检测值" ],
   y : 'bottom',
   textStyle:{color: '#333999'},
   selectedMode:'single'
  },
  "calculable" : false,
  "xAxis" : [ {
   "type" : "category",
   "axisLabel": {
       rotate: 20
    },
   "boundaryGap" : false,
   "data" : (function(){
                var arr=[];
                $.ajax({
                     type : "post",
                     async : false, //同步执行
                     url : getConfig().mapDataUrl + "&dataFlg=x&flg=" + flg,
                     data : {},
                     dataType : "json", //返回数据形式为json
                     success : function(result) {
                      if (result) {
                       var data = result.dataList;
                       if (data.length > 0) {
                           for(var i=0;i<data.length;i++){
                                    arr.push(data[i].xdata);
                          }
                       }
                      }
                     },
                     error : function(errorMsg) {
                                  alert("图表请求数据失败!");
                                  myChart.hideLoading();
                              }
                  })
          return arr;
                })()
  } ],
  "yAxis" : [ {
   "type" : "value"
  } ],
  "series" : [ {
   "name" : "AQI检测值",
   "type" : "line",
   "itemStyle" : {
    normal:{ 
//                    label:{show:true},
//                    areaStyle:{color:'green'},
                    color:'blue'
    }
   },
   "data" : (function(){
                               var arr=[];
                               $.ajax({
                                    type : "post",
                                    async : false, //同步执行
                                    url : getConfig().mapDataUrl + "&dataFlg=data&flg=" + flg,
                                    data : {},
                                    dataType : "json", //返回数据形式为json
                                    success : function(result) {
                                     if (result) {
                                      var data = result.dataList;
                                      if (data.length > 0) {
                                          for(var i=0;i<data.length;i++){
                                           var values = '{"value":"' + data[i].str_data + '","date_time":"' + data[i].dateTime + '","aqi_grade":"' + data[i].aqiGrade 
                                                 + '","first_pollutant_name":"' + data[i].firstPollutantName + '"}';
                                           var json = $.parseJSON(values);
                                                    arr.push(json);
                                          }
                                          $("#date_time").text(data[0].dateTime==null?"":data[0].dateTime);
                                          $("#aqi_grade").text(data[0].aqiGrade==null?"":data[0].aqiGrade);
                                          $("#aqi_data").text(data[0].str_data=="-"?"":data[0].str_data);
                                          $("#first_pollutant_name").text(data[0].firstPollutantName==null?"":data[0].firstPollutantName);
                                      }
                                     }
                                    },
                                    error : function(errorMsg) {
                                                 alert("图表请求数据失败!");
                                                 myChart.hideLoading();
                                             }
                                 })
                         return arr;
                               })(),
   "smooth" : true,
   x : 0,
   y : 0,
   calculable: false
  } ]
 };

 

//2、点击折线图上的点执行的事件：

 //click事件
 //echarts.config = require('echarts/config');
 function eConsole(param) {
  /*
      var temp="";
       for(var i in param){
        temp += i+":"+eval("param."+i)+"\n";
       }
       alert(temp);
       alert(param.data.date_time+"|"+param.data.aqi_grade+"|"+param.data.value+"|"+param.data.first_pollutant_name);
       */
       $("#date_time").text(param.data.date_time);
       $("#aqi_data").text(param.data.value);
       $("#aqi_grade").text(param.data.aqi_grade);
       $("#first_pollutant_name").text(param.data.first_pollutant_name);
 }
 myChart.on(echarts.config.EVENT.CLICK, eConsole);

//3、对以上代码有什么疑问，可以去查阅网站：http://echarts.baidu.com/doc/doc.html#Line