Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/xlsdg/react-echarts-v3
React.js(v16.x+) component wrap for ECharts.js(v3.x+)
https://github.com/xlsdg/react-echarts-v3
chart echarts library react react-component react-echarts reactjs visualization
Last synced: 6 days ago
JSON representation
React.js(v16.x+) component wrap for ECharts.js(v3.x+)
- Host: GitHub
- URL: https://github.com/xlsdg/react-echarts-v3
- Owner: xlsdg
- License: mit
- Created: 2016-11-30T02:15:26.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2020-04-07T11:17:38.000Z (over 4 years ago)
- Last Synced: 2024-10-20T10:49:39.062Z (19 days ago)
- Topics: chart, echarts, library, react, react-component, react-echarts, reactjs, visualization
- Language: JavaScript
- Homepage: https://xlsdg.github.io/react-echarts-v3-demo/
- Size: 2.08 MB
- Stars: 50
- Watchers: 1
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-echarts - react-echarts-v3 - React component wrap for Apache ECharts (v3.x). (Frameworks / React Component)
README
# react-echarts-v3 [](https://www.npmjs.com/package/react-echarts-v3) [](https://reactjs.org/) [](http://echarts.baidu.com/)
> [React.js](https://reactjs.org/) `v16.x+` component wrap for [ECharts.js](http://echarts.baidu.com/) `v3.x+`
## Feature
1. Lightweight, efficient, on-demand binding events;
2. Support for importing ECharts.js charts and components on demand;
3. Support component resize event auto update view;
## Installation
```bash
$ npm install --save echarts react-echarts-v3
```
## Usage
0. Change webpack config
For webpack 1.x:
```diff
{
test: /\.jsx?$/,
loader: 'babel',
include: [
- path.join(prjRoot, 'src')
+ path.join(prjRoot, 'src'),
+ path.join(prjRoot, 'node_modules/react-echarts-v3/src')
],
- exclude: /node_modules/
+ exclude: /node_modules(?![\\/]react-echarts-v3[\\/]src[\\/])/
},
```
For webpack 2.x+:
```diff
{
test: /\.jsx?$/,
loader: 'babel-loader',
- include: [resolve('src'), resolve('test')]
+ include: [resolve('src'), resolve('test'), resolve('node_modules/react-echarts-v3/src')]
}
```
1. Import all charts and components
```javascript
import IEcharts from 'react-echarts-v3/src/full.js';
const option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
const onEvents = {
'click': function(params) {
// the 'this' variable can get echarts instance
console.log(params);
}
};
return (
);
```
2. Import ECharts.js modules manually to reduce bundle size
```javascript
import IEcharts from 'react-echarts-v3/src/lite.js';
// Import all charts and components
// require('echarts/lib/chart/line');
require('echarts/lib/chart/bar');
// require('echarts/lib/chart/pie');
// require('echarts/lib/chart/scatter');
// require('echarts/lib/chart/radar');
// require('echarts/lib/chart/map');
// require('echarts/lib/chart/treemap');
// require('echarts/lib/chart/graph');
// require('echarts/lib/chart/gauge');
// require('echarts/lib/chart/funnel');
// require('echarts/lib/chart/parallel');
// require('echarts/lib/chart/sankey');
// require('echarts/lib/chart/boxplot');
// require('echarts/lib/chart/candlestick');
// require('echarts/lib/chart/effectScatter');
// require('echarts/lib/chart/lines');
// require('echarts/lib/chart/heatmap');
// require('echarts/lib/component/graphic');
// require('echarts/lib/component/grid');
// require('echarts/lib/component/legend');
// require('echarts/lib/component/tooltip');
// require('echarts/lib/component/polar');
// require('echarts/lib/component/geo');
// require('echarts/lib/component/parallel');
// require('echarts/lib/component/singleAxis');
// require('echarts/lib/component/brush');
// require('echarts/lib/component/title');
// require('echarts/lib/component/dataZoom');
// require('echarts/lib/component/visualMap');
// require('echarts/lib/component/markPoint');
// require('echarts/lib/component/markLine');
// require('echarts/lib/component/markArea');
// require('echarts/lib/component/timeline');
// require('echarts/lib/component/toolbox');
// require('zrender/lib/vml/vml');
const option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
return (
);
```
## propTypes
```javascript
className: PropTypes.string,
style: PropTypes.object,
group: PropTypes.string,
theme: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
initOpts: PropTypes.object,
option: PropTypes.object.isRequired,
notMerge: PropTypes.bool,
lazyUpdate: PropTypes.bool,
onReady: PropTypes.func,
onResize: PropTypes.func,
loading: PropTypes.bool,
resizable: PropTypes.bool,
optsLoading: PropTypes.object,
onEvents: PropTypes.object
```
[Read More](http://echarts.baidu.com/option.html)
## defaultProps
```javascript
className: 'react-echarts',
style: { width: '100%', height: '100%' },
notMerge: false,
lazyUpdate: false,
onReady: function(instance, ECharts) {},
onResize: function(width, height) {},
loading: false,
resizable: false,
optsLoading: {
text: 'loading',
color: '#c23531',
textColor: '#000',
maskColor: 'rgba(255, 255, 255, 0.8)',
zlevel: 0
},
onEvents: {}
```
## Demo
[react-echarts-v3-demo](https://github.com/xlsdg/react-echarts-v3-demo)
# License
MIT