Skip to content
React component echarts. 组件式百度图表。
Branch: master
Clone or download
Latest commit 3bcabe5 Jun 2, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo 1. favicon.ico May 24, 2019
src fix issues #3. Jun 2, 2019
tools 1. favicon.ico May 24, 2019
.babelrc plugin-syntax-dynamic-import. May 23, 2019
.gitignore ignore gh-pages. May 23, 2019
.npmignore init Apr 2, 2019
.travis.yml add local-dir Mar 22, 2019
CHANGELOG.md v0.1.6 Jun 2, 2019
LICENSE Create LICENSE Mar 21, 2019
README.md update README.md May 23, 2019
example.png README.md image Apr 8, 2019
favicon.ico 1. favicon.ico May 24, 2019
icon.png README.md image Apr 8, 2019
package-lock.json 1. favicon.ico May 24, 2019
package.json v0.1.6 Jun 2, 2019
tags.js remove data Mar 12, 2019
tools.gif add tools gif May 21, 2019
webpack.config.js 1. favicon.ico May 24, 2019
webpack.gh-pages.js 1. favicon.ico May 24, 2019

README.md

Example

React Component Echarts

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

Build Status npm 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

You can’t perform that action at this time.