Docs
- echarts/get-started
- echarts/option
- echarts/api
- echarts-for-react
第三方 echarts React 组件库，可以参考实现思路进行项目定制。
- React组件 -- echarts封装
- React hooks 封装 ECharts5 通用组件
封装思路
- 目的是封装一个容器型的 echarts 组件。
- 一些必要的参数，图表数据源、echarts宽高、渲染方式由父组件传入
- 考虑不同业务要求，需要通过 echarts 实例上处理不同事件。所以子组件需要传递 echarts 实例到父组件。因此组件封装采用 forwardRef 的方式。
封装步骤分析
- echarts 定义系列类型和组件的TS类型(ComposeOption)
- 基础组件
- 图表组件
- 系列类型
- echarts 基础类型
- echarts 图表类型 ComposeOption
- echarts 注册必须的和可选的组件
- 得到一个基础的 echarts 配置
- 封装 echarts 组件
- 组件封装成 forwardRef 类型
- 定义入参 props 和出参 ref 的类型
- 定义 echartsRef、echartsInstance 状态
- echarts 组件初始化
影响因素: props.options、ref
- echarts.getInstanceByDom
- echarts.getInstanceByDom 获取失败下进行 echart.init
- 对父组件暴露实例
- forwardRef
- useImperativeHandle 只暴露 echarts 实例给父组件
- 窗口变化监听
影响因素: props.options
- 重新设置窗口 resize 事件监听，重新适配窗口，开启过渡动画
- 监听窗口位置参数
影响因素: props.height、props.width
- 重新适配窗口，开启过渡动画
封装实例
原创文章转载: brownant.top/docs/fullst…
