@guoliim/react-echarts NPM

react-echarts

a react wrapper component for echarts which steal ideal from echarts-for-react by react hook & typescript.

Install

use npm

npm install @guoliim/react-echarts

use yarn

yarn add @guoliim/react-echarts

Usage

import React from 'react'
import echarts from 'echarts'
import Charts from '@guoliim/react-echarts'

<Chart
    echarts={echarts}
    data={
        option, /* option to render in echarts */
    }
/>

API

echarts

description
Required, echarts module include version 3.x or 4.x
type
--
example
echarts

className

description
Optional, css class name to style charts, especially block-size
type
string
example
classNameToStyleChart

data

description
Required, include three part
- option: required, data & params that echarts to be merged to generate and render in chart
- opts: optional, include notMerge, lazyUpdate, silent to modify echarts instance merge & update & silent behavior
- on: optional, bind event on echarts instance
  mode detail can be found in official doc

type

    {
        data: Object,
        opts?: {
            notMerge?: boolean,
            lazyUpdate?: boolean,
            silent?: boolean
        },
        on?: {
            event: string
            handler: (params: unknown) => unknown
        }[]
    }

default / example

default: lazyUpdate value is true

example:

    {
        option: {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Mon', 'Tue', 'Tue', 'Tue', 'Tue', 'Tue']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line'
            }]
        },
        on: [
            {
                event: 'click',
                handler: handlerTest,
            },
        ],
    }

opts

description
Optional, option to modify init echarts instance

type

    {
        devicePixelRatio?: number
        renderer?: string
        width?: number | string
        height?: number | string
    }

default / example

default: { rerender: 'svg' }

example:

    {
        devicePixelRatio: 15,
        renderer: 'canvas',
        width: 300,
        height: 300,
    }

theme

description
Optional, Theme to be applied. This can be a configuring object of a theme, or a theme name registered through echarts.registerTheme.
type
Object
example
--

disableLoading

description
Optional, when echarts loading, show the loading mask
type
boolean
example
false

onLoading

description
Optional, then function to set how the loading mask showing
type
(echarts: ECharts) => unknown

example

    const showLoading = (chart) => {
        chart.clear()
        chart.showLoading({
            text: '努力加载中',
            color: '#333',
            textColor: '#333',
            maskColor: 'transparent'
        })
    }

onEchartsReady

description
Optional, the handle when echarts instance settled successfully
type
(echarts: ECharts) => unknown

example

    (echarts) => {
        console.log('ready', echarts)
    }

Echarts API

echarts option & params & api can found in official doc

Example

    import React from 'react'
    import echarts from 'echarts'
    import styled from '@emotion/styled'

    import Chart from '../src'

    export default {
        title: 'Charts',
        component: Chart,
    }

    const LineChart = styled(Chart)`
        block-size: 200px;
    `

    export const LineCharts = () => {

        const handlerTest = React.useCallback((params) => {console.log('click', params)}, [])
        const showLoading = React.useCallback((chart) => {
            chart.clear()
            chart.showLoading({
            text: '努力加载中',
            color: '#333',
            textColor: '#333',
            maskColor: 'transparent'
            })
        }, [])

        const chartData = {
            option: {
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Mon', 'Tue', 'Tue', 'Tue', 'Tue', 'Tue']
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: [820, 932, 901, 934, 1290, 1330, 1320],
                    type: 'line'
                }]
            },
            on: [
                {
                    event: 'click',
                    handler: handlerTest,
                },
            ],
        }

        return (
            <LineChart
                echarts={echarts}
                data={chartData}
                onLoading={showLoading}
                onEchartsReady={(echarts) => {
                    console.log('ready', echarts)
                }}
        />
        )
    }