React echarts
JavaScript HTML
Switch branches/tags
Clone or download
Latest commit 90cf72c Nov 18, 2016
Permalink
Failed to load latest commit information.
example add example of scatter Jul 8, 2016
lib onReady bug fix Jun 24, 2016
src 复用 echarts 实例 Sep 22, 2016
.babelrc init Dec 9, 2015
.eslintignore init Dec 9, 2015
.eslintrc init Dec 9, 2015
.gitignore update Dec 12, 2015
CHANGELOG.md onReady bug fix Jun 24, 2016
LICENSE update Dec 11, 2015
README.md Update README.md Nov 18, 2016
package.json onReady bug fix Jun 24, 2016

README.md

rc-echarts

NPM Version npm

install

$ npm install rc-echarts

Usage

###用法一

完全和echarts一致,将echarts的options传给组件。通过onReady能获取到echarts对象,从而进行绑定事件等一系列操作。

import Chart from 'rc-echarts';
import React from 'react';
import ReactDOM from 'react-dom';

const myChart = React.creatClass({
  ready(echart) {
    console.log(echart);
    echart.on('click', (params)=>{
      console.log(params);
      alert("click");
    });
  }

  render() {
    <Chart options={ options } onReady={this.ready} />
  }
})
ReactDOM.render(<myChart />, container);

###用法二

将options中的series抽离成单独的react组件。

注:以下示例中,options为echarts官方的options除了series的所有选项,详见文档。series为echarts官方series的选项,详见文档

折线图

import Chart from 'rc-echarts';
import React from 'react';
import ReactDOM from 'react-dom';

const myChart = React.creatClass({
  render() {
    <Chart {...options} >
        <Chart.Line {...series} />
        <Chart.Line {...series1} />
    </Chart>
  }
})
ReactDOM.render(<myChart />, container);

柱状图

import Chart from 'rc-echarts';
import React from 'react';
import ReactDOM from 'react-dom';

const myChart = React.creatClass({
  render() {
    <Chart {...options} >
        <Chart.Bar {...series} />
    </Chart>
  }
})
ReactDOM.render(<myChart />, container);

饼图

import Chart from 'rc-echarts';
import React from 'react';
import ReactDOM from 'react-dom';

const myChart = React.creatClass({
  render() {
    <Chart {...options} >
        <Chart.Pie {...series} />
    </Chart>
  }
})
ReactDOM.render(<myChart />, container);

标签云图

import Chart from 'rc-echarts';
import React from 'react';
import ReactDOM from 'react-dom';

const myChart = React.creatClass({
  render() {
    <Chart {...options} >
        <Chart.Cloud {...series} />
    </Chart>
  }
})
ReactDOM.render(<myChart />, container);

地图

import Chart from 'rc-echarts';
import React from 'react';
import ReactDOM from 'react-dom';

const myChart = React.creatClass({
  render() {
    <Chart {...options} >
        <Chart.Map {...series} />
    </Chart>
  }
})
ReactDOM.render(<myChart />, container);

未指定类型的series

如果想要导入非前面几种类型的图表,可使用Chart.Series。自己指定类型。

import Chart from 'rc-echarts';
import React from 'react';
import ReactDOM from 'react-dom';

const myChart = React.creatClass({
  render() {
    <Chart {...options} >
        <Chart.Series {...series} type="line" />
    </Chart>
  }
})
ReactDOM.render(<myChart />, container);

获取echarts对象

可使用onReady属性来获取echarts对象,对其进行官方提供的各种操作,如绑定事件等。

import Chart from 'rc-echarts';
import React from 'react';
import ReactDOM from 'react-dom';

const myChart = React.creatClass({
  ready(chart) {
    chart.on('click', ()=>{
      alert('click');
    });
  }

  render() {
    const options = {
      legend: {
        data: ['最高气温', '最低气温'],
      },
      xAxis: [{
        type: 'category',
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      }],
      yAxis: [{
        type: 'value',
        axisLabel: {
          formatter: '{value} °C'
        }
      }],
    };
    return (
      <Chart {...options} onReady={this.ready}>
        <Chart.Line
          name="最高气温"
          data={[11, 11, 15, 13, 12, 13, 10]}/>
        <Chart.Line
          name="最低气温"
          data={[1, -2, 2, 5, 3, 2, 0]}/>
      </Chart>
    );
  }
})
ReactDOM.render(<myChart />, container);

##Example

run demo

npm install
npm start

open http://localhost:8080/

License

rc-echart is released under the MIT license.