React

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > React > echarts-for-react源码

React之echarts-for-react源码解读

作者:肥仔John

这篇文章主要介绍了React之echarts-for-react源码解读,echarts-for-react的源码非常精简,本文将针对主要逻辑分析介绍,需要的朋友可以参考下

前言

在当前工业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

由于ReactEChartsstyle默认内置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),特点如下:

挂载渲染过程

更新渲染过程

由于render方法无论执行多少遍,实际上仅仅有可能影响容器本身而已,对ECharts实例并没有任何影响。因此实际影响ECharts实例的逻辑被放置到componentDidUpdate那里,这做法和react-amap中在useEffect中通过Marker等实例内置的set方法更新状态的原理是一致的。

卸载过程

项目依赖

fast-deep-equal: 遍历对象属性进行对比size-sensor: DOM元素尺寸监听器,当元素尺寸变化时会触发回调函数

后续

echarts-for-react利用size-sensor实现图表尺寸自适应容器尺寸,那么size-sensor是怎样做到这一点呢?敬请期待一下篇《React魔法堂:size-sensor源码略读》。

到此这篇关于React之echarts-for-react源码解读的文章就介绍到这了,更多相关echarts-for-react源码内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文