Skip to content

dawiwt/react-component-echarts

Repository files navigation

Example

React Component Echarts

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

Build Status npm npm

Feature

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

Tools

Install

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

#自主安装echarts
npm install echarts --save

Quick Start

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

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等单一类型,所以animationProp的形式存在,即<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)) 图表首次加载完毕会执行 onLoadInstance 为图表实例,可供调用百度图表 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>

特别说明:widthheight属性,其余的initsetOption属性会导致图表重绘。

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

Correlations

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

喜欢请给个 Star ,谢谢!

LICENSE

MIT@dawiwt