< !DOCTYPE html > < html style = "height: 100%" > < head > < meta charset = "utf-8" > < /head> < body style = "height: 100%; margin: 0" > < div id = "container" style = "height: 100%" > < /div> < script type = "text/javascript" src = "http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js" > < /script> < script type = "text/javascript" src = "http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js" > < /script> < script type = "text/javascript" src = "http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js" > < /script> < script type = "text/javascript" src = "http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js" > < /script> < script type = "text/javascript" src = "http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js" > < /script> < script type = "text/javascript" src = "http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js" > < /script> < script type = "text/javascript" src = "http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM" > < /script> < script type = "text/javascript" src = "http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js" > < /script> < script type = "text/javascript" src = "http://echarts.baidu.com/gallery/vendors/simplex.js" > < /script> < script type = "text/javascript" > var dom = document.getElementById("container"); var myChart = echarts.init(dom); var app = {}; option = null; function randomData() { now = new Date(+now + oneDay); value = value + Math.random() * 21 - 10; return { name: now.toString(), value: [ [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'), Math.round(value) ] } } var data = []; var now = +new Date(2018, 5, 12); var oneDay = 24 * 3600 * 1000; var value = Math.random() * 10; for (var i = 0; i < 1000; i++) { data.push(randomData()); } option = { title: { text: '尾矿库区浸润线实时监控', x: 'center', align: 'right' }, tooltip: { trigger: 'axis', formatter: function(params) { params = params[0]; var date = new Date(params.name); return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1]; }, axisPointer: { animation: false } }, legend: { data: ['井深', '埋深'], x: 'left' }, xAxis: { type: 'time', splitLine: { show: false } }, yAxis: [{ name: '井深(m)', type: 'value', boundaryGap: ["1", "1"], splitLine: { show: false } }, { name: '埋深(m^3/s)', nameLocation: 'start', type: 'value', inverse: true, boundaryGap: ["1", "1"], splitLine: { show: false } }, ], series: [{ name: '井深', type: 'line', showSymbol: false, hoverAnimation: false, data: data }, { name: '埋深', type: 'line', yAxisIndex: 1, showSymbol: false, hoverAnimation: false, data: data }] }; setInterval(function() { for (var i = 0; i < 5; i++) { data.shift(); data.push(randomData()); } myChart.setOption({ series: [{ data: data }] }); }, 1000);; if (option && typeof option === "object") { myChart.setOption(option, true); } < /script> < / body > < /html>

两条线不同步