React-echarts-wrapper NPM

react-echarts-wrapper

React.js component wrap for ECharts.js

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

yarn add echarts react-echarts-wrapper

Usage

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} />
);

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

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