Have ideas to improve npm?Join in the discussion! »

@cany/r-charts

0.0.4 • Public • Published

A simple chart components based on React and Echarts(3.x & 4.x)

Install

npm install --save echarts @cany/r-charts

Usage

to use directly

import React from 'react';
import RCharts from '@cany/r-charts';
import 'echarts/lib/chart/line';
// import 'echarts/lib/chart/bar';
// import 'echarts/lib/chart/pie';
// ....
 
<RCharts
  option={this.getOption()}
  theme={'ThemeName'}
  events={this.events}
/>

inherit

// ReLine.js
import RCharts from '@cany/r-charts';
import 'echarts/lib/chart/line';
 
export default class ReLine extends RCharts {};
 
// main.js
<ReLine
  option={this.getOption()}
  theme={'ThemeName'}
  events={this.events}
/>

Component Props

  • option (required, object)

    the echarts option config, can see option.

  • style (optional, object)

    the style of echarts container. it is { height: 300 } by default.

  • className (optional, string)

    the class of echarts container.

  • theme (optional, string)

    the theme of echarts, should use registerTheme before using it

  • events (optional, object)

    binding the echarts event, it will be invoked with the echarts event object as paramters.

    let events = {
      'click': this.onChartClick,
      ...
    }
     
    <RCharts
      option={ this.getOption() }
      style={{ height: 300 }}
      events={ events } 
    />

    for more events, see events

  • initOptions (optional, object)

    the third options when create an echarts instance by invoking the echart.init api

  • setOptionOpts (optional, object)

    the second options as object, when set echarts instance by invoking the echartsInstance.setOption api

Component API

  • getEchartsInstance()

    get the echarts instance, then you can use any API of echarts. e.g:

    <RCharts 
      ref={ inst => { this.rcharts = inst } }
      option={ this.getOption() } 
    />
     
    const echarts = this.rcharts..getEchartsInstance()
    echarts.resize()

    About API of echarts instance, can see echartsInstance.

Licensee

MIT@kimozhang.

Keywords

Install

npm i @cany/r-charts

DownloadsWeekly Downloads

2

Version

0.0.4

License

MIT

Unpacked Size

27.6 kB

Total Files

8

Last publish

Collaborators

  • avatar