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技术分享原创和收集

标签:echarts
如若转载请注明原文及出处:https://www.dsiab.com/post/6186c42d-0ab3-4d73-8d65-059c81fe4d0d
本站文章由javascript技术分享原创和收集,内容如有问题,请联系站长删除。

评论: