vue3 使用echarts

在 Vue3 中使用 Echarts，需要先安装 Echarts 库。可以使用 npm 或 yarn 安装：

npm install echarts

或者

yarn add echarts

安装完成后，可以在 Vue3 中引入 Echarts 并使用。

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

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

export default {
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const myChart = echarts.init(this.$refs.echartsRef);

      myChart.setOption({
        // Echarts 配置项
      });
    }
  }
}
</script>

在上面的代码中，我们首先在组件的 `template` 中添加一个 `div` 元素，并给它一个 `ref`，这样我们可以在 `mounted` 钩子函数中获取到这个元素，并将它传递给 Echarts。

然后，我们在 `mounted` 钩子函数中调用 `initChart` 方法，该方法首先获取到我们在 `template` 中定义的 `div` 元素，然后使用 `echarts.init` 方法将其转换为 Echarts 实例。

最后，我们可以使用 `myChart.setOption` 方法设置 Echarts 的配置项，从而实现数据的可视化展示。