动态时间轴 双X曲线echarts 折线配置项内容和展示

动态创建双x轴曲线

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