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