在vue中引入两个版本的echarts

最新推荐文章于 2024-01-26 09:50:55 发布
最新推荐文章于 2024-01-26 09:50:55 发布
阅读量1.7k 收藏 5
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45732538/article/details/119776872
版权
本文介绍了如何在Vue项目中解决旧版ECharts与新版需求不兼容的问题，通过同时安装和引入不同版本的ECharts来实现共存。首先，使用npm安装最新版Echarts为echarts5，并在node_modules中找到对应文件夹。接着，在main.js中通过import导入新版本Echarts5。这种方案允许开发者在不破坏原有功能的基础上，引入新版本以满足设计需求。
摘要由CSDN通过智能技术生成

vue 中 使用多个版本 echarts

由于是老项目echarts版本太低，不符合设计要求，于是我想升级下echarts版本，可是这样又会导致原有的功能不兼容，于是我想到同时安装多个版本的echarts

首先安装最新版本的echarts

npm install echarts5@npm:echarts@5

在这里插入图片描述

执行完之后，同时在node_modules文件中能找到一个echarts5的文件

然后在mian.js中引入

import * as Echarts5 from 'echarts5'
qq_45732538
关注
在vue文件引入echarts_详解vue文件中使用echarts.js的两种方式
weixin_39626211的博客
12-18 790
最近工作中需要用到echarts，由于项目是用的vue-cli开发的。在网上搜到vue中合成了vue-echarts，但是不想使用vue中规定好的数据格式，于是就自己做了一个vue项目引用原生echarts的简单demo，实现过程如下：用了两种实现方式准备工作1、安装echarts依赖控制台输入：npm install echarts --save2、全局引入main.js中引入import ec...
在vue文件引入echarts_vue文件如何使用echarts.js？（两种方法介绍）
weixin_35911221的博客
01-11 1948
本篇文章给大家带来的内容是关于vue文件如何使用echarts.js？(两种方法介绍)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。最近工作中需要用到echarts，由于项目是用的vue-cli开发的。在网上搜到vue中合成了vue-echarts，但是不想使用vue中规定好的数据格式，于是就自己做了一个vue项目引用原生echarts的简单demo，实现过程如下：用了两种实现方...
echarts需要的源文件-两个版本.rar
10-28
里面含有两个版本的echarts所需要的源文档，仅供参考。也可以上官方网站上去，引用在线的。
vue项目中引入安装2个版本的echarts
weixin_43760238的博客
06-08 1013
以前老旧的项目中使用的Vue-echarts,它依赖的是echarts 3点几的版本，现在新加入了需求需要使用echarts中的一些新特性，直接升级echarts版本会导致以前的图表报错，无法正常工作，为了兼容以前的的图表并且能够使用新版本echarts的功能，就想是否一个项目中是否能引入两个版本的echarts呢？答案是可以的。 ......
一个项目里同时用2个或多个不同版本的echarts插件
tempuser78的博客
03-02 7091
情景：在项目中需要用到echarts新版本的功能，但是发现项目中一直用的是老版本的echarts，假如直接升级echarts版本就会影响之前echarts图的一下功能；实现：下载新版本的echarts同时在项目中引入进来，再修改新版本的echarts.js文件，把echarts.js文件中所有的‘echarts’改成‘echarts4’（如果你下载的是echarts.4.0.x 的版本就改成‘ec...
echarts4 与 echarts5版本同时引入项目
最新发布
weixin_42268784的博客
01-26 774
1、将其中某一个版本的echarts放到项目的assets中静态引入，同时动态引入另外一个版本。2、同时动态引入两个版本的echarts,但是需要重命名其中一个版本。为了兼容旧项目，不得不同时引入两个版本的echarts.这样在项目的package.json中就会存在两个版本。同时引入两个版本的echarts方法有两种。下面说一下2的方法。
vue-cli搭建的项目中使用echarts——echarts版本问题导致的报错解决
yehaocheng520的博客
07-21 5035
今天遇到一个功能，就是绘制折线图，我之前是有写过的，但是之前是在引入的vue.js的项目中使用的，因此当时也是直接下载echarts.js，然后src引入后使用的。 今天的项目是vue-cli搭建的项目，因此最好还是通过npm install echarts --save的方式来下载插件，并引入插件来使用。 下载插件的时候，一定要注意要指定echarts的版本号，因此最新版的echarts与vue2.0有冲突，我今天就吃了这个亏。 安装插件后，在main.js中挂载到vue原型上后，在页面中使用时，一直提
在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(折线图的demo,markline用法)
10-15
接着，在`main.js`文件中引入ECharts库，并将其挂载到Vue的原型上，这样可以在任何组件中方便地访问ECharts： ```javascript import echarts from 'echarts'; Vue.prototype.$echarts = echarts; ``` 现在，我们...
【解决方案】vue框架使用多版本的echarts
计算机科研杂货铺
08-29 1575
背景 原项目前端的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
依赖包和项目版本不一致的冲突解决
weixin_68658847的博客
01-04 1841
依赖包和项目版本不一致的冲突解决
vue一个页面用两个echarts怎么写
weixin_43778617的博客
10-11 2234
在同一个页面同时用两个echarts报错怎么办？
vue项目中如何通过npm引入多个echarts版本
书写心得，分享感悟
10-23 2855
大家好我是图恩，今天在项目中遇到一个问题，就是需要用echarts 实现一个回归趋势线，发现echarts官网上并不能实现，不过有一个echarts插件可以达到这个效果，插件叫做echarts-stat。这个插件需要使用echarts5.0以上的版本，但是项目之前已经有引入echarts，但是是4.0版本，那么有没有什么方法可以实现同时安装两个版本呢？其实是可以实现的，npm 本身支持这个功能。
【vue】在同一个vue项目中引入两个不同版本的echarts
qq_44862029的博客
09-14 1495
在同一个vue项目中引入两个不同版本的echarts
vue中同时引入两个echarts组件无法自适应图表，resize无效
前端小王子
03-31 3167
在父组件引入多个子组件（里面都是echarts图表）的时候，window.onresize()方法只会对最后一个组件里的图表产生效果，主要原因是组件加载顺序导致的，所以我们将window.onresize监听放到父组件去执行 父组件（图利为vue3写法，可自行换成vue2）： const line = ref(); const bar = ref(); onMounted(() => { setTimeout(function () { // 监听屏幕变化，重置组件图表 wi
ECharts用法及常用配置项详解（Vue环境）
热门推荐
商务合作 | 共同学习 | 携手共进
12-20 9万+
通过一个echarts图表案例的展示来介绍echarts的使用方法及配置项。
Vue在一个页面中使用多个Echarts表格
weixin_51442367的博客
05-18 4299
1.首先echarts使用之前必须有完整的DOM结构，所以可以放在mounted中使用 使用步骤： 1） mounted() { this.echarts1() this.echarts2(this.imageData) }, 2）在methods中配置这两个表格 echarts1(){ var myChart = echarts.init(document.getElementById('main')); var option = {}//样式可
Vue项目如何引入和使用多个版本Apache ECharts（详细教程，亲测有效）
Ddd_victory的博客
04-14 3395
需求背景：项目中已存在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
vue、echarts 3D立体饼图鼠标悬浮显示信息 多版本echarts同时存在以及出现的bug解决
扬帆前行
05-20 3986
1、设计给出的图当中涉及到了3d立体饼图，项目当中我用的是echarts，当我在浏览器里面扩展基本实现样式了以后发现项目报错了，百度翻译了一下 大概率是echarts版本引起的，上扩展里面改了下项目当中的版本之后发现之前的水球图又版本不一致了（5.x可能是和4.x的不一样了） 2、定位到问题之后处理就是让两个版本的echarts同时存在即可 npm i echarts5@npm:echarts@5.2.0 npm install echarts-gl@2.0.8 package.json "echa..
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值