use-react-echarts

React hooks for Apache Echarts.

Install

1$ pnpm add use-react-echarts -S
2
3# `echarts` is the peerDependence of `use-react-echarts`, you can install echarts with your own version.
4$ pnpm add echarts -S

Usage

1. Basic usage

1import useReactEcharts from 'use-react-echarts';
2
3// This will import all the charts and components in ECharts
4const [ref, chart] = useReactEcharts({ options })
5
6// Only import required charts and components 
7const [ref, chart] = useReactEcharts({ echarts, ...option })

• option The echarts option config.

• echarts For minimal bundle of echarts. By default, use-react-echarts import all the charts and components in ECharts.You can pass the echarts props with the required Echarts modules to reduce bundle size

2. Import ECharts modules manually to reduce bundle size

1import type { BarSeriesOption, LineSeriesOption } from 'echarts/charts'
2import { BarChart, LineChart } from 'echarts/charts'
3import type {
4  DatasetComponentOption,
5  GridComponentOption,
6  TitleComponentOption,
7  TooltipComponentOption
8} from 'echarts/components'
9import {
10  DataZoomComponent,
11  GridComponent,
12  LegendComponent,
13  TitleComponent,
14  ToolboxComponent,
15  TooltipComponent,
16  VisualMapComponent
17} from 'echarts/components'
18import * as echarts from 'echarts/core'
19import { CanvasRenderer } from 'echarts/renderers'
20import { useEffect } from 'react'
21
22import useReactEcharts from 'use-react-echarts'
23
24// Register the required components
25echarts.use([
26  CanvasRenderer,
27  TooltipComponent,
28  GridComponent,
29  BarChart,
30  DataZoomComponent,
31  LineChart,
32  ToolboxComponent,
33  TitleComponent,
34  LegendComponent,
35  VisualMapComponent
36])
37
38type ECOption = echarts.ComposeOption<
39  | BarSeriesOption
40  | LineSeriesOption
41  | TitleComponentOption
42  | TooltipComponentOption
43  | GridComponentOption
44  | DatasetComponentOption
45>
46
47const App = () => {
48  const [ref, chart] = useReactEcharts({ echarts, options})
49
50  return <div ref={ref} style={{ height: 380 }} />
51}

Please read import-echarts for more details.

Result

• ref Echarts instance container, usually is a element.

• chart The echarts instance object, then you can use any API of echarts. For example:

1const [ref, chart] = useReactEcharts({ options })
2
3useEffect(() => {
4  if(!chart) return
5  chart.setOption(option)
6}, [chart])
7
8return <div ref={ref} style={{ height: 380 }} >
9

About API of echarts, can see https://echarts.apache.org/api.html#echartsInstance.

LICENSE

MIT@Hong.