效果图：
这是一个可以监控每秒物体运动速度、数量的实时动态曲线图。思路是定时器控制，每秒新增一个在末尾，去掉一个在首个。来达到不断往后移的效果。
话不多说，直接上代码：
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);
}
}
网友评论