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+"
"+params[i].marker+params[i].seriesName+": "+params[i].value+unit(params[i].seriesIndex)+"
"; } 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" }

动态时间轴 双X曲线

动态时间轴双X曲线