Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/somonus/react-echarts
React echarts
https://github.com/somonus/react-echarts
Last synced: about 1 month ago
JSON representation
React echarts
- Host: GitHub
- URL: https://github.com/somonus/react-echarts
- Owner: somonus
- License: mit
- Created: 2015-12-09T09:42:32.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2020-08-26T08:49:56.000Z (over 4 years ago)
- Last Synced: 2024-06-21T23:28:43.968Z (6 months ago)
- Language: JavaScript
- Size: 44.9 KB
- Stars: 128
- Watchers: 10
- Forks: 34
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-echarts - react-echarts
README
# rc-echarts
[](https://www.npmjs.org/package/rc-echarts)
[](https://www.npmjs.org/package/rc-echarts)
## install
$ npm install rc-echarts
## Usage
###用法一
完全和echarts一致，将echarts的options传给组件。通过onReady能获取到echarts对象，从而进行绑定事件等一系列操作。
```js
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() {
}
})
ReactDOM.render(, container);
```
###用法二
将options中的series抽离成单独的react组件。
注：以下示例中，options为echarts官方的options除了series的所有选项，详见[文档](http://echarts.baidu.com/option.html)。series为echarts官方series的选项，详见[文档](http://echarts.baidu.com/option.html#series)
*折线图*
```js
import Chart from 'rc-echarts';
import React from 'react';
import ReactDOM from 'react-dom';
const myChart = React.creatClass({
render() {
}
})
ReactDOM.render(, container);
```
*柱状图*
```js
import Chart from 'rc-echarts';
import React from 'react';
import ReactDOM from 'react-dom';
const myChart = React.creatClass({
render() {
}
})
ReactDOM.render(, container);
```
*饼图*
```js
import Chart from 'rc-echarts';
import React from 'react';
import ReactDOM from 'react-dom';
const myChart = React.creatClass({
render() {
}
})
ReactDOM.render(, container);
```
*标签云图*
```js
import Chart from 'rc-echarts';
import React from 'react';
import ReactDOM from 'react-dom';
const myChart = React.creatClass({
render() {
}
})
ReactDOM.render(, container);
```
*地图*
```js
import Chart from 'rc-echarts';
import React from 'react';
import ReactDOM from 'react-dom';
const myChart = React.creatClass({
render() {
}
})
ReactDOM.render(, container);
```
*未指定类型的series*
如果想要导入非前面几种类型的图表，可使用Chart.Series。自己指定类型。
```js
import Chart from 'rc-echarts';
import React from 'react';
import ReactDOM from 'react-dom';
const myChart = React.creatClass({
render() {
}
})
ReactDOM.render(, container);
```
*获取echarts对象*
可使用onReady属性来获取echarts对象，对其进行官方提供的各种操作，如绑定事件等。
```js
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 (
);
}
})
ReactDOM.render(, container);
```
##Example
*run demo*
```
npm install
npm start
```
open [http://localhost:8080/](http://localhost:8080/)
## License
rc-echart is released under the MIT license.