vue3实现echarts 动态查询数据

可以使用 Vue3 的 Composition API 和 ECharts 的 API 来实现动态查询数据。具体实现步骤如下：

1. 在 Vue3 中使用 Composition API，引入 ECharts，并在 setup 函数中初始化 ECharts 实例。

2. 在模板中使用 ref 创建一个变量来存储 ECharts 实例。

3. 在 setup 函数中使用 watchEffect 监听数据变化，当数据变化时，调用 ECharts 实例的 setOption 方法更新图表数据。

下面是一个简单的示例代码：

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

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

export default {
  setup() {
    const chart = ref(null);
    const data = ref([]);

    const initChart = () => {
      const instance = echarts.init(chart.value);
      instance.setOption({
        xAxis: {
          type: 'category',
          data: data.value.map(item => item.name)
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: data.value.map(item => item.value),
          type: 'bar'
        }]
      });
    };

    watchEffect(() => {
      initChart();
    });

    return {
      chart,
      data
    };
  }
}
</script>

在上面的代码中，我们使用了 ref 创建了一个变量 chart 来存储 ECharts 实例，使用 ref 创建了一个变量 data 来存储图表数据。在 setup 函数中，我们定义了一个 initChart 函数来初始化 ECharts 实例，并在 watchEffect 中监听数据变化，当数据变化时，调用 initChart 函数更新图表数据。

当然，这只是一个简单的示例，实际应用中还需要根据具体需求进行调整。