React魔法堂:echarts-for-react源碼略讀
- 2022 年 10 月 14 日
- 筆記
- javascript
前言
在當前工業4.0和智慧製造的產業升級浪潮當中,智慧大屏無疑是展示企業IT成果的最有效方式之一。然而其背後怎麼能缺少ECharts的身影呢?對於React應用而言,直接使用ECharts並不是最高效且優雅的方式,而echarts-for-react則是針對React應用對ECharts進行輕量封裝和增強的工具庫。
echarts-for-react的源碼非常精簡,本文將針對主要邏輯分析介紹。
從與原生初始化對比開始
原生ECharts中我們會通過如下程式碼初始化圖表實例
<div id="container" style="width: 100px; height: 100px"></div>
<script>
const chart = echarts.init(document.getElementById('container'))
</script>
那麼生成的HTML Element結構為
<div id="container" style="width: 100px; height: 100px" _echarts_instance=".....">
<div style="width: 100px; height: 100px;position: relative;">
<canvas width="100" height="100"></canvas>
</div>
</div>
其中第二層的div和canvas的寬高默認為容器div#container的寬高,我們可以通過init入參指定兩者寬度。
const chart = echarts.init(
document.getElementById('container'),
null,
{
width: 300, // 可顯式指定實例寬度,單位為像素。如果傳入值為null/undefined/'auto',則表示自動取 dom(實例容器)的寬度
height: 300 // 可顯式指定實例高度,單位為像素。如果傳入值為null/undefined/'auto',則表示自動取 dom(實例容器)的高度
}
)
注意:若此時容器div#container尺寸發生變化,第二層div和canvas尺寸並不會自適應,需要我們手工調用chart.resize()
觸發。
而通過echarts-for-react上述步驟將被簡化為如下,並且生成相同的HTML Element結構:
import ReactECharts from 'echarts-for-react'
function Demo() {
return (
<ReactECharts
style={{width: 100, height: 100}} // 設置容器的寬高
autoResize={true} // 默認為true,自動監測容器尺寸的變化,並調用`chart.resize()`
/>
)
}
陷阱-默認值height為300px
由於ReactECharts
的style
默認內置height: 300
,源碼如下:
// src/core.tsx
render(): JSX.Element {
const { style, className = '' } = this.props
const newStyle = { height: 300, ...style }
return (
<div
ref={(e: HTMLElement) => {
this.ele = e
}}
style={newStyle}
className={`echarts-for-react ${className}`}
/>
)
}
因此通過className的方式設置容器高度時必須使用!important
<ReactECharts
className={styles.container}
/>
// index.module.css
.container {
height: 500px !important;
}
獲取ECharts實例
const ref = useRef()
useEffect(() => {
const instance = ref.current.getEchartsInstance()
}, [])
<EchartsReact
ref={ref}
/>
主邏輯源碼剖析
核心邏輯均在EChartsReactCore
組件上(位於文件src/core.tsx
),特點如下:
- 採用PureComponent方式編寫組件以便適配所有React版本;
- 僅對ECharts 命令式API進行聲明式API的封裝,並沒有將每種EChart圖表類型封裝為組件;
- 添加特性,監測容器尺寸的變化,並自動調用ECharts實例的
resize
方法實現自適應。
掛載渲染過程
- 在
componentDidMount
時調用renderNewEcharts
方法執行ECharts組件的生成邏輯; renderNewEcharts
方法內部邏輯- 通過
echarts.getInstanceByDom(容器DOM元素)
或echarts.init(容器DOM元素,主題,配置)
獲取已有ECharts實例或生成新的ECharts實例; - 通過ECharts實例的
setOption
方法設置或更新圖表內容; - 通過ECharts實例的
showLoading
或hideLoading
控制圖表渲染前是否顯示載入進度條; - 將通過props
onEvents
配置的ECharts支援的事件處理器綁定到ECharts實例上; - 觸發props
onChartsReady
方法; - 訂閱通過size-sensor監測容器尺寸並自動調用ECharts實例的
resize
方法,實現圖表尺寸的自適應。
- 通過
更新渲染過程
由於render
方法無論執行多少遍,實際上僅僅有可能影響容器本身而已,對ECharts實例並沒有任何影響。因此實際影響ECharts實例的邏輯被放置到componentDidUpdate
那裡,這做法和react-amap中在useEffect
中通過Marker等實例內置的set
方法更新狀態的原理是一致的。
- 若更新的props包含
theme
,opts
或onEvents
則要銷毀原來的ECharts實例,重新構建一個新的ECharts實例,並終止更新渲染過程;否則執行第2步。 - 若props中的
option
,notMergela
,lazyUpdate
,showLoading
和loadingOption
均沒有變化,則不更新ECharts實例;
注意:EChartsReactCore繼承PureComponent,若上述props進行shallow equal比較為true時也不會更新ECharts實例;但這一步採用deep equal比較,來減少ECharts實例的更新。 - 若props中的
style
或className
發生變化則會觸發ECharts實例的resize
方法。
卸載過程
- 取消通過size-sensor訂閱的容器尺寸變化事件;
- 通過ECharts實例的
dispose
方法註銷ECharts實例。
項目依賴
- fast-deep-equal: 遍歷對象屬性進行對比
- size-sensor: DOM元素尺寸監聽器,當元素尺寸變化時會觸發回調函數
後續
echarts-for-react利用size-sensor實現圖表尺寸自適應容器尺寸,那麼size-sensor是怎樣做到這一點呢?敬請期待一下篇《React魔法堂:size-sensor源碼略讀》。
尊重原創,轉載請註明來自://www.cnblogs.com/fsjohnhuang/p/16792575.html _肥仔John