关于vue 引入两个版本echarts的坑。

2023-11-09

项目开发中,前端非要使用echarts3.0版本。我的业务又有地图需要显示。(吐槽一下后端开发招进来变前端)。
一开始是引用了5.0版本的js文件,后来踩了很多坑就改成引用别名。

控制台输入

npm i echarts5@npm:echarts@5.0.2

使用
这里有个大坑,因为我这里echarts-gl也被前端用了,我没有使用别名。直接引入的。

(function webpackUniversalModuleDefinition(root, factory) {
	if(typeof exports === 'object' && typeof module === 'object')
		module.exports = factory(require("echarts5"));
	else if(typeof define === 'function' && define.amd)
		define(["echarts5"], factory);
	else if(typeof exports === 'object')
		exports["echarts-gl"] = factory(require("echarts5"));
	else
		root["echarts-gl"] = factory(root["echarts5"]);
}) `


我是直接改了echarts-gl.js内的require(“echarts”)为require(“echarts5”)。在本地调试没有问题,打包编译后就报错了。后面才知道问题出在echarts版本上
在这里插入图片描述
这里参考了别人的资料,最后使用
import * as echarts5 from '‘echarts5’;
解决

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

关于vue 引入两个版本echarts的坑。 的相关文章

  • Vue 组件化

    什么是组件化 任何一个人处理信息的逻辑能力都是有限的 所以 当面对一个非常复杂的问题时 我们不太可能一次性搞定一大堆的内容 但是 我们人有一种天生的能力 就是将问题进行拆解 如果将一个复杂的问题 拆分成很多个可以处理的小问题 再将其放在整体
  • vue父子组件通信方式哪几种

    第一种 props和 emit parent vue
  • 上拉加载原理

    实现思路 之前写过一篇触底加载 经过一番苦学钻研 优化一下 样式方面 滚动区域是给固定高度 设置 overflow y auto 来实现 接下来看看js方面的实现 其实也很简单 触发的条件是 可视高度 滚动距离 gt 实际高度 例子我会使用
  • 简单的方法解决ORA-07104:字符串文字太长

    工作中 保存数据的时候出现该问题 说字符串问题过长 过长的字段是一个用来保存xml格式的字符串 字段类型已经设置成CLOB 但是还是出现字符串过长问题 在SQLServer应该不会出现该问题 该问题中字符串文字太长 并不是字段的字符串过长
  • Vue项目的部署(服务器)

    Vue项目的部署 服务器 前几天帮朋友写了一个可以动态查看地点温度的前端项目 目前已经部署上线了 访问链接点这里 服务器是朋友的 倒时候打不开会很正常 说不定又使用服务器玩大数据项目去了 效果图 图一 图二 当然 温度也都是实时跟新的 而且
  • 基于SpringCloud的分布式网上购物商城

    末尾获取源码 开发语言 Java Java开发工具 JDK1 8 后端 SpringCloud 前端 Vue HTML 数据库 MySQL5 7和Navicat管理工具结合 服务器 Tomcat8 5 开发软件 IDEA Eclipse 是
  • Vue出现弹出层时,禁止底部页面跟随滑动

    背景 最近在写一个vue项目 当出现弹出层时 发现底部页面跟随滚动 但是产品不想要这种效果 于是找各种资料 发现很多说法 但是试了试 发现有的根本就不行 比如说有人提出用vue中提供的 touchmove prevent方法来解决 但是我试
  • 验证微信号的正则表达式

    var wxreg a zA Z 1 a zA Z0 9 5 19
  • 前端的工程化、模块化和组件化

    什么是工程化 工程化是一种思想而不是某种特定的技术 当然我们在实现项目工程化的过程中 我们也会去使用一些技术 前端工程化是使用软件工程的技术和方法来对前端的开发流程 技术 工具等进行规范化 标准化 其主要目的为了提高效率和降低成本 即提高开
  • 【vue3】elementplus日期组件英文转中文

    vue3 elementplus日期组件英文转中文 1 在main js或者main ts中加入 即可解决 import ElementPlus from element plus import element plus dist inde
  • 大数相乘,限制:不可用 BigInt

    大数相乘 限制 不可用 BigInt 大数相乘 限制 不可用 BigInt 例如 输入 a 11111111111111111111 b 22222222222222222222 返回 246913580246913580241975308
  • 大数据毕业设计之前端03:logo、menu的折叠展开实现

    关键字 BuildAdmin pinia logo aside menu 菜单折叠 Vue ElementUI 前言 上一篇文章中 借助aside的实现讲了一些开发的小技巧 以及css的解读 本篇文章主要写一下如何填充aside的内容 as
  • 黑豹程序员-自定义表单实现门户自定制

    功能 用户可以实现欢迎页面自己定制 数据由数据库表进行维护 原理 页面利用div进行布局 拖动div记录其坐标 并写库 页面加载时从数据库表中读取div坐标和数据即可 效果图
  • 基于vue2+海康威视web开发包3.2 无插件版本开发的监控系统

    文章目录 前言 一 插件准备 二 使用步骤 前言 项目最终效果为 可以预览 并且可以使用云台控制 购买的海康威视摄像头必须可以开启websocket 一 插件准备 插件下载地址 下载WEB无插件开发包V3 2 并加入到vue项目中 下载后解
  • [黑马程序员TypeScript笔记]------一篇就够了

    文章目录 1 TypeScript 介绍 TypeScript 是什么 TypeScript 为什么要为 JS 添加类型支持 TypeScript 相比 JS 的优势 2 TypeScript 初体验 安装编译 TS 的工具包
  • 拓展:vue 父组件调用子组件方法ref(且父组件可通过ref调用的方法传值给子组件)

    1 ref被用来给元素或子组件注册引用信息 引用信息将会注册在父组件的 refs对象上 一 ref被用来给元素或子组件注册引用信息 引用信息将会注册在父组件的 refs对象上 div class formBtn fl 111 div div
  • (vue)el-popover鼠标移入提示效果

    vue el popover鼠标移入提示效果 效果 代码
  • 黑豹程序员-字符串中查找出重复的字符串

    Collections frequency codeList element 字符串element 在codeList集合中重复的次数 List
  • ❤ Vue3 使用

    Vue3 使用 Vue3之toRefs的使用 作用 toRefs 可以将一个响应式的对象 转换成普通对象 但是转换后的普通对象的每一个属性值都是响应式的 这样我们可以使用es6的对象解构或者三点运算符等操作 代码
  • 30天精通Nodejs--第二十二天:express-认证和授权

    目录 引言 理解JWT及其工作原理 安装与引入JWT库 生成JWT令牌 验证JWT令牌 注意事项与最佳实践 结语 引言 在现代Web应用开发中 JSON Web Tokens JWT 作为一种轻量级 自包含且安全的标准 已被广泛用于实现用户

随机推荐

  • 【满分】【华为OD机试真题2023 JS】红黑图

    华为OD机试真题 2023年度机试题库全覆盖 刷题指南点这里 红黑图 知识点枚举 时间限制 1s 空间限制 256MB 限定语言 不限 题目描述 众所周知红黑树是一种平衡树 它最突出的特性就是不能有两个相邻的红色节点 那我们定义一个红黑图
  • shardingsphere引发 java.lang.String cannot be cast to java.lang.Integer异常

    错误描述 mysql数据库查询sql在数据库连接工具中可以正常运行 在加入了shardingsphere的jar包的项目中抛如下异常 java lang ClassCastException java lang String cannot
  • shell脚本循环传值_Shell 脚本的循环控制(for/while/until)

    熟悉其他高级语言的伙伴们肯定了解循环控制语法是编程中非常基础的内容 今天就介绍Shell 中设计循环控制的语法 for while until 等内容 for 命令 for 命令是最简单的循环控制语句 它的格式为 for var in li
  • SyntaxError: Cannot use import statement outside a module

    Node 生态包含两个不同的模块系统 ESM ECMAScript 模块 和 CommonJS 两个模块系统彼此不兼容 其是 SyntaxError 无法在模块外部使用 import 语句 错误 错误 SyntaxError 无法在模块外部
  • C++ 好用的格式化库--fmt

    背景 fmt 库是一个开源的 C 格式化库 它提供了一种简洁 安全和高效的方式来进行字符串格式化 该库的设计目标是提供与 Python 的字符串格式化语法类似的功能 同时保持 C 的类型安全性和性能 下载与安装 官网下载 fmt 官网地址
  • springboot+jsp教育机构OA系统(源码免费获取+论文+答辩PPT)

    技术架构 springboot mybatis springmvc jsp mysql 功能模块 整个系统分为三种角色 1 系统管理员 2 上级角色 3 普通教师 其中系统管理员需要的功能 部门人员管理功能 档案信息的添加 工作管理功能 上
  • python爬虫案例-跳过百度验证,接口调用实现百度搜索功能

    需求背景 我们有自己的平台 但是希望在我们的平台上面想要实现一个百度搜索的接口 输入想要搜索的内容 模拟百度搜索 将返回的内容再展现在我们自己的平台中 提供给用户查看 coding utf8 import hashlib import ra
  • QT自定义类型作为槽函数的参数

    QT自定义类型作为槽函数的参数 正常情况下信号与槽之间只能传递通用数据类型 如 int 像QVector
  • 数据结构——小白入门篇

    数据结构 小白入门篇 浅谈学习心得 我为什么想要学数据结构 在计算机界有这样一个万能公式 数据结构 算法 程序 在如今这计算机引领风骚的时代 不学数据结构 你凭什么想要做时代的弄潮儿 所以我毅然决然的提前自学了数据结构 学习数据结构前的我是
  • vue3 中使用 element UI 3 (vite 和 webpack)

    Element Plus官方文档 一 安装 NPM npm install element plus save Yarn yarn add element plus pnpm pnpm install element plus 如果您的网络
  • 15个高清壁纸网站推荐

    15个高清壁纸网站推荐 给大家推荐个人比较喜欢的几个壁纸高质量壁纸网站 给大家推荐个人比较喜欢的几个壁纸高质量壁纸网站 极简壁纸 推荐 WallpaperCave CGWALLPAPERS 游戏壁纸 H128壁纸 Magdeleine Up
  • DirectX 9.0c游戏开发手记之“龙书”第二版学习笔记之1: 开场白

    在开场白之前的说明 这是 DirectX 9 0c游戏开发手记 的第一部分 叫做 龙书 第二版学习笔记 讲的是我做 龙书 第二版 原名Introduction to 3D GameProgramming with DirectX 9 0c
  • 浅析单向tvs管和双向tvs管的对比,谁能更胜一筹

    瞬态抑制二极管 TransientVoltageSuppressor 简称TVS管 是一种二极管形式的高效能保护器件 当TVS管的两极受到反向瞬态高能量冲击时 它能以10的负12次方秒量级的速度 将其两极间的高阻抗变为低阻抗 吸收高达数千瓦
  • C高级笔记总结

    GCC 1 gcc 组件 1 分析器 分析语法结构 将C语言编译汇编语言 s 2 汇编器 将汇编代码编译成二进制文件 3 链接器 链接目标文件以及库文件 生成可执行代码 4 标准C库 提供核心的C库函数 scanf printf 2 gcc
  • mysql服务无法启动解决办法

    第一步先查看是不是端口号被占用 netstat aon findstr 3306 33060是mysql8 0 版本的扩展端口 果然被占用 强制终止进程 强制终止进程 11536 taskkill F pid 11536
  • Eastmount博客导读:专栏系统分类和博客归纳总结

    为了更好地帮助博友学习作者的博客 方便作者自己归纳总结专栏 本文详细介绍了作者八年来 在CSDN写的各种专栏 各种系列文章 八年来 作者经历了从本科到硕士 到贵州教书成家 再到现在的博士 八年来 作者学得很杂很宽 绝大多数专栏都是从零学起
  • Broken pipe产生原因分析

    一 Broken pipe产生原因分析 1 当访问某个服务突然服务器挂了 就会产生Broken pipe 2 客户端读取超时关闭了连接 这时服务器往客户端再写数据就发生了broken pipe异常 二 方案 1 问题一分析服务器为什么挂了
  • 可充电电池安规认证标准、GB 9706.1-2020对医用电气设备中电池的要求

    目录 可充电电池 安规认证标准 IEC 62133 标准主要包含以下项目的测试及验证 在这些测试及验证项目中 大部分均是常见的常规测试项目 但仍有部分项目值得留意及关注 UN38 3运输认证 UN38 3测试项目 GB 9706 1 202
  • mybatis 动态表名insert 传入表名、字段名、数据

    mybatis 动态insert 传入表名 字段名 数据 主要是实现不同的表名进行插入然后进行操作 可以使用MybatisPlus自带的过滤器进行配置 MybatisPlusConfig 测试方法如下 RunWith SpringRunne
  • 关于vue 引入两个版本echarts的坑。

    项目开发中 前端非要使用echarts3 0版本 我的业务又有地图需要显示 吐槽一下后端开发招进来变前端 一开始是引用了5 0版本的js文件 后来踩了很多坑就改成引用别名 控制台输入 npm i echarts5 npm echarts 5