echarts vue3 柱状图定时联动饼图

你可以使用 ECharts 和 Vue 3 来实现柱状图和饼图的定时联动。首先，你需要安装并引入 ECharts 和 Vue 3 的相关依赖。

接下来，你可以创建一个 Vue 组件来显示柱状图和饼图，并使用定时器来更新数据。以下是一个简单的示例代码：

<template>
  <div>
    <div ref="barChart" style="width: 600px; height: 400px;"></div>
    <div ref="pieChart" style="width: 600px; height: 400px;"></div>
  </div>
</template>

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

export default {
  data() {
    return {
      barChart: null,
      pieChart: null,
      barData: [], // 柱状图数据
      pieData: [] // 饼图数据
    };
  },
  mounted() {
    // 初始化柱状图和饼图
    this.barChart = echarts.init(this.$refs.barChart);
    this.pieChart = echarts.init(this.$refs.pieChart);

    // 定时更新数据
    setInterval(() => {
      this.updateData();
    }, 5000);

    // 初始化数据
    this.updateData();
  },
  methods: {
    updateData() {
      // 模拟异步获取数据
      setTimeout(() => {
        // 更新柱状图数据
        this.barData = [
          { name: 'A', value: Math.random() * 100 },
          { name: 'B', value: Math.random() * 100 },
          { name: 'C', value: Math.random() * 100 }
        ];

        // 更新饼图数据
        this.pieData = [
          { name: 'A', value: Math.random() * 100 },
          { name: 'B', value: Math.random() * 100 },
          { name: 'C', value: Math.random() * 100 }
        ];

        // 更新柱状图
        this.barChart.setOption({
          xAxis: {
            data: this.barData.map(item => item.name)
          },
          series: [{
            data: this.barData.map(item => item.value)
          }]
        });

        // 更新饼图
        this.pieChart.setOption({
          series: [{
            data: this.pieData
          }]
        });
      }, 500);
    }
  }
};
</script>

在上面的示例代码中，我们使用了 ECharts 的 `init` 方法来初始化柱状图和饼图，并使用定时器来更新数据。在 `updateData` 方法中，我们模拟异步获取数据，并根据数据更新柱状图和饼图。

注意，上面的示例代码是一个简单的示例，你可以根据自己的需求修改和扩展。同时，你需要根据实际情况安装和引入正确的 ECharts 和 Vue 3 的相关依赖。

希望能帮到你！如有其他问题，请继续提问。