Example

React Component Echarts

组件式百度图表，示例 https://dawiwt.com/react-component-echarts

Feature

组件式开发
图表自适应
功能完全兼容echarts本身功能
通过Props配置，学习、维护成本更低
支持辅助工具从配置到组件的快速转换，高效开发

Tools

Install

#安装包 
npm install react-component-echarts --save
 
#自主安装echarts 
npm install echarts --save

Quick Start

复制你的 option
点击辅助工具
粘贴 option 到文本框
复制依赖组件与图表代码到你的业务逻辑中
导入图表依赖 echarts 模块
完成

Usage

由于全部的图表和组件 ECharts 包体积会比较大，所以react-component-echarts只引入ECharts主模块，对于依赖的图表和组件，需要自己手动引入，这样可以有效减小打包后的体积，下面是一个简单示例，更多示例看这里；

 
//导入组件
import { Recharts, Components } from 'react-component-echarts'
 
//导入 line 图表
import 'echarts/lib/component/line'
 
const { XAxis, YAxis, Series } = Components
 
//图表代码
<Recharts>
    <YAxis type="value" />
    <XAxis type="category" data={["Mon","Tue","Wed","Thu","Fri","Sat","Sun"]} />
    <Series data={[820,932,901,934,1290,1330,1320]} type="line" smooth={true} />
</Recharts>

可以按需引入的模块列表见这里。

当然，如果不关心打包体积，为方便开发，可直接在入口文件通过import 'echarts'或require('echarts')引入全部图表组件。

Components

Recharts 图表根组件
others 图表子组件，详见列表

除Recharts外，其它组件均为options中的对象存在; 例如，options.title作为图表标题的配置项，其值为对象，可以详细配置文本内容、位置、颜色、背景等复杂的样式结构，所以title会以组件的形式存在，即<Title />; 而options.animation控制图表动画，其值为boolean等单一类型，所以animation以Prop的形式存在，即<Recharts animation={false}/>; 另外，options配置项中对象的层级关系即对应着组件间的父子关系;

//例如
<XAxis type="category" />
 
//相当于
option = { xAxis: { type: 'category' } }

节点间的父子关系相当于对象间层级关系；

//例如
<Tooltip trigger="axis">
    <AxisPointer type="cross">
        <Label backgroundColor="#6a7985" />
    </AxisPointer>
</Tooltip>
 
//相当于
option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    }
}

Props

以下属性为Recharts节点仅有的几个echarts之外的属性，其它配置均为透传，无学习成本；

className (optional, string) 图表容器 class 名
style (optional, object) 图表容器样式
onEvents (optional, array) 绑定图表事件
onLoad (optional, function(Instance)) 图表首次加载完毕会执行 onLoad，Instance 为图表实例，可供调用百度图表 API

<Recharts
    onEvents={[['click', params => console.log('click', params)], ['legendselectchanged', params => console.log('legendselectchanged', params)]]}>
    ...
</Recharts>

除此以外，图表init事件与setOption事件的参数可以通过Recharts透传，均非必传，不传为echarts默认值；

// init
<Recharts
    theme="custom-theme"
    devicePixelRatio={window.devicePixelRatio}
    renderer="canvas"
    width={500}
    height={500}>
    ...
</Recharts>
 
// setOption
<Recharts notMerge={true} lazyUpdate={false} silent={true}>...</Recharts>

特别说明： 除width与height属性，其余的init与setOption属性会导致图表重绘。

更多属性查看 https://www.echartsjs.com/option.html

Correlations

戏说组件式百度图表的由来及简单逻辑

喜欢请给个 Star ，谢谢！

LICENSE

MIT@dawiwt