React中使用Echarts無法顯示title、tooltip等組件的解決方案
背景
近期在寫React的前端時(shí)遇到了使用Echarts只有圖表沒有其他組件的情況
在詢問大佬之后找到了解決方法
遇到問題
引用Echarts除了能夠顯示圖表以外無法顯示其他組件，整個(gè)圖比較死板。
我的錯(cuò)誤
沒有注意最開始的引用，看著其他博客寫的使用了按需引入，顯示圖表之后沒有注意還引用了相關(guān)組件
例如tooltip，title，legend。
所以導(dǎo)致了即使在option中寫了使用tooltip等組件的代碼，但最終的結(jié)果還是只有圖表的顯示，沒有相關(guān)組件。
解決方法
注意最開始的引用
對(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'
這樣寫起來雖然麻煩一些，但是在最后導(dǎo)出的時(shí)候，占用的空間要小一些，所以一般會(huì)采用這樣的方式。
第二種是采用全部引入的方式
直接全部將echarts全部引入
import echarts from 'echarts'
這樣的話，之后無論是想要使用折線圖、柱狀圖，還是使用tooltip、toolbox等組件，直接使用就好，不需要再次引用。
按照上述的方式二選其一，得到的圖表就較為生動(dòng)了
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了深入理解react的原理，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2021-10-10
這篇文章主要介紹了詳解react組件通訊方式，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
React?高德地圖進(jìn)京證路線規(guī)劃問題記錄(匯總)
這篇文章主要介紹了React高德地圖進(jìn)京證路線規(guī)劃問題小記,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-08-08
React class 的組件庫(kù)與函數(shù)組件適配集成方案
這篇文章主要介紹了React class 的組件庫(kù)與函數(shù)組件適配集成方案,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2025-05-05
React Native基礎(chǔ)入門之初步使用Flexbox布局
React中引入了flexbox概念，flexbox是屬于web前端領(lǐng)域CSS的一種布局方案，下面這篇文章主要給大家介紹了關(guān)于React Native基礎(chǔ)入門之初步使用Flexbox布局的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下2018-07-07
這篇文章主要介紹了react中定義變量并使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
React的特征單向數(shù)據(jù)流學(xué)習(xí)
這篇文章主要為大家介紹了React的特征單向數(shù)據(jù)流學(xué)習(xí)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
React如何使用sortablejs實(shí)現(xiàn)拖拽排序
這篇文章主要介紹了React如何使用sortablejs實(shí)現(xiàn)拖拽排序問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
react-redux中connect()方法詳細(xì)解析
connect()是React-redux中的核心方法之一，它將react組件預(yù)redux中的Store真正連接在一起，下面這篇文章主要給大家介紹了react-redux中connect()方法的相關(guān)資料，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。2017-05-05
React虛擬渲染實(shí)現(xiàn)50個(gè)或者一百個(gè)圖表渲染
這篇文章主要為大家介紹了React虛擬渲染實(shí)現(xiàn)50個(gè)或者100個(gè)圖表渲染的實(shí)現(xiàn)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06