JSPM

  • Created
  • Published
  • Downloads 303153
  • Score
    100M100P100Q171224F
  • License MIT

baidu Echarts(v3.0) components for react

Package Exports

  • echarts-for-react

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (echarts-for-react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

echarts-for-react

A very simple echarts(v3.0) wrapper for react.

Build Status npm npm npm

install

npm install echarts-for-react

How to run the demo:

git clone git@github.com:hustcc/echarts-for-react.git

npm install

npm start

then open http://127.0.0.1:8080/ in your browser. or see http://git.hust.cc/echarts-for-react/

usage

Simple demo code. for more example can see: http://git.hust.cc/echarts-for-react/

import React from 'react';
import ReactEcharts from 'echarts-for-react';

<ReactEcharts
    option={this.getOtion()} 
    height={300} 
    theme={"theme_name"}
    onChartReady={this.onChartReadyCallback}
    onEvents={EventsDict} />

component props

  • option

the echarts option config, can see http://echarts.baidu.com/option.html#title.

  • height

the height of echarts. number, with px as it's unit.

  • theme

the theme of echarts. string, should registerTheme before use it (theme object format: https://github.com/ecomfe/echarts/blob/master/theme/dark.js). e.g.

// import echarts
import echarts from 'echarts'; 
...
// register theme object
echarts.registerTheme('my_theme', {
  backgroundColor: '#f4cccc'
});
...
// render the echarts use option `theme`
<ReactEcharts 
    option={this.getOtion()} 
    height={300} 
    theme='my_theme' /> 
  • onChartReady

when the chart is ready, will callback the function with the echarts object as it's paramter.

  • onEvents

binding the echarts event, will callback with the echarts event object, and the echart object as it's paramters. e.g:

let onEvents = {
    'click': this.onChartClick,
    'legendselectchanged': this.onChartLegendselectchanged
}
...
<ReactEcharts
    option={this.getOtion()} 
    height={300} 
    onEvents={onEvents} />

for more event key name, see: http://echarts.baidu.com/api.html#events

TODO

  1. echart API

LICENSE

MIT