react-echarts-v3
React.js component wrap for ECharts.js(v3.x+)
Feature
轻量,更高的效率,支持按需引入 ECharts 的图表和组件,配合react-grid-layout支持拖拽布局。
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
;const option =title:text: 'ECharts 入门示例'tooltip: {}xAxis:data: "衬衫""羊毛衫""雪纺衫""裤子""高跟鞋""袜子"yAxis: {}series:name: '销量'type: 'bar'data: 5 20 36 10 10 20;const onEvents ={// the 'this' variable can get echarts instanceconsole;};return<IEcharts option=option onEvents=onEvents />; -
Import ECharts.js modules manually to reduce bundle size
;// Import all charts and components// require('echarts/lib/chart/line');;// 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: PropTypesstring style: PropTypesobject group: PropTypesstring theme: PropTypes initOpts: PropTypesobject option: PropTypesobjectisRequired notMerge: PropTypesbool lazyUpdate: PropTypesbool onReady: PropTypesfunc onResize: PropTypesfunc loading: PropTypesbool resizable: PropTypesbool optsLoading: PropTypesobject onEvents: PropTypesobject
defaultProps
className: 'react-echarts' style: width: '100%' height: '100%' notMerge: false lazyUpdate: false {} {} loading: false resizable: false optsLoading: text: 'loading' color: '#c23531' textColor: '#000' maskColor: 'rgba(255, 255, 255, 0.8)' zlevel: 0 onEvents: {}
Demo
License
MIT