這是一個可以監控每秒物體運動速度、數量的實時動態曲線圖。思路是定時器控制，每秒新增一個在末尾，去掉一個在首個。來達到不斷往后移的效果。
話不多說，直接上代碼：
data: { data:[], }, mounted() { this.operation_data_barFn(); }, methods: { //隨機 randomData() { var now = +new Date(); var oneDay = 100; var value = Math.random() * 10; now = new Date(+now + oneDay); value = value + Math.random() ; var valueName = now.getFullYear() + '/' + (now.getMonth() + 1) + '/' + now.getDate() + ' ' + (now.getHours() >= 10 ? now.getHours() : '0' + now.getHours()) + ':' + (now.getMinutes() >= 10 ? now.getMinutes() : '0' + now.getMinutes()) + ':' + (now.getSeconds() >= 10 ? now.getSeconds() : '0' + now.getSeconds()); console.log(valueName,'valueName') return { name: valueName, value: [ valueName, Math.round(value) ] } }, //運行數據動態時間軸 （以秒為單位） operation_data_barFn() { var _this = this; for (var i = 0; i < 60; i++) { _this.data.push(_this.randomData()); } var dom24 = document.getElementById("operation_data_bar");//這里替換你的echarts的id var myChart24 = echarts.init(dom24); let option = null; option = { title: { left: 'center', text: '', }, tooltip: { trigger: 'axis', axisPointer: { type: 'line', label: { backgroundColor: '#6a7985' }, lineStyle: { color: '#00FF34' } }, formatter: function (params) { params = params[0]; var date = new Date(params.name); return '時間：'+date.getMinutes() + ':' + date.getSeconds() + '<br/>速度 : ' + params.value[1]; }, axisPointer: { animation: true } }, //位置 grid: { left: '5%', right: '3%', top: '20%', bottom:'25%' }, //圖例名 legend: { top: '1%', right: '3%', textStyle: { color: '#ffffff', } }, xAxis: { type: 'category', splitLine: { show: false }, axisLabel: { formatter: function (value) { //console.log(value,'value') return value.substring(13, value.length) } }, triggerEvent: true }, yAxis: { name: '單位：m/s', type: 'value', boundaryGap: [0, '100%'], splitLine: { show: false }, axisLine: { lineStyle: { color: '#fff',//左邊線的顏色 width: '1'//坐標線的寬度 } }, axisTick: { inside: true }, splitLine: { //橫線顏色 show: true, lineStyle: { color: ['#192148'], width: 1, type: 'solid' } }, axisLabel: { inside: false, formatter: '{value}\n' } }, series: [{ name: '速度曲線', type: 'line', smooth: true, showSymbol: false, hoverAnimation: false, symbol: 'image://../images/circle_s.png',//鼠標懸停線上的圓點樣式（可替換本地圖片，也可刪除，不然會報錯啦） symbolSize: 20, itemStyle: { color: '#6A5ACD', normal: { lineStyle: {// 系列級個性化折線樣式 width: 1, type: 'solid', color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#0000FF' }, { offset: 1, color: '#0096FF' }]),//線條漸變色 } }, emphasis: { color: '#00FF34', borderWidth: 3, borderColor: '#00FF34', } },//線條樣式 areaStyle: { normal: { //顏色漸變函數 前四個參數分別表示四個位置依次為左、下、右、上 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'RGB(24,93,158)' }, { offset: .50, color: 'RGB(12,45,95)' }, { offset: 1, color: 'RGB(6,22,64)' }]) } },//區域顏色漸變 data: _this.data, }] }; //定時器 setInterval(function () { _this.data.shift(); console.log(_this.randomData(),'_this.randomData()') _this.data.push(_this.randomData()); myChart24.setOption(option, true); }, 1000); } }