vue3 ,使用echarts

在Vue3中使用Echarts，你需要做以下几个步骤：

1. **安装依赖**：首先确保在你的项目中安装了Vue和Echarts。可以使用npm或yarn命令：

   npm install vue echarts @vue/cli-plugin-echarts
   # 或者
   yarn add vue echarts

如果你使用的是Vue CLI，还需要安装插件`@vue/cli-plugin-echarts`。

2. **配置Echarts**：在`main.js`或`src/setup.ts`等入口文件中，引入并全局注册Echarts：

   import Vue from 'vue';
   import ECharts from 'echarts';

   // 如果使用Vue CLI插件
   import { createApp } from 'vue';
   import App from './App.vue';
   import EChartsCore from 'echarts/core';

   EChartsCore.registerTheme('dark', require('./themes/dark.json')); // 自定义主题

   createApp(App)
     .use(ECharts) // 注册Echarts实例
     .mount('#app');

3. **在组件中使用Echarts**：创建一个新的Vue组件，例如`LineChart.vue`，然后在其中编写Echarts初始化和数据绑定的逻辑：

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

   <script>
   import { ref } from 'vue';
   import { ECharts } from 'vue-echarts';

   export default {
     components: {
       ECharts,
     },
     setup() {
       const chartRef = ref(null);
       const initChart = () => {
         const myChart = this.$echarts.init(chartRef.value);
         // 设置图表配置...
         myChart.setOption({
           // 曲线图示例
           series: [{
             type: 'line',
             data: [/* 数据列表 */],
           }],
         });
       };

       return {
         chartRef,
         initChart,
       };
     },
     mounted() {
       this.initChart();
     },
   };
   </script>

模板中，`ref`用于让Vue追踪元素以便后续操作。