子组件:

<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)
					]
				}
			},

效果如下:
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐