@guoliim/react-echarts
v0.0.13
Published
react hook & typyscript to wrapper echarts
Downloads
153
Maintainers
Readme
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 behavioron: 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)
}}
/>
)
}
RoadMap
License
MIT@guoliim
To-do
- [x] add types/index.d.ts support
- [x] add eslint / typescript lint
- [x] add prettier
- [x] add test
- [x] add doc
- [x] add example for local
- [ ] add example for online
- [ ] add publish script for npm registry & github pkg registry
- [ ] promote test coverage