echarts-for-react源码略读

Posted 2022-10-31 格格巫 MMQ!!

从与原生初始化对比开始
原生ECharts中我们会通过如下代码初始化图表实例

那么生成的html Element结构为 其中第二层的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

// index.module.css
.container
height: 500px !important;

获取ECharts实例
const ref = useRef()

useEffect(() =>
const instance = ref.current.getEchartsInstance()
, [])

主逻辑源码剖析
核心逻辑均在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元素尺寸监听器，当元素尺寸变化时会触发回调函数