关于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 js引用警告 “export ‘default‘ (imported as ‘xxx‘) was not found

    问题原因 ES6 编译器识别问题 如果在public js这样写会有警告export default imported as xxx was not found export const myMixin 解决办法 修改组件中引用js的地方
  • ip正则表达式

    var Sip rule value callback gt if 2 5 0 5 0 4 d 0 1 d 1 2 2 5 0 5 0 4 d 0 1 d 1 2 3 test value false callback new Error
  • 值得收藏的UmiJS 教程

    点击上方关注 前端技术江湖 一起学习 天天进步 前言 网上的umi教程是真的少 很多人都只写了一点点 很多水文 所以打算自己写一篇 自己搭建umi 并封装了一下常用的功能 并用到公司实际项目中 umi介绍 Umi 是什么 Umi 中文可发音
  • 节流与防抖

    1 我们先了解为什么要节流和防抖 我们给一个inpu输入框绑定一个oninput事件 此时我们输入 前端开发 四个字 我们 观察以下后台打印
  • Vue与TypeScript的完美结合

    前言 TypeScript 是 JS类型的超集 并支持了泛型 类型 命名空间 枚举等特性 弥补了 JS 在大型应用开发中的不足 在我们自己单独学习 TS时 时常感觉很多知识点还是比较好理解的 但要和框架结合的话 感觉就有点糟 因为我使用Vu
  • Vue项目的部署(服务器)

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

    末尾获取源码 开发语言 Java Java开发工具 JDK1 8 后端 SpringCloud 前端 Vue HTML 数据库 MySQL5 7和Navicat管理工具结合 服务器 Tomcat8 5 开发软件 IDEA Eclipse 是
  • uni-app项目中使用scss语法

    最近正在学习uni app开发 我先把文档浅略翻了遍 发现组件和接口几乎都是按照微信小程序走 但是视图层上的语法又是按照vue的语法走的 所以开发过程一定要注意这点 然后我想在uni app项目中使用scss语法 但是具体怎么安装呢 历经曲
  • JS实现成才网注册系统(网页数据验证)

    主代码
  • 大数相乘,限制:不可用 BigInt

    大数相乘 限制 不可用 BigInt 大数相乘 限制 不可用 BigInt 例如 输入 a 11111111111111111111 b 22222222222222222222 返回 246913580246913580241975308
  • 30天精通Nodejs--第十四天:MongoDB

    这里写目录标题 前言 什么是 MongoDB 安装 MongoDB 驱动 连接到 MongoDB 数据库 执行基本操作 插入文档 查询文档 更新文档 删除文档
  • vue_域名部署无法访问后端

    前言 目前部署的比较另类 因为服务器为 windows 目前还不是很会 nginx 所以现在就只能在服务器上安装 nodejs 然后直接使用 npm run dev 命令行的方式运行项目 遇到的坑 使用ip访问前端的时候 就可以访问 但是通
  • 大数据毕业设计之前端03:logo、menu的折叠展开实现

    关键字 BuildAdmin pinia logo aside menu 菜单折叠 Vue ElementUI 前言 上一篇文章中 借助aside的实现讲了一些开发的小技巧 以及css的解读 本篇文章主要写一下如何填充aside的内容 as
  • php中文乱码或html中文乱码

    参考gpt 一 在PHP中解决中文乱码问题的常见方案有以下几种 设置字符编码 在你的PHP代码中 可以使用 header 函数设置正确的字符编码 常见的字符编码是UTF 8 可以使用以下代码将页面的字符编码设置为UTF 8 header C
  • Vue学习之watch侦听器:案例实现翻译功能

    watch侦听器 作用 监视数据的变化 当数据发生变化时 执行一些业务逻辑或者是异步操作 执行的场景例如在线翻译 当文本区域的内容发生变化时 会发生翻译内容的同时更新 语法 简单的写法 简单数据类型 可以直接的进行监听 完整的写法 添加额外
  • vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果

    一 实现效果 使用echarts实现省市地图绘制 根据数据在地图显示柱状图 根据数据显示数据 涟漪效果 二 实现方法 1 安装echarts插件 npm install echarts save 2 获取省市json数据 https dat
  • 基于vue2+海康威视web开发包3.2 无插件版本开发的监控系统

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

    文章目录 1 TypeScript 介绍 TypeScript 是什么 TypeScript 为什么要为 JS 添加类型支持 TypeScript 相比 JS 的优势 2 TypeScript 初体验 安装编译 TS 的工具包
  • vue的组件

    在Vue中 组件是可复用的代码块 用于构建用户界面 Vue的组件系统允许您将界面拆分为独立的 可重复使用的部件 提供了更好的代码组织和复用性 以下是在Vue中创建组件的基本步骤 创建一个组件实例 可以使用Vue extend 方法创建一个V
  • 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