vue3 setup中使用echarts

在 Vue 3 中使用 ECharts，你可以按照以下步骤进行操作：

1. 安装 ECharts：在命令行中运行以下命令来安装 ECharts：

npm install echarts

2. 在 Vue 3 中引入 ECharts：在你的组件中，你可以使用 `import` 关键字引入 ECharts：

import * as echarts from 'echarts';

3. 在 `setup` 函数中使用 ECharts：在 `setup` 函数中，你可以创建一个变量来保存 ECharts 实例，并将其返回给组件模板中的 `ref`：

import { ref, onMounted } from 'vue';

export default {
  setup() {
    const chartRef = ref(null);

    onMounted(() => {
      const chart = echarts.init(chartRef.value);
      // 在这里可以进行 ECharts 的配置和数据处理
      chart.setOption({
        // ECharts 配置项
      });
    });

    return {
      chartRef
    };
  }
};

4. 在模板中使用 ECharts：使用 `ref` 创建的 `chartRef` 可以在模板中引用 ECharts 容器元素：

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

这样，你就可以在 Vue 3 中使用 ECharts 进行图表的展示和交互了。记得根据你的具体需求来配置和处理 ECharts 的数据。