vue项目中如何通过npm引入多个echarts版本

大家好我是图恩，今天在项目中遇到一个问题，就是需要用echarts 实现一个回归趋势线，发现echarts官网上并不能实现，不过有一个echarts插件可以达到这个效果，插件叫做echarts-stat。

这个插件需要使用echarts5.0以上的版本，但是项目之前已经有引入echarts，但是是4.0版本，那么有没有什么方法可以实现同时安装两个版本呢？其实是可以实现的，npm 本身支持这个功能。

不同版本的echarts功能也会有差异，常见在5.0版本中没有china.js,不能正常使用中国地图，在4和5版本中词云图的文字颜色也有差异。

安装

安装可以通过npm安装（下面分别是4和5的最新版本）

echarts4和echarts5分别为名称，在引用时引用该名称

npm install echarts4@npm:echarts@4
npm install echarts5@npm:echarts@5

安装成功后package.json文件内容如下，可以看到已经同时安装了4.0跟5.0两个版本

"dependencies": {
    "axios": "^0.21.4",
    "core-js": "^3.6.5",
    "echarts": "^5.2.1",
    "ehcarts4": "npm:echarts@^4.9.0",
    "element-ui": "^2.15.6",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },

使用：

引用echarts4.1.0

import * as echarts from 'echarts'

引用echarts5.2.2

import * as echarts from 'echarts5';

当前安装echarts4.1.0和5.2.2两个版本，分别为两种命名，在引用时分别引用对应的别名即可。

本文章由javascript技术分享原创和收集