四、制作图表(复杂折线图)

2、复杂折线图

http://echarts.baidu.com/examples/editor.html?c=line-aqi

代码如下：

经过查看源代码，发现数据来源于如下地址

http://echarts.baidu.com/examples/data/asset/data/aqi-beijing.json

样例数据如下

[["2000-06-05",116],["2000-06-06",129],["2000-06-07",135],["2000-06-08",86]......]

分析数据：

数组的每个元素还为数据。内部数据有两个属性：日期和值

我们用controller模拟一下后台

@RequestMapping("/goLine2")
public String goLine2(){
    return "echarts/line-api";
}
@RequestMapping("/line2")
public @ResponseBody List line2(){
    List dataList=new ArrayList();
    String date="2018-12-";
    int i=0;
    for(int j=1;j<31;j++){
        List itemList=new ArrayList();
        if(j<10){
            itemList.add("\""+String.valueOf(date+"0"+j)+"\"");
        }else{
            itemList.add("\""+String.valueOf(date+j)+"\"");
        }
        if(j%3==0){
        itemList.add(i-j*2);
        }else{
            itemList.add(i+j*10);
        }
        dataList.add(itemList);
    }
    return dataList;
}

前台

   
 
 
可分别注释掉各部分内容，如visualMap和markLine,看效果。再参考手册后了解各部分的作用。
 
 
http://localhost/haha/goLine2