ECharts Wrapper React

It is a project showing use cases of echarts-react-wrapper npm package for embedding Apache ECharts charts in a React application.

Installation

npm install echarts-wrapper-react
npm install echarts

Props

PropTypeDescriptionDefaultExample
option (required)EChartsOptionThe ECharts option configuration object. Refer to the ECharts documentation for more details.N/AExample
themestring | objectTheme configuration for ECharts. This can be either a string representing the theme name like "dark" or "light" or an object defining the theme.N/A
optsEChartsInitOptsAdditional options for initializing ECharts, such as devicePixelRatio and renderer.N/A
autoResizebooleanDetermines whether the chart should automatically resize when the window is resized.true
onEventsEChartsReactComponentProps["onEvents"]Event handlers for ECharts events. Each key represents an event type, and the corresponding value is a function that handles the event.N/AExample
widthPixelValueWidth of the chart. Accepts a string representing a CSS pixel value.N/A
heightPixelValueHeight of the chart. Accepts a string representing a CSS pixel value.N/A
loadingTypestringType of loading animation for ECharts like "default".N/A
loadingOptionobjectConfiguration options for the loading inside showLoading, such as text, color, and maskColor.N/A
notMergebooleanConfig for ECharts, default is false.false
lazyUpdatebooleanConfig for ECharts, default is false.false

Theme Prop Example

This example demonstrates how to use the theme prop to apply custom styling to the chart.


    import { EChartsReact, EChartsOption } from 'echarts-wrapper-react';
    import { registerTheme } from 'echarts';
    
    const greenOrangeTheme = {
      color: [
        '#32CD32', // Lime Green
        '#FFA500', // Orange
        '#228B22', // Forest Green
        '#FF8C00', // Dark Orange
        '#006400', // Dark Green
        '#FF4500', // Orange Red
        '#ADFF2F', // Green Yellow
        '#FF6347', // Tomato
      ],
      backgroundColor: '#F0FFF0', // Honeydew background
      textStyle: {
        color: '#228B22', // Forest Green text
      },
    };
    
    registerTheme('greenOrangeTheme', greenOrangeTheme);

    //define option 

    return (
        <div style={{ width: '50vw', height: '50vh' }}>
            <EChartsReact option={option} theme="greenOrangeTheme" />
        </div>
    )

You can customize the theme using the ECharts Theme Builder.

You can use "dark" and "light" themes as well.

Using opts with EChartsReact


    import { EChartsReact, EChartsOption, EChartsReactComponentProps } from 'echarts-wrapper-react';

    const BasicLineChart = () => {
        
      //define option

      const opts: EChartsReactComponentProps['opts'] = {
        devicePixelRatio: 2,
        renderer: 'svg',
      };

      return (
        <div style={{ width: '50vw', height: '50vh' }}>
          <EChartsReact option={option} opts={opts} />
        </div>
      );
    };