Awesome
react-echarts-v3
![echarts3](https://img.shields.io/badge/echarts-3.x-brightgreen.svg)
React.js
v16.x+
component wrap for ECharts.jsv3.x+
Feature
- Lightweight, efficient, on-demand binding events;
- Support for importing ECharts.js charts and components on demand;
- Support component resize event auto update view;
Installation
$ npm install --save echarts react-echarts-v3
Usage
-
Change webpack config
For webpack 1.x:
{ 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+:
{ test: /\.jsx?$/, loader: 'babel-loader', - include: [resolve('src'), resolve('test')] + include: [resolve('src'), resolve('test'), resolve('node_modules/react-echarts-v3/src')] }
-
Import all charts and components
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 ( <IEcharts option={option} onEvents={onEvents} /> );
-
Import ECharts.js modules manually to reduce bundle size
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 ( <IEcharts option={option} /> );
propTypes
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
defaultProps
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
License
MIT