vue3 ,vue-echarts使用方法

Vue3 是 Vue.js 的最新版本，它是一个流行的前端 JavaScript 框架，用于构建用户界面。Vue3 提供了更高效的响应式系统、更简单的API以及更好的性能优化。要开始使用 Vue3，你需要安装 Vue CLI（命令行工具），然后通过 `vue create` 创建一个新的项目。在项目中，你可以使用组件化思想来组织代码，并且引入 `@vue/composition-api` 进行状态管理。

Vue-Echarts 是一个基于 Vue 的 ECharts 图表组件封装库，ECharts 是一个强大的数据可视化库。要在 Vue3 中使用 Vue-Echarts，首先需要安装依赖：

npm install echarts vue-echarts

然后，在组件中导入并使用 Vue-Echarts 组件，例如：

<template>
  <div ref="chart" :style="{ width: '600px', height: '400px' }"></div>
</template>

<script>
import { ECharts, registerComponent } from "vue-echarts";

registerComponent({
  name: "MyChart",
  components: {
    ECharts,
  },
  setup(props, context) {
    const chart = reactive(new ECharts());
    
    // 初始化图表
    onMounted(() => {
      chart.init(context.$refs.chart);
      // 添加数据和配置选项
      chart.setOption({
        // ...your ECharts options here...
      });
    });

    return { chart };
  }
});
</script>