Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including echarts-for-react-wclouds with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. var echartsForReactWclouds = require("echarts-for-react-wclouds")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

echarts-for-react-wclouds v0.0.2

baidu Echarts(v3.0) components for react

echarts-for-react

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

Build Status npm npm npm

1. 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/

2. 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';  // or var ReactEcharts = require('echarts-for-react');

<ReactEcharts
    option={this.getOption()} 
    notMerge={true}
    lazyUpdate={true}
    theme={"theme_name"}
    onChartReady={this.onChartReadyCallback}
    onEvents={EventsDict} />

3. component props

  • option (required, object)

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

  • notMerge (required, object)

when setOption, not merge the data, default is false. See http://echarts.baidu.com/api.html#echartsInstance.setOption.

  • lazyUpdate (required, object)

when setOption, lazy update the data, default is false. See http://echarts.baidu.com/api.html#echartsInstance.setOption.

  • style (optional, object)

the style of echarts div. object, default is {height: '300px'}.

  • className (optional, string)

the class of echarts div. you can setting the css style of charts by class name.

  • theme (optional, string)

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.getOption()} 
    style={{height: '300px', width: '100%'}} 
    className='echarts-for-echarts' 
    theme='my_theme' /> 

  • onChartReady (optional, function)

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

  • showLoading (optional, bool, default: false)

bool, when the chart is rendering, show the loading mask.

  • onEvents (optional, array(string=>function) )

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.getOption()} 
    style={{height: '300px', width: '100%'}} 
    onEvents={onEvents} />

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

4. Component API & Echarts API

the Component only has one API named getEchartsInstance.

  • getEchartsInstance() : get the echarts instance object, then you can use any API of echarts.

for example:

// render the echarts component below with rel
<ReactEcharts ref='echarts_react'
    option={this.getOption()} />

// then get the `ReactEcharts` use this.refs.echarts_react

let echarts_instance = this.refs.echarts_react.getEchartsInstance();
// then you can use any API of echarts.
let base64 = echarts_instance.getDataURL();

About API of echarts, can see http://echarts.baidu.com/api.html#echartsInstance.

you can use the API to do:

  1. binding / unbinding event.
  2. dynamic charts with dynamic data.
  3. get the echarts dom / dataURL / base64, save the chart to png.
  4. release the charts.

5. LICENSE

MIT

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free