React.jsv16.x+ component wrap for ECharts.jsv3.x+

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;

$ npm install --save echarts react-echarts-v3

0. 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')] }

1. Import all charts and components

   importIEchartsfrom'react-echarts-v3/src/full.js';constoption={title: {text: 'ECharts 入门示例'},tooltip: {},xAxis: {data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},yAxis: {},series: [{name: '销量',type: 'bar',data: [5,20,36,10,10,20]}]};constonEvents={'click': function(params){// the 'this' variable can get echarts instanceconsole.log(params);}};return(<IEchartsoption={option}onEvents={onEvents}/>);

2. Import ECharts.js modules manually to reduce bundle size

   importIEchartsfrom'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');constoption={title: {text: 'ECharts 入门示例'},tooltip: {},xAxis: {data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},yAxis: {},series: [{name: '销量',type: 'bar',data: [5,20,36,10,10,20]}]};return(<IEchartsoption={option}/>);

 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

 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: {}

react-echarts-v3-demo

MIT