vue3使用echarts折线图

在 Vue 3 中使用 Echarts 折线图，你需要按照以下步骤进行操作：

1. 安装 Echarts：在你的 Vue 3 项目中，使用命令行工具运行以下命令来安装 Echarts：

   npm install echarts

2. 导入 Echarts 库：在你需要使用折线图的组件中，导入 Echarts 库：

   import * as echarts from 'echarts';

3. 创建一个容器：在你的组件模板中创建一个容器来显示折线图，例如：

   <div id="chartContainer" style="width: 100%; height: 400px;"></div>

4. 初始化和配置图表：在组件的 `mounted` 钩子函数中，使用 Echarts 初始化和配置图表：

   mounted() {
     this.initChart();
   },
   methods: {
     initChart() {
       // 获取容器元素
       const chartContainer = document.getElementById('chartContainer');
       // 创建图表实例
       const chart = echarts.init(chartContainer);
       
       // 配置图表选项
       const option = {
         xAxis: {
           type: 'category',
           data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
         },
         yAxis: {
           type: 'value'
         },
         series: [{
           data: [820, 932, 901, 934, 1290, 1330, 1320],
           type: 'line'
         }]
       };
       
       // 将配置项设置到图表中
       chart.setOption(option);
     }
   }

这样，你就可以在 Vue 3 中使用 Echarts 折线图了。记得在组件销毁时，调用 `chart.dispose()` 方法来销毁图表实例，以释放资源。