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两个版本,分别为两种命名,在引用时分别引用对应的别名即可。

原文:vue项目中如何通过npm引入多个echarts版本-javascript技术分享 (dsiab.com)https://www.dsiab.com/post/6186c42d-0ab3-4d73-8d65-059c81fe4d0d

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值