目录前言从与原生初始化对比开始陷阱-默认值height为300px主逻辑源码剖析挂载渲染过程更新渲染过程卸载过程项目依赖后续前言 在当前工业4.0和智能制造的产业升级浪潮当中,智慧大
在当前工业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()`
/>
)
}
由于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
),特点如下:
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
方法更新状态的原理是一致的。
theme
, opts
或onEvents
则要销毁原来的ECharts实例,重新构建一个新的ECharts实例,并终止更新渲染过程;否则执行第2步。option
,notMergela
,lazyUpdate
,showLoading
和loadinGoption
均没有变化,则不更新ECharts实例;style
或className
发生变化则会触发ECharts实例的resize
方法。dispose
方法注销ECharts实例。fast-deep-equal: 遍历对象属性进行对比size-sensor: DOM元素尺寸监听器,当元素尺寸变化时会触发回调函数
echarts-for-react利用size-sensor实现图表尺寸自适应容器尺寸,那么size-sensor是怎样做到这一点呢?敬请期待一下篇《React魔法堂:size-sensor源码略读》。
到此这篇关于React之echarts-for-react源码解读的文章就介绍到这了,更多相关echarts-for-react源码内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: React之echarts-for-react源码解读
本文链接: https://www.lsjlt.com/news/169410.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0