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.pswp.cn/news/40484.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/40484.shtml
英文地址,請注明出處:http://en.pswp.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) 活動定義&#…