浅谈一下基于Vue的实时更新echarts图表库的数据

以下这段是封装好的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';这里可以优化以下，使用按需引入