echarts 自适应_精读 《 echarts-for-react 源码 》

1 引言

echarts 可以轻松实现数据可视化图表，在工作中我通常使用其 React 封装版本 echarts-for-react 让我们看一下它的封装思路。

2 简介

echarts-for-react 提供了 option 属性传入图表配置项，API 如下：

import ReactEcharts from "echarts-for-react"
import React from "react"

const Component = () => {
  const getOption = () => {
    return {
      title: {
        text: "ECharts 入门示例",
      },
      tooltip: {},
      legend: {
        data: ["销量"],
      },
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "bar",
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    }
  }

  return <ReactEcharts option={getOption()} />
}

与官方 5 分钟上手 Echarts 不同的是，echarts-for-react 不需要设置宽高的实例容器，初始化 echarts 实例，并通过 setOption 方法生成图形。

echarts-for-react 还支持下列参数：

• notMerge：可选，是否不跟之前设置的 option 进行合并，默认为 false，即合并。
• lazyUpdate：可选，在设置完 option 后是否不立即更新图表，默认为 false，即立即更新。
• style：可选，echarts DOM 元素的 style 属性，默认为 { height: '300px' }。
• className：可选，echarts DOM 元素的