效果圖：
這是一個可以監(jiān)控每秒物體運動速度蔫劣、數(shù)量的實時動態(tài)曲線圖船庇。思路是定時器控制吭产，每秒新增一個在末尾，去掉一個在首個鸭轮。來達到不斷往后移的效果臣淤。
話不多說，直接上代碼：
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)
? ? ? ? ? ? ? ? ]
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? //運行數(shù)據(jù)動態(tài)時間軸 （以秒為單位）
? ? ? ? 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: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? //顏色漸變函數(shù) 前四個參數(shù)分別表示四個位置依次為左、下吞鸭、右寺董、上
? ? ? ? ? ? ? ? ? ? ? ? ? ? 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)'
? ? ? ? ? ? ? ? ? ? ? ? ? ? }])
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? },//區(qū)域顏色漸變
? ? ? ? ? ? ? ? ? ? data: _this.data,
? ? ? ? ? ? ? ? }]
? ? ? ? ? ? };
? ? ? ? ? ? //定時器
? ? ? ? ? ? setInterval(function () {
? ? ? ? ? ? ? ? _this.data.shift();
? ? ? ? ? ? ? ? console.log(_this.randomData(),'_this.randomData()')
? ? ? ? ? ? ? ? _this.data.push(_this.randomData());
? ? ? ? ? ? ? ? myChart24.setOption(option, true);
? ? ? ? ? ? }, 1000);
? ? ? ? }
}
