vue3使用echars

在Vue3中，ECharts是一个非常流行的图表库，它可以帮助开发者轻松地创建各种复杂的图形。要在项目中集成ECharts，你需要按照以下步骤操作：

1. **安装依赖**：首先确保已经在你的Vue项目中安装了`@vue/cli-plugin-eslint`、`vue-template-compiler`以及`axios`等基本依赖，然后通过npm或yarn添加ECharts的官方推荐插件`echarts-for-vue`，命令通常是：

   npm install echarts-for-vue @types/echarts --save

2. **引入并配置**：在`main.js`或其他适当的地方导入ECharts，并在Vue实例的原型上挂载，以便所有组件都可以访问：

   import { ECharts } from 'echarts-for-vue'
   Vue.prototype.$echarts = ECharts

3. **在组件中使用**：在需要展示图表的组件中，你可以这样引用ECharts并创建图表实例：

   <template>
     <div ref="chart"></div>
   </template>

   <script>
   export default {
     setup() {
       const chart = h('canvas', null) // 使用ECharts的原生canvas元素
       onMounted(() => {
         this.createChart(chart)
       })
       return { chart }
     },
     methods: {
       createChart(canvas) {
         const myChart = this.$echarts.init(canvas);
         // ...然后编写你的图表配置和数据绑定代码
       }
     }
   }
   </script>

4. **配置图表**：根据需求，使用ECharts提供的API配置图表类型（如柱状图、折线图等）、设置选项和数据，可以参考ECharts官网文档。