Awesome
rc-echarts
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
License
rc-echart is released under the MIT license.