神刀安全网

echarts-for-react: baidu Echarts(v3.0) components for React wrapper.

echarts-for-react

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

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.

  • showLoading

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

  • 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

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » echarts-for-react: baidu Echarts(v3.0) components for React wrapper.

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址