【vue】在同一个vue项目中引入两个不同版本的echarts

最新推荐文章于 2024-01-26 09:50:55 发布
最新推荐文章于 2024-01-26 09:50:55 发布
阅读量1.4k 收藏
点赞数
分类专栏： Vue学习笔记 文章标签： echarts vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44862029/article/details/126853990
版权

由于想用echarts5新的功能，但项目之前用的是4版本，如果全替换成5版本会出现兼容性问题，所以想在同一个vue项目中引入两个不同版本的echarts

默认项目中已经有一个版本的echarts

安装 echarts5

npm install echarts5@npm:echarts@5

安装完可去package.json中看
在这里插入图片描述

在需要的地方引入
*注意：两个版本引入的名字不能相同

import * as Echarts5 from 'echarts5'
Summer⊙
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
npm包管理在项目中使用一个库的不同版本
RookieLink
09-09 909
近期工作中遇到一个场景，有一个比较老的项目中使用的echarts4.x版本，而新需求需要使用echarts5.x的新特性来做，旧的地方没办法升级适配，所以考虑在项目中同时使用两个版本。此时，项目中会同时存在两个版本的echarts，使用和正常使用一样。安装完毕后，查看package.json文件中会添加一条如下内容。
vue项目中引入安装2个版本的echarts
weixin_43760238的博客
06-08 822
以前老旧的项目中使用的Vue-echarts,它依赖的是echarts 3点几的版本，现在新加入了需求需要使用echarts中的一些新特性，直接升级echarts版本会导致以前的图表报错，无法正常工作，为了兼容以前的的图表并且能够使用新版本echarts的功能，就想是否一个项目中是否能引入两个版本的echarts呢？答案是可以的。 ......
vue项目中如何通过npm引入多个echarts版本
书写心得，分享感悟
10-23 2795
大家好我是图恩，今天在项目中遇到一个问题，就是需要用echarts 实现一个回归趋势线，发现echarts官网上并不能实现，不过有一个echarts插件可以达到这个效果，插件叫做echarts-stat。这个插件需要使用echarts5.0以上的版本，但是项目之前已经有引入echarts，但是是4.0版本，那么有没有什么方法可以实现同时安装两个版本呢？其实是可以实现的，npm 本身支持这个功能。
vue中同一个依赖引入不同版本
qq_40576178的博客
09-16 855
项目中需要用同一个依赖的2个版本。之前的功能用的是echarts V4版本；新的功能需要用到V5版本 语法： npm i 自定义依赖名@npm:依赖名@版本 -S 下载依赖 npm i echarts5@npm:echarts@5.1.1 -S 导入 import * as echarts5 from ‘echarts5’ 有的导入是这样的：import * as echarts4 from ‘echarts@5.1.1’ ...
Vue项目如何引入和使用多个版本Apache ECharts（详细教程，亲测有效）
Ddd_victory的博客
04-14 3328
需求背景：项目中已存在echarts4版本，但新的需求需要使用到echarts5的新特性，所以我们需要在不影响echarts4的情况下，增加echarts5版本。我这里引入的是5.3.2版本。 1、项目package.json中加入echarts5的配置 "dependencies": { "echarts": "4.2.1", "echarts5": "npm:echarts@^5.3.2" } 2、进行安装,控制台执行命令 npm install echarts5@n
关于npm和package.json的一些经验之谈(如何同时使用多个版本的echarts)
cjs1534717040的专栏
06-25 2066
浅谈一下npm和package.json的一些使用经验，解决同一个项目引入多个版本的echarts的问题。帮助大家以npm的形式引入本地的依赖包。
在一个项目中同时用某个库的俩个版本【本文演示同时使用antd的v3和v2版本】
吴小迪的博客
04-03 1201
本文演示在一个项目中同时使用俩个版本的antd。
解决vue一个页面中复用同一个echarts组件的问题
01-19
但是接下来出现了一个问题：如果我在同一个页面多次使用这个组件，图表将不能正常显示。分析了一下， echarts通过id获取对象 // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document....
完美解决vue 中多个echarts图表自适应的问题
10-15
在Vue项目中，ECharts图表的自适应是一个常见的需求，特别是在页面中存在多个图表的情况下。以下将详细解析如何解决Vue中多个ECharts图表的自适应问题。 首先，我们需要理解ECharts图表的自适应原理。ECharts图表的...
详解Vue中使用Echarts的两种方式
08-27
无论是使用直接引入Echarts还是使用vue-echarts，我们都可以轻松地在Vue项目中使用Echarts绘制图表。希望本文能够对大家有所帮助。如果大家有任何疑问，请随时留言，我们将及时回复大家的疑问。
在vue中使用vue-echarts-v3的实例代码
12-01
在Vue组件中，你可以这样创建一个ECharts图表： ```html <div class="echarts"> <IEcharts :option="pie" @ready="onReady" @click="onClick"></IEcharts> import IEcharts from 'vue-echarts-v3/src/lite....
详解vue文件中使用echarts.js的两种方式
10-17
在Vue项目中集成ECharts.js，通常有两种常见的方式：一种是通过组件的形式，另一种是直接在Vue文件中引入。这两种方法都有其优缺点，适用于不同的项目需求。 首先，我们来看第一种方式，即以组件的形式使用ECharts...
一个项目里同时用2个或多个不同版本的echarts插件
tempuser78的博客
03-02 6999
情景：在项目中需要用到echarts新版本的功能，但是发现项目中一直用的是老版本的echarts，假如直接升级echarts版本就会影响之前echarts图的一下功能；实现：下载新版本的echarts同时在项目中引入进来，再修改新版本的echarts.js文件，把echarts.js文件中所有的‘echarts’改成‘echarts4’（如果你下载的是echarts.4.0.x 的版本就改成‘ec...
【解决方案】vue框架使用多版本的echarts
计算机科研杂货铺
08-29 1541
背景 原项目前端的vue框架中使用了echarts4.9的包，但现在想使用echarts5的包，考虑到兼容问题，所以需要多个echarts版本共存。即：不改动原echarts4.9的内容，新增一个echarts5的包。 操作步骤 1.安装echarts5的包 npm install echarts5@npm:echarts@5 安装完之后，在node_modules会发现有2个echarts包，即：一个是名称为echarts的文件夹，一个名称为echarts5的文件夹。 2.项目中引用echarts5 i
vue项目下npm或yarn下安装echarts多个版本
11-30 2548
npm和yarn 同一个项目添加多个版本的依赖包
大事件项目17----Vue项目引入Echarts
weixin_54048131的博客
12-05 220
--------------------------------------------------------------------------------------------------------------------------------
如何在新工程中添加两个不同版本的的echarts库
weixin_30682415的博客
04-05 879
　　emmmmm.....标题我就觉得起的很变态。闲话不多说，先说出现的背景吧～～。 　　因为业务上的需求，跟一个硬件对接，要做大屏展示大厅客流热力图分布（背景图是客户那边给的）。然后这个机子传过来的数据就可能20来条。如果用最新的echarts4来做，但是数据太小不足以画出图来，但是如果数据太大传输也是一个问题。后来看来echarts2的热力图，仿佛找到来救星～～（https://echart...
echarts4 与 echarts5版本同时引入项目
最新发布
weixin_42268784的博客
01-26 608
1、将其中某一个版本的echarts放到项目的assets中静态引入，同时动态引入另外一个版本。2、同时动态引入两个版本的echarts,但是需要重命名其中一个版本。为了兼容旧项目，不得不同时引入两个版本的echarts.这样在项目的package.json中就会存在两个版本。同时引入两个版本的echarts方法有两种。下面说一下2的方法。
vue2项目优化一个页面引入多个组件
xioxi
09-01 510
【代码】vue2项目优化一个页面引入多个组件。
vue3中如何引入echarts
06-09
要在Vue3中使用echarts，你需要先安装echarts和vue-echarts两个依赖。 你可以使用npm或yarn进行安装，命令如下： ``` npm install echarts vue-echarts@5.0.0-rc.3 ``` 或者 ``` yarn add echarts vue-echarts@...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值