React中使用Echarts無法顯示title、tooltip等組件的解決方案
更新時間：2024年03月14日 14:51:44 作者：tygkking
這篇文章主要介紹了React中使用Echarts無法顯示title、tooltip等組件的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
背景
近期在寫React的前端時遇到了使用Echarts只有圖表沒有其他組件的情況
在詢問大佬之后找到了解決方法
遇到問題
引用Echarts除了能夠顯示圖表以外無法顯示其他組件，整個圖比較死板。
我的錯誤
沒有注意最開始的引用，看著其他博客寫的使用了按需引入，顯示圖表之后沒有注意還引用了相關(guān)組件
例如tooltip，title，legend。
所以導(dǎo)致了即使在option中寫了使用tooltip等組件的代碼，但最終的結(jié)果還是只有圖表的顯示，沒有相關(guān)組件。
解決方法
注意最開始的引用
對于Echarts有兩種引用方式，
第一種是按需引入
代碼如下：
首先引入基本的echarts組件
import echarts from 'echarts/lib/echarts'
如果要使用折線圖和柱狀圖，還需要引入相關(guān)組件
import 'echarts/lib/chart/bar' import 'echarts/lib/chart/line'
使用title、tooltip、legend等組件，還需要引入相關(guān)組件
import 'echarts/lib/component/title' import 'echarts/lib/component/tooltip' import 'echarts/lib/component/legend' import 'echarts/lib/component/toolbox'
這樣寫起來雖然麻煩一些，但是在最后導(dǎo)出的時候，占用的空間要小一些，所以一般會采用這樣的方式。
第二種是采用全部引入的方式
直接全部將echarts全部引入
import echarts from 'echarts'
這樣的話，之后無論是想要使用折線圖、柱狀圖，還是使用tooltip、toolbox等組件，直接使用就好，不需要再次引用。
按照上述的方式二選其一，得到的圖表就較為生動了
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
React自定義hooks同步獲取useState的最新狀態(tài)值方式
這篇文章主要介紹了React自定義hooks同步獲取useState的最新狀態(tài)值方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了解決配置setupProxy.js代理,頁面報錯404問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要介紹了React Native 腳手架的基本使用詳解,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-04-04
React 提供了 refrefref 屬性，讓我們可以引用組件的實例或者原生 DOM 元素,使用 refrefref，可以在父組件中調(diào)用子組件暴露出來的方法，或者調(diào)用原生 element 的 API,這篇文章主要介紹了React中的ref屬性的使用,需要的朋友可以參考下2023-04-04
這篇文章主要給大家介紹了在ES6下React組件的寫法，其中包括定義React組件、聲明prop類型與默認(rèn)prop、設(shè)置初始state、自動綁定，文中分別給出了詳細(xì)的示例代碼供大家參考學(xué)習(xí)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。2017-05-05
react 實現(xiàn)圖片正在加載中 加載完成 加載失敗三個階段的原理解析
這篇文章主要介紹了react 實現(xiàn)圖片正在加載中 加載完成 加載失敗三個階段的,通過使用loading的圖片來占位，具體原理解析及實現(xiàn)代碼跟隨小編一起通過本文學(xué)習(xí)吧2021-05-05
React獲取Java后臺文件流并下載Excel文件流程解析
這篇文章主要介紹了React獲取Java后臺文件流下載Excel文件,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-06-06
props是組件（包括函數(shù)組件和class組件）間的內(nèi)置屬性，用其可以傳遞數(shù)據(jù)給子節(jié)點，props用來傳遞參數(shù)。組件實例化過程中，你可以向其中傳遞一個參數(shù)，這個參數(shù)會在實例化過程中被引用2022-09-09
react的渲染機(jī)制是非常獨特的,有別于 Vue 框架的渲染次數(shù)的優(yōu)化計算,React 很久以來就有PureComponent、shouldUpdate,本文小編給大家介紹了React渲染的優(yōu)化方案,需要的朋友可以參考下2024-08-08
useEffect中return函數(shù)的作用和執(zhí)行時機(jī)解讀
這篇文章主要介紹了useEffect中return函數(shù)的作用和執(zhí)行時機(jī),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01