vue使用echarts实现动态实时折线图并添加上下限超出变色
vue使用echarts实现动态实时折线图并添加上下限超出变色。
·
子组件:
<template>
<div>
<div>
<div ref="charts" style="width: 300px;height: 250px" id="main">
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return { myChart: null, }
},
props: ['min','max','data','checkValue'],
computed: {
option() {
let that = this
let option = {
tooltip: {
trigger: 'axis',
data: that.lebel,
axisPointer: { animation: false },
},
xAxis: {
type: 'category',
splitLine: { show: false },
data: (function() {
var list = []
for (var i = 0; i < that.data.length; i++) {
list.push(that.data[i].value[0])
}
return list
})(),
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%'],
splitLine: { show: false },
name: '℃',
},
series: [{
name: '实时温度',
type: 'line',
showSymbol: false,
data: (function() {
var list = []
for (var i = 0; i < that.data.length; i++) {
list.push(that.data[i].value[1])
}
return list
})(),
markLine: {
symbol: 'none',
label: { show: false },
data: [
{ yAxis: that.max },
{ yAxis: that.min }
]
},
}],
visualMap: [{
top: 10,
right: 10,
show: false,
precision: 1,
seriesIndex: 0,
pieces: [{
gt: that.min, // 设置最小值
lte: that.max, // 设置最大值
color: '#33CC33'
}],
outOfRange: { color: '#CC3300' // 设置超出部分的颜色
}
},
]
}
return option
}
},
created() {
},
mounted() {
this.echartsInit()
},
watch:{
data:{
handler(newVal,oldVal){
let option = this.myChart.getOption()
option.xAxis[0].data.shift()
option.xAxis[0].data.push(newVal[59].value[0])
option.series[0].data.shift()
option.series[0].data.push(newVal[59].value[1])
this.myChart.setOption(option)
},
deep:true,
// immediate:true
}
},
methods: {
//初始化echarts
echartsInit() {
let that = this
//柱形图
//因为初始化echarts 的时候,需要指定的容器 id='main'
that.myChart = that.$echarts.init(that.$refs.charts)
that.myChart.setOption(that.option)
that.option && that.myChart.setOption(that.option)
},
}
}
</script>
<style>
</style>
父组件主要方法:
//初始化图表数据
initData(){
let that = this
let fun = function(){
let now = new Date()
let current = new Date()
let data = []
let lebel = ''
for (var i = 0; i < 60; i++) {
that.lebel = new Date(now - (60 - i) * 1000).getHours() + ':' + new Date(now - (60 - i) * 1000)
.getMinutes() + ':' +
new Date(now - (60 - i) * 1000).getSeconds()
that.lebel = current.getHours() + ':' + current.getMinutes() + ':' + current.getSeconds()
data.push(that.randomData())
if (i === 59) {
that.flag = true
}
}
console.log(data)
return data
}
that.list.forEach((v,i)=>{
v.data = fun()
})
console.log(that.list)
that.initTimer()
},
//初始化定时器
initTimer() {
let that = this
that.timer = setInterval(function() {
that.list.forEach( v =>{
v.data.shift()
v.data.push(that.randomData())
v.value = that.randomData().value[1]
})
// console.log('11',that.data)
// that.data.shift()
// that.data.push(data)
}, 1000)
},
//模拟随机数据
randomData() {
let that = this
// now = new Date(+now + oneDay)
that.value = Math.floor(Math.random() * (40 - 30)) + 30
let current = new Date()
if (that.flag) {
that.lebel = current.getHours() + ':' + current.getMinutes() + ':' + current.getSeconds()
}
return {
value: [
that.lebel,
Math.round(that.value)
]
}
},
效果如下:
更多推荐
已为社区贡献1条内容
所有评论(0)