Vue3+echarts实现动态更新数据的图表效果

动态更新数据的echarts图表

整个案例实现起来非常简单，废话少说，直接上代码

环境说明

• Node.js版本：18+
• Vue.js版本：3+
• echarts版本：5.4+

组件源码

• 代码简要说明：
  • 模板部分，直接写一个div容器，用于echarts创建canvas画布用，需要注意的是，该div必须声明宽高。
  • js脚本部分，就是echarts的配置表，和一个更新图表数据的方法，方法通过定时器实现。
  • css部分，定义div的宽高。

<template>
    <div ref="chart" class="chart-box"></div>
</template>

<script setup>
import { ref, reactive, watchEffect, onMounted, onUnmounted } from 'vue';
import * as echarts from 'echarts';

// 获取dom实例
const chart = ref(null)

// 定义数据变量
const chartData = ref([]);

// 定义图表配置
const chartOption = reactive({
  xAxis: {
    type: 'category',
    data: chartData.value.map(item => item.x)
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: chartData.value.map(item => item.y),
    type: 'line'
  }]
})

let chartInstance = null

onMounted(() => {
  // 初始化图表实例
  chartInstance = echarts.init(chart.value);
  chartInstance.setOption(chartOption, true)
})

// 更新图表
const updateDate = (data) => {
  data.setOption({
    xAxis: {
      data: chartData.value.map(item => item.x)
    },
    series: [{
      data: chartData.value.map(item => item.y),
    }]
  })
}

const timer = ref(null)
// 模拟数据更新
timer.value = setInterval(() => {
  const newDataPoint = {
    x: new Date().toLocaleTimeString(),
    y: Math.random() * 100
  };
  chartData.value.push(newDataPoint);
  updateDate(chartInstance)
}, 2000); // 每2秒更新一次数据

// 注销组件时清理图表实例和定时器
onUnmounted(() => {
  chartInstance.dispose();
  timer.value && clearInterval(timer.value)
})

</script>

<style scoped>
.chart-box {
  height: 100%;
  width: 100%;
}
</style>