vue 中 给 echarts 添加异步加载

在 Vue 中给 Echarts 添加异步加载，可以按照以下步骤进行操作：

1. 安装 Echarts：

npm install echarts

2. 在 vue 文件中，引入 Echarts 组件：

import echarts from 'echarts'

3. 在 data 中定义 Echarts 实例对象：

data() {
  return {
    chart: null
  }
}

4. 在 mounted 钩子函数中，使用异步加载 Echarts：

// 加载 Echarts 模块
loadEcharts(callback) {
  let script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js';
  script.onload = function() {
    callback();
  };
  document.body.appendChild(script);
}

// 创建图表
createChart() {
  this.chart = echarts.init(this.$refs.chart, 'light');
  // ...
}

// 使用异步加载创建图表
mounted() {
  this.loadEcharts(() => {
    this.createChart();
  });
}

5. 在 template 中，添加一个 div 作为图表的容器，并使用 ref 属性引用：

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

6. 在 createChart 函数中，可以按照正常的 Echarts 使用方式来创建图表。

注意：如果使用 vue-cli 创建的项目，可以在 vue.config.js 中配置 externals，以避免在打包时将 echarts 打包进去，从而提高打包速度和减小打包文件体积。配置方式如下：

module.exports = {
  // ...
  configureWebpack: {
    externals: {
      echarts: 'echarts'
    }