4. 도표 만 들 기 (복잡 한 접선 도)

   
   
   
   
   

   
   
   
   
   
   
   
   
   
   
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
$.get('data/asset/data/aqi-beijing.json', function (data) {
myChart.setOption(option = {
title: {
text: 'Beijing AQI'
},
tooltip: {
trigger: 'axis'
},
xAxis: {
data: data.map(function (item) {
return item[0];
})
},
yAxis: {
splitLine: {
show: false
}
},
toolbox: {
left: 'center',
feature: {
dataZoom: {
yAxisIndex: 'none'
},
restore: {},
saveAsImage: {}
}
},
dataZoom: [{
startValue: '2014-06-01'
}, {
type: 'inside'
}],
visualMap: {
top: 10,
right: 10,
pieces: [{
gt: 0,
lte: 50,
color: '#096'
}, {
gt: 50,
lte: 100,
color: '#ffde33'
}, {
gt: 100,
lte: 150,
color: '#ff9933'
}, {
gt: 150,
lte: 200,
color: '#cc0033'
}, {
gt: 200,
lte: 300,
color: '#660099'
}, {
gt: 300,
color: '#7e0023'
}],
outOfRange: {
color: '#999'
}
},
series: {
name: 'Beijing AQI',
type: 'line',
data: data.map(function (item) {
return item[1];
}),
markLine: {
silent: true,
data: [{
yAxis: 50
}, {
yAxis: 100
}, {
yAxis: 150
}, {
yAxis: 200
}, {
yAxis: 300
}]
}
}
});
});;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
   
   

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

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;
}

   
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
$.get('<%=request.getContextPath()%>/line2', function (data) {
myChart.setOption(option = {
title: {
text: 'Beijing AQI',
subtext:'   '
},
tooltip: {
trigger: 'axis'  },
xAxis: {
 data: data.map(function (item) {
return item[0];
}),   
},
yAxis: {
splitLine: {。
show: true
}
},
toolbox: {
left: 'center',
feature: {
dataZoom: {
yAxisIndex: 'none'
},
restore: {},
saveAsImage: {},
dataView:{show:true}
}
},
</code></pre> 
 <p>dataZoom: [{<br> startValue: '2018-12-01'<br> }, {<br> type: 'inside'<br> }],<br> visualMap: {<br> top: 10,<br> right: 10,<br> pieces: [{//-100<x<=0<br> gt: -100,<br> lte: 0,<br> color: '#ffde33'<br> },{//0<x<=50<br> gt: 0,<br> lte: 50,<br> color: '#096'<br> }, {<br> gt: 50,<br> lte: 100,<br> color: '#ffde33'<br> }, {<br> gt: 100,<br> lte: 150,<br> color: '#ff9933'<br> }, {<br> gt: 150,<br> lte: 200,<br> color: '#cc0033'<br> }, {<br> gt: 200,<br> lte: 300,<br> color: '#660099'<br> }, {<br> gt: 300,<br> color: '#7e0023'<br> }],<br> //          。<br> outOfRange: {<br> color: '#999'<br> }<br> },<br> //    。       type          <br> series: {<br> name: 'Beijing AQI',<br> type: 'line',<br> data: data.map(function (item) {<br> return item[1];<br> }),<br> markLine: {<br> silent: true,<br> data: [{<br> yAxis: -100<br> },{<br> yAxis: 50<br> }, {<br> yAxis: 100<br> }, {<br> yAxis: 150<br> }, {<br> yAxis: 200<br> }, {<br> yAxis: 300<br> }]<br> }<br> }<br> }<br> );<br> });;<br> if (option && typeof option === "object") {<br> myChart.setOption(option, true);<br> }<br>  
 
           ， visualMap markLine,   。              。
 
 
http://localhost/haha/goLine2