效果展示：
<div class="nowEcharts" id="nowEcharts"></div>
<style >.nowEcharts { width: 100%; height: 300px; margin-bottom: 0.3rem;}</style>
1.先在data中定义option
nowOptions: {
visualMap: [
{
show: false,
type: 'continuous',
seriesIndex: 0,
min: 0,
max: 400,
},
],
title: {
left: 'left',
text: '电量消耗实时统计',
},
tooltip: {
trigger: 'axis',
formatter: function(params) {
params = params[0]
vardate =new Date(params.name)
return (
date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1]
)
},
axisPointer: {
animation: false,
},
},
grid: {
top: '15%',
bottom: '10%',
},
xAxis: {
type: 'time',
splitLine: {
show: false,
},
triggerEvent: true,
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%'],
max: 100,
splitLine: {
show: false,
},
},
series: [
{
type: 'line',
showSymbol: false,
hoverAnimation: false,
data: [],
},
],
},
2.生成折线图
（1）初始化数据
nowChart() {
let that =thisvardata = []
varnow = +new Date()
varvalue = Math.random() * 1000for(vari = 0; i < 60; i++) {
now =newDate(+now +this.oneDay)
data.push(this.randomData(now, value))
}
// 基于准备好的dom，初始化echarts实例varmyChart = echarts.init(document.getElementById('nowEcharts'))
// 绘制图表vartemp = 59 let options = Object.assign(that.nowOptions, {})
options.series.forEach((item) => {
item.data = data
item.markPoint = {
data: [
[
{
symbol: 'none',
x: '95%',
},
{
symbol: 'circle',
name: '实时数据',
value: data[temp].value[1],
xAxis: data[temp].value[0],
},
],
],
}
})
myChart.setOption(options)
// 1秒定时器setInterval(() => {
for(vari = 0; i < 1; i++) {
data.shift()
now =newDate(+now +this.oneDay)
data.push(this.randomData(now, value))
}
myChart.setOption(options)
}, 1000)
},
（2）生成随机数
randomData(now, value) {
value = Math.random() * 100varvalueName = 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())
return {
name: now.toString(),
value: [valueName, Math.round(value)],
}
},
