Vue引入Echarts报错 import * as echarts from “echarts“;

项目场景:

已经下载好echarts
cnpm i echarts

Vue引入Echarts

import echarts from 'echarts' mounted() {this.myChart = echarts.init(document.querySelector('.right'))this.myChart.setOption({title: {text: '消费列表',left: 'center'},...

问题描述

在这里插入图片描述


原因分析:

根据警告

 warning  in ./src/App.vue?vue&type=script&lang=js&export 'default' (imported as 'echarts') was not found in 'echarts' (possible exports: Axis, ChartView, ComponentModel, ComponentView, ListntView, extendSeriesModel, format, getCoordinateSystemDimensions, getInstanceByDot, disconnect, dispose, env, extendChartView, extendComponm, getInstanceById, getMap, graphic, helper, init, innerDrawElementOnCanvas, matrnsions, getInstanceByDom, getInstanceById, getMap, graphicix, number, parseGeoJSON, parseGeoJson, registerAction, registerCoordinateSystem,son, registerAction, registerCoordinateSystem, registerLay registerLayout, registerLoading, registerLocale, registerMap, registerPostInit, Update, registerPreprocessor, registerProcessor, registerT
registerPostUpdate, registerPreprocessor, registerProcessor, registerTheme, regisr, setPlatformAPI, throttle, time, use, util, vector, versterTransform, registerUpdateLifecycle, registerVisual, setCanvasCreator, setPlatformAPI, throttle, time, use, util, vector, version, zrUtil, zrender)

怀疑是导包有问题


解决方案:

更改引入方式

import * as echarts from "echarts";

import echarts from 'echarts'import * as echarts from "echarts" 都是用于导入echarts库的语法,但它们有一些区别。

  1. import echarts from 'echarts' 表示你只导入echarts库的默认输出(default export),这通常是一个包含了echarts的主要功能的对象。在这种情况下,你可以使用echarts作为一个对象来引用echarts的功能和方法,例如:
echarts.init();
echarts.setOption();
  1. import * as echarts from "echarts" 表示你导入了echarts库中的所有导出(exports),并将它们作为一个命名空间对象(namespaced object)存储在echarts变量中。这意味着你需要通过命名空间来访问echarts的功能和方法,例如:
echarts.init();
echarts.setOption();

使用这种方式导入echarts可以避免与其他可能的命名冲突,因为你现在需要使用echarts.init()echarts.setOption()等全名来访问echarts的功能。

无论是使用import echarts from 'echarts'还是import * as echarts from "echarts",你都可以使用echarts库的所有功能。选择哪种导入方式取决于你的个人偏好和项目的需求。

希望这个解释能够帮助你理解两者之间的区别。如果你有其他问题,请随时提问。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/40484.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【100天精通python】Day38:GUI界面编程_PyQT从入门到实战(中)

目录 专栏导读 4 数据库操作 4.1 连接数据库 4.2 执行 SQL 查询和更新: 4.3 使用模型和视图显示数据 5 多线程编程 5.1 多线程编程的概念和优势 5.2 在 PyQt 中使用多线程 5.3 处理多线程间的同步和通信问题 5.3.1 信号槽机制 5.3.2 线程安全的数据访问 Q…

日常BUG——通过命令行创建vue项目报错

😜作 者:是江迪呀✒️本文关键词:日常BUG、BUG、问题分析☀️每日 一言 :存在错误说明你在进步! 一、问题描述 在使用vue命令行创建一个vue项目时,出现一下的错误: vue create my…

UDP数据报结构分析(面试重点)

在传输层中有UDP和TCP两个重要的协议,下面将针对UDP数据报的结构进行分析 UDP结构图示 UDP报头结构的分析 UDP报头有4个属性,分别是源端口,目的端口,UDP报文长度,校验和,它们都占16位2个字节,所…

.devos勒索病毒解密方法|勒索病毒解决|勒索病毒恢复|数据库修复

导言: 随着科技的迅猛发展,网络安全问题也日益凸显。近期,一种名为 .devos 的勒索病毒在网络安全领域引起了广泛的关注和警惕。本文91数据恢复将 探讨如何解密被其加密的数据文件,并提供预防措施以避免受到类似威胁的侵害。 如不幸…

【java面向对象中static关键字】

提纲 static修饰成员变量static修饰成员变量的应用场景static修饰成员方法static修饰成员方法的应用场景static的注意事项static的应用知识:代码块static的应用知识:单例设计模式 static静态的意思,可以修饰成员变量,成员方法&a…

FPGA_学习_14_第一个自写模块的感悟和ila在线调试教程与技巧(寻找APD的击穿偏压)

前一篇博客我们提到了,如果要使用算法找到Vbr,通过寻找APD采集信号的噪声方差的剧变点去寻找Vbr是一个不错的方式。此功能的第一步是在FPGA中实现方差的计算,这个我们已经在上一篇博客中实现了。 继上一篇博客之后,感觉过了很久了…

【Image captioning】ruotianluo/self-critical.pytorch之1—数据集的加载与使用

【Image captioning】ruotianluo/self-critical.pytorch之1—数据集的加载与使用 作者:安静到无声 个人主页 数据加载程序示意图 使用方法 示例代码 #%%from __future__ import absolute_import from __future__ import division from __future__ import print_…

Flink-网络流控及反压剖析

参考: Apache Flink学习网

开源,微信小程序 美食便签地图(FoodNoteMap)的设计与开发

目录 0 前言 1 美食便签地图简介 2 美食便签地图小程序端开发 2.1技术选型 2.2前端UI设计 2.3主页界面 2.4个人信息界面 2.5 添加美食界面 2.6美食便签界面 2.8 美食好友界面 2.9 美食圈子界面 2.10 子页面-店铺详情界面 2.11 后台数据缓存 2.12 订阅消息通知 2.1…

Redis为什么能如此之快

推荐阅读 AI文本 OCR识别最佳实践 AI Gamma一键生成PPT工具直达链接 玩转cloud Studio 在线编码神器 玩转 GPU AI绘画、AI讲话、翻译,GPU点亮AI想象空间 资源分享 「java、python面试题」来自UC网盘app分享,打开手机app,额外获得1T空间 https://dr…

“深入探索JVM内部机制:解密Java虚拟机原理“

标题:深入探索JVM内部机制:解密Java虚拟机原理 摘要:本文将深入探索Java虚拟机(JVM)的内部机制,揭示其工作原理和关键组成部分,包括类加载、内存管理、垃圾回收、即时编译和运行时数据区域等。…

探索区块链世界:去中心化应用(DApp)的崭新前景

随着科技的不断发展,区块链技术逐渐引领着数字时代的潮流。在这个充满创新和变革的领域中,去中心化应用(DApp)成为了备受瞩目的焦点。DApp 不仅改变了传统应用程序的范式,还在金融、社交、游戏等多个领域展现出了广阔的…

GRPC 链接 NODE 和 GOLANG

GRPC 链接 NODE 和 GOLANG GRPC 了解 什么是GRPC gRPC 采用了 Protocol Buffers 作为数据序列化和反序列化的协议,可以更快速地传输数据,并支持多种编程语言的跨平台使用gRPC 提供“统一水平层”来对此类问题进行抽象化。 开发人员在本机平台中编写专…

打造专属照片分享平台:快速上手Piwigo网页搭建

文章目录 通过cpolar分享本地电脑上有趣的照片:部署piwigo网页前言1.Piwigo2. 使用phpstudy网页运行3. 创建网站4. 开始安装Piwogo 总结 🍀小结🍀 🎉博客主页:小智_x0___0x_ 🎉欢迎关注:&#x…

深度学习1:通过模型评价指标优化训练

P(Positive)表示预测为正样本,N(negative)表示预测为负样本,T(True)表示预测正确,F(False)表示预测错误。 TP:正样本预测正确的数量(正确检测) FP:负样本预测正确数量(误检测) TN…

【AI实战】BERT 文本分类模型自动化部署之 dockerfile

【AI实战】BERT 文本分类模型自动化部署之 dockerfile BERTBERT 文本分类模型基于中文预训练bert的文本分类模型针对多分类模型的loss函数样本不均衡时多标签分类时 dockerfile编写 dockerfilebuild镜像运行docker测试服务 参考 本文主要介绍: 基于BERT的文本分类模…

卷积神经网络CNN

卷积神经网络CNN 1 应用领域1 检测任务2 分类和检索3 超分辨率重构4 医学任务5 无人驾驶6 人脸识别 2 卷积的作用3 卷积特征值计算方法4 得到特征图表示5 步长和卷积核大小对结果的影响1 步长2 卷积核 6 边缘填充方法7 特征图尺寸计算与参数共享8 池化层的作用9 整体网络架构10…

【GitLab私有仓库】如何在Linux上用Gitlab搭建自己的私有库并配置cpolar内网穿透?

文章目录 前言1. 下载Gitlab2. 安装Gitlab3. 启动Gitlab4. 安装cpolar5. 创建隧道配置访问地址6. 固定GitLab访问地址6.1 保留二级子域名6.2 配置二级子域名 7. 测试访问二级子域名 前言 GitLab 是一个用于仓库管理系统的开源项目,使用Git作为代码管理工具&#xf…

ngModel和formControlName处理表单控件

ngModel 和 formControlName 不能同时在同一个表单控件上使用; 二者都用于在 Angular 中处理表单控件的值,但是它们的底层实现方式不同。 ngModel 是 Angular 提供的双向数据绑定指令,它可以将表单控件的值与组件类中的属性进行双向绑定。当…

软考笔记——10.项目管理

进度管理 进度管理就是采用科学的方法,确定进度目标,编制进度计划和资源供应计划,进行进度控制,在与质量、成本目标协调的基础上,实现工期目标。 具体来说,包括以下过程: (1) 活动定义&#…