#Echarts-React

Introduce

使用React的方式使用echarts

• 相应loading、error、option的变化
• 可自定义error时的视图
• 默认处理resize事件
• option透传，与echarts的配置一致
• 暴露echarts实例，方便事件绑定与事件触发

未实现的功能

• 未实现echarts的按需引入，默认使用import * as echarts from 'echarts'引入整个echarts包

Install

依赖react和echarts，需要先安装react和echarts

npm install @kamuisdo/echarts-react

pnpm add @kamuisdo/echarts-react

How to use

基础使用

1import {Echarts} from "./index";
2
3const Page = () => {
4	const option = {...}
5	return <Echarts width={500} height={400} option={option}/>
6}

使用远程数据

1const Page = ()=>{
2	const { data, loading, error } = useRequest(getUser)	// 获取API数据
3	const option = {...data}	// data组成echarts option
4
5	return <Echarts width={500} height={400} option={option} error={error} loading={loading}/>
6}

调用echarts实例的方式

例如绑定echarts事件

1const Page = ()=>{
2	const chartRef = useRef<EChartsInstance>()
3	useEffect(()=>{
4		if(chartRef.current){
5			// 参考API https://echarts.apache.org/zh/api.html#echartsInstance.on
6			chartRef.current?.on('click', ()=>{ ... })
7		}
8	},[])
9
10	return <Echarts width={500} height={400} chartRef={chartRef}/>
11}

自定义失败的视图

1const MyErrorView = ()=>{
2	return <>...</>
3}
4
5const Page = ()=>{
6	const { data, loading, error } = useRequest(getUser)	// 获取API数据
7	const option = {...data}	// data组成echarts option
8
9	return <Echarts width={500} height={400} option={...} error={error} loading={loading} errorView={<MyErrorView/>}/>
10}