var data = [
{
"hzList":[
{"ObservateTime":"2017-12-31 01:00:00","layerValue":55.4},
{"ObservateTime":"2017-12-31 02:00:00","layerValue":55.4},
{"ObservateTime":"2017-12-31 03:00:00","layerValue":55.4},
{"ObservateTime":"2017-12-31 04:00:00","layerValue":55.4},
{"ObservateTime":"2017-12-31 05:00:00","layerValue":55.3},
{"ObservateTime":"2017-12-31 06:00:00","layerValue":55.3},
{"ObservateTime":"2017-12-31 07:00:00","layerValue":55.2},
{"ObservateTime":"2017-12-31 08:00:00","layerValue":55.2},
{"ObservateTime":"2017-12-31 09:00:00","layerValue":55.2},
{"ObservateTime":"2017-12-31 10:00:00","layerValue":55.2},
{"ObservateTime":"2017-12-31 11:00:00","layerValue":55.2},
{"ObservateTime":"2017-12-31 12:00:00","layerValue":55.2},
{"ObservateTime":"2017-12-31 13:00:00","layerValue":55.1},
{"ObservateTime":"2017-12-31 14:00:00","layerValue":55.1},
{"ObservateTime":"2017-12-31 15:00:00","layerValue":55.1},
{"ObservateTime":"2017-12-31 16:00:00","layerValue":55.0},
{"ObservateTime":"2017-12-31 17:00:00","layerValue":55.0},
{"ObservateTime":"2017-12-31 18:00:00","layerValue":55.1},
{"ObservateTime":"2017-12-31 19:00:00","layerValue":55.1},
{"ObservateTime":"2017-12-31 20:00:00","layerValue":55.1},
{"ObservateTime":"2017-12-31 21:00:00","layerValue":55.1},
{"ObservateTime":"2017-12-31 22:00:00","layerValue":55.1},
{"ObservateTime":"2017-12-31 23:00:00","layerValue":55.1}
],
"stationName":"西藏",
"tempList":[
{"ObservateTime":"2017-12-31 01:01:00","layerValue":-10.9},
{"ObservateTime":"2017-12-31 02:01:00","layerValue":-11.1},
{"ObservateTime":"2017-12-31 03:01:00","layerValue":-10.8},
{"ObservateTime":"2017-12-31 04:01:00","layerValue":-10.4},
{"ObservateTime":"2017-12-31 05:01:00","layerValue":-10.0},
{"ObservateTime":"2017-12-31 06:01:00","layerValue":-9.7},
{"ObservateTime":"2017-12-31 07:01:00","layerValue":-9.3},
{"ObservateTime":"2017-12-31 08:01:00","layerValue":-9.2},
{"ObservateTime":"2017-12-31 09:01:00","layerValue":-9.0},
{"ObservateTime":"2017-12-31 10:01:00","layerValue":-8.9},
{"ObservateTime":"2017-12-31 11:01:00","layerValue":-8.4},
{"ObservateTime":"2017-12-31 12:01:00","layerValue":-7.5},
{"ObservateTime":"2017-12-31 13:01:00","layerValue":-6.2},
{"ObservateTime":"2017-12-31 14:01:00","layerValue":-6.1},
{"ObservateTime":"2017-12-31 15:01:00","layerValue":-5.4},
{"ObservateTime":"2017-12-31 16:01:00","layerValue":-4.9},
{"ObservateTime":"2017-12-31 17:01:00","layerValue":-5.2},
{"ObservateTime":"2017-12-31 18:01:00","layerValue":-6.0},
{"ObservateTime":"2017-12-31 19:01:00","layerValue":-6.6},
{"ObservateTime":"2017-12-31 20:01:00","layerValue":-6.8},
{"ObservateTime":"2017-12-31 21:01:00","layerValue":-6.9},
{"ObservateTime":"2017-12-31 22:01:00","layerValue":-6.9},
{"ObservateTime":"2017-12-31 23:01:00","layerValue":-7.0}
]
},
{
"hzList":[],
"stationName":"内蒙",
"tempList":[]
},
{
"hzList":[
{"ObservateTime":"2017-12-31 01:00:00","layerValue":43.7},
{"ObservateTime":"2017-12-31 02:00:00","layerValue":43.7},
{"ObservateTime":"2017-12-31 03:00:00","layerValue":43.7},
{"ObservateTime":"2017-12-31 04:00:00","layerValue":43.8},
{"ObservateTime":"2017-12-31 05:00:00","layerValue":43.8},
{"ObservateTime":"2017-12-31 06:00:00","layerValue":43.8},
{"ObservateTime":"2017-12-31 07:00:00","layerValue":43.8},
{"ObservateTime":"2017-12-31 08:00:00","layerValue":43.8},
{"ObservateTime":"2017-12-31 09:00:00","layerValue":43.8},
{"ObservateTime":"2017-12-31 10:00:00","layerValue":43.8},
{"ObservateTime":"2017-12-31 11:00:00","layerValue":43.8},
{"ObservateTime":"2017-12-31 12:00:00","layerValue":43.8},
{"ObservateTime":"2017-12-31 13:00:00","layerValue":43.8},
{"ObservateTime":"2017-12-31 14:00:00","layerValue":43.7},
{"ObservateTime":"2017-12-31 15:00:00","layerValue":43.7},
{"ObservateTime":"2017-12-31 16:00:00","layerValue":43.7},
{"ObservateTime":"2017-12-31 17:00:00","layerValue":43.7},
{"ObservateTime":"2017-12-31 18:00:00","layerValue":43.7},
{"ObservateTime":"2017-12-31 19:00:00","layerValue":43.8},
{"ObservateTime":"2017-12-31 20:00:00","layerValue":43.8},
{"ObservateTime":"2017-12-31 21:00:00","layerValue":43.8},
{"ObservateTime":"2017-12-31 22:00:00","layerValue":43.8},
{"ObservateTime":"2017-12-31 23:00:00","layerValue":43.8}
],
"stationName":"新疆",
"tempList":[
{"ObservateTime":"2017-12-31 01:00:00","layerValue":-5.3},
{"ObservateTime":"2017-12-31 02:00:00","layerValue":-5.4},
{"ObservateTime":"2017-12-31 03:00:00","layerValue":-5.6},
{"ObservateTime":"2017-12-31 04:00:00","layerValue":-5.7},
{"ObservateTime":"2017-12-31 05:00:00","layerValue":-5.9},
{"ObservateTime":"2017-12-31 06:00:00","layerValue":-6.1},
{"ObservateTime":"2017-12-31 07:00:00","layerValue":-6.2},
{"ObservateTime":"2017-12-31 08:00:00","layerValue":-6.4},
{"ObservateTime":"2017-12-31 09:00:00","layerValue":-6.6},
{"ObservateTime":"2017-12-31 10:00:00","layerValue":-6.5},
{"ObservateTime":"2017-12-31 11:00:00","layerValue":-6.2},
{"ObservateTime":"2017-12-31 12:00:00","layerValue":-5.9},
{"ObservateTime":"2017-12-31 13:00:00","layerValue":-5.6},
{"ObservateTime":"2017-12-31 14:00:00","layerValue":-5.2},
{"ObservateTime":"2017-12-31 15:00:00","layerValue":-5.1},
{"ObservateTime":"2017-12-31 16:00:00","layerValue":-4.9},
{"ObservateTime":"2017-12-31 17:00:00","layerValue":-5.1},
{"ObservateTime":"2017-12-31 18:00:00","layerValue":-5.4},
{"ObservateTime":"2017-12-31 19:00:00","layerValue":-5.6},
{"ObservateTime":"2017-12-31 20:00:00","layerValue":-5.9},
{"ObservateTime":"2017-12-31 21:00:00","layerValue":-6.1},
{"ObservateTime":"2017-12-31 22:00:00","layerValue":-6.2},
{"ObservateTime":"2017-12-31 23:00:00","layerValue":-6.4}
]
}
];
var colors = ['#5793f3', '#d14a61', '#675bba'];
var timeLineData = function(data){
var res = [];
for (var i = 0; i < data.length; i++){
res.push(data[i].stationName)
}
return res;
}
var optionsData = function(data){
var res = [];
for (var i = 0; i < data.length; i++){
res.push({
title: {
text: data[i].stationName + " 温度/频率 变化曲线",
subtext: "By 我要成为酷酷的人",
sublink: "https://www.cnblogs.com/CooLLYP/",
left: 'center',
top: 10
},
xAxis: [{
name: data[i].stationName+"温度",
data: xAxisDatas(data, data[i].stationName, '温度')
}, {
name: data[i].stationName+"频率",
data: xAxisDatas(data, data[i].stationName, '频率')
}],
yAxis: [{
type: 'value'
}],
tooltip: {
trigger: 'axis',
axisPointer:{
type: 'cross'
}
},
grid: {
top: "15%",
bottom: "15%",
// tooltip: {
// trigger: 'axis',
// axisPointer: {
// type: 'shadow',
// label: {
// show: true,
// backgroundColor: "rgba(0,0,0,1)",
// formatter: function (params) {
// return params.value;
// }
// }
// }
// }
},
series: [
{
name: data[i].stationName+"温度",
type: 'line',
smooth: true,
data: seriesData(data, data[i].stationName, "温度")
}, // 温度数据
{
name: data[i].stationName+"频率",
type: 'line',
xAxisIndex: 1,
smooth: true,
data: seriesData(data, data[i].stationName, "频率")
}, // 频率数据
]
})
}
return res;
}
var xAxisDatas = function(data, name, type){
var res = [];
for (var i = 0; i < data.length; i++){
if(data[i].stationName === name){
if (type === "温度"){
for (var j = 0; j < data[i].tempList.length; j++){
res.push(data[i].tempList[j].ObservateTime)
}
}
if (type === "频率"){
for (var j = 0; j < data[i].hzList.length; j++){
res.push(data[i].hzList[j].ObservateTime)
}
}
}
}
return res;
}
var seriesData = function(data, name, type){
var res = [];
for (var i = 0; i < data.length; i++){
if(data[i].stationName === name){
if (type === "温度"){
for (var j = 0; j < data[i].tempList.length; j++){
res.push(data[i].tempList[j].layerValue)
}
}
if (type === "频率"){
for (var j = 0; j < data[i].hzList.length; j++){
res.push(data[i].hzList[j].layerValue)
}
}
}
}
return res;
}
option = {
baseOption: {
color: colors,
tooltip: {
padding: 6,
formatter: function(params){
var html = "";
for (var i = 0; i < params.length; i++){
html += ""+params[i].axisValue+"<br />"+params[i].marker+params[i].seriesName+": "+params[i].value+unit(params[i].seriesIndex)+"<br/>";
}
return html;
}
},
timeline: {
left: '10%',
right: '10%',
axisType: 'category',
autoPlay: true,
playInterval: 2000,
data: timeLineData(data),
symbol: "arrow",
lineStyle: {
color: colors[0]
},
label: {
color: colors[0]
},
itemStyle: {
color: colors[0]
},
checkpointStyle: {
symbol: "roundRect",
color: colors[1]
},
controlStyle :{
color: colors[0],
borderColor: colors[0]
}
},
legend: {
right: 10,
top: 15
}
},
options: optionsData(data)
};
function unit(str){
return str === 0 ? "℃" : "Hz"
}