以下这段是封装好的Vue代码实现
获得echarts
npm install echarts --save
Humidity.vue
<template>
<div ref="chartDom" class="main" style="width: 100%;height:300px;min-height: 300px;min-width: 300px;"></div>
</template>
<script>
import * as echarts from 'echarts';
export default {
name: 'LineChart',
props: ['message'],
data() {
return {
chart: null,
option: {
tooltip: {
formatter: '{a} <br/>{b} : {c}%'
},
series: [
{
name: 'Pressure',
type: 'gauge',
progress: {
show: true
},
detail: {
valueAnimation: true,
formatter: '{value}'
},
data: [
{
value: this.message.data,
name: '湿度比%'
}
]
}
]
},
};
},
watch: {
// 观察message的变化,并据此更新图表
message: {
handler(newVal) {
// 当chartData变化时,更新currentChartData并重新渲染图表
this.option.series[0].data[0] = {
value: newVal.data,
name: '湿度比%'
}; // 假设newVal是完整的图表配置或数据
this.chart.setOption(this.option);
},
deep: true // 开启深度监听
}
},
mounted() {
this.initChart();
},
methods: {
initChart() {
// 基于准备好的dom,初始化echarts实例
this.chart = echarts.init(this.$refs.chartDom);
// 指定图表的配置项和数据
var option = this.option;
// 使用刚指定的配置项和数据显示图表。
this.chart.setOption(option);
},
},
beforeDestroy() {
if (this.chart != null) {
// 在组件销毁前,确保销毁echarts实例,避免内存泄漏
this.chart.dispose();
}
}
};
</script>
<style scoped>
.main {
background-color: rgb(255, 255, 255);
display: flex;
justify-content: center;
align-items: center;
}
</style>
这里我们使用的父传子方式,因为这个图表是封装好了。我这里是实时更新湿度变化的利用的是传一个对象。{data:30}
首先数据已经封装再了data里面。
option 变量是图表所需的所有数据,如果我们想使用其它图表只需要去到echarts官网(echarts所有示例)将option复制过来就可以了。
将option数据直接复制过来
将option的数据复制过来之后。修改其他的值为自己想要的
然后监听部分只需要修改 因为option是一个对象,将对象的数据修改之后再调用echarts提供的更新函数 this.chart.setOption(this.option);将数据更新。注意如果父传子是数组类型的数据必须开启深度监听deep: true
watch: {
// 观察message的变化,并据此更新图表
message: {
handler(newVal) {
// 当chartData变化时,更新currentChartData并重新渲染图表
this.option.series[0].data[0] = {
value: newVal.data,
name: '湿度比%'
}; // 假设newVal是完整的图表配置或数据
this.chart.setOption(this.option);
},
deep: true // 开启深度监听
}
},
这里是要修改的option数据,可以用对象方式直接修改 当父组件传数据过来的时候就可以实时更新图表了
this.option.series[0].data[0] = {
value: newVal.data,
name: '湿度比%'
};
父组件引用例子
<template>
<div class="main">
<div class="car">
<Temperature :message="parentMessage"></Temperature>
<Humidity :message="parentMessageHumidit"></Humidity>
<Humidity :message="parentMessageHumidit"></Humidity>
</div>
</div>
</template>
<script>
// @ is an alias to /src
import Temperature from './echarts/Temperature.vue'
import Humidity from './echarts/Humidity.vue'
import axios from 'axios';
export default {
name: 'HomeView',
components: {
Temperature,Humidity
},
data() {
return {
parentMessage: {
data: 0
},
parentMessageHumidit:{
data: 0
},
in_chart: true,
temperature: 10.0,
humidity: 10.0,
// 用于存储定时器ID
pollIntervalId: null,
active:0,
}
},
created() {
// 组件创建时开始轮询
this.startPolling();
},
beforeDestroy() {
// 组件销毁前停止轮询
this.stopPolling();
},
methods: {
fetchTemperatureAndHumidity() {
axios.get('api/home/Temperature_and_humidity')
.then(response => {
// 假设响应数据格式如下:{ temperature: 25, humidity: 50 }
this.temperature = response.data.data.temperature;
this.humidity = response.data.data.humidity;
this.parentMessage.data = this.temperature
this.parentMessageHumidit.data=this.humidity
console.log(this.humidity)
})
.catch(error => {
console.error('获取温湿度数据失败:', error);
// 这里可以添加一些错误处理逻辑,比如显示错误消息
this.temperature = '错误';
this.humidity = '错误';
});
},
startPolling() {
// 每5秒轮询一次
this.pollIntervalId = setInterval(this.fetchTemperatureAndHumidity, 2000);
},
stopPolling() {
// 清除定时器
if (this.pollIntervalId) {
clearInterval(this.pollIntervalId);
this.pollIntervalId = null;
}
}
}
}
</script>
<style scoped>
.car{
width: 100%;
display: flex;
justify-content: center; /* 水平居中 */
flex-grow: 0.8;
flex-direction: column;
}
.main {
width: 100%;
height: 100vh;
display: flex;
overflow: auto;
flex-direction: column;
}
</style>
我的例子是使用轮询的方式更新数据,如果对数据的实时性比较高建议使用WebSocket,我们只需要改变传入参数就可以实现实时更新了。
如果是对内存比较严格的话import * as echarts from 'echarts';这里可以优化以下,使用按需引入