vue3 echarts 动态数据

在Vue 3中使用echarts展示动态数据可以按照以下步骤进行：

1. 安装echarts依赖：

npm install echarts vue-echarts

2. 在Vue组件中引入和使用echarts：

<template>
  <div>
    <div ref="chart" style="width: 400px; height: 400px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  mounted() {
    // 初始化echarts实例
    this.chart = echarts.init(this.$refs.chart);
    
    // 初始化数据
    this.data = [10, 20, 30, 40, 50];
    
    // 绘制图表
    this.drawChart();
  },
  methods: {
    drawChart() {
      // 设置echarts配置项
      const option = {
        xAxis: {
          type: 'category',
          data: ['A', 'B', 'C', 'D', 'E'],
        },
        yAxis: {
          type: 'value',
        },
        series: [{
          data: this.data,
          type: 'line',
        }],
      };
      
      // 使用配置项绘制图表
      this.chart.setOption(option);
    },
    updateChart() {
      // 更新数据
      this.data.push(Math.floor(Math.random() * 100));
      
      // 重新绘制图表
      this.drawChart();
    },
  },
};
</script>

上述代码中，我们首先在`mounted`生命周期钩子中初始化echarts实例，并设置初始数据。然后，在`drawChart`方法中，我们根据数据绘制图表，并在`updateChart`方法中更新数据并重新绘制图表。你可以根据自己的需求进行修改和拓展。

以上是使用Vue 3和echarts展示动态数据的基本步骤，希望对你有所帮助！