react-echarts-wrapper

React.js component wrap for ECharts.js

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

yarn add echarts react-echarts-wrapper

Usage

1. Import all charts and components

   import * as ECharts from 'echarts';
   import Wrapper from 'react-echarts-wrapper';
   
   const IEcharts = Wrapper(ECharts);
   
   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} />
   );

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

   import * as ECharts from "echarts/core";
   import { BarChart } from "echarts/charts";
   import { TitleComponent, TooltipComponent, GridComponent } from "echarts/components";
   import { CanvasRenderer } from "echarts/renderers";
   import Wrapper from 'react-echarts-wrapper';
   
   ECharts.use([
     TitleComponent,
     TooltipComponent,
     GridComponent,
     BarChart,
     CanvasRenderer,
   ]);
   const IEcharts = Wrapper(ECharts);
   
   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,
    theme:        PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
    group:        PropTypes.string,
    option:       PropTypes.object.isRequired,
    initOpts:     PropTypes.object,
    notMerge:     PropTypes.bool,
    lazyUpdate:   PropTypes.bool,
    loading:      PropTypes.bool,
    loadingOpts:  PropTypes.object,
    resizable:    PropTypes.bool,
    onReady:      PropTypes.func,
    onResize:     PropTypes.func,
    onEvents:     PropTypes.object

Read More

defaultProps

    className: 'react-echarts',
    style: { width: '100%', height: '100%' },
    notMerge: false,
    lazyUpdate: false,
    loading: false,
    resizable: false,
    onReady: (instance, echarts) => {},
    onResize: (width, height) => {},
    onEvents: {}

License

MIT