#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

基础使用

import {Echarts} from "./index";

const Page = () => {
	const option = {...}
	return <Echarts width={500} height={400} option={option}/>
}

使用远程数据

const Page = ()=>{
	const { data, loading, error } = useRequest(getUser)	// 获取API数据
	const option = {...data}	// data组成echarts option

	return <Echarts width={500} height={400} option={option} error={error} loading={loading}/>
}

调用echarts实例的方式

例如绑定echarts事件

const Page = ()=>{
	const chartRef = useRef<EChartsInstance>()
	useEffect(()=>{
		if(chartRef.current){
			// 参考API https://echarts.apache.org/zh/api.html#echartsInstance.on
			chartRef.current?.on('click', ()=>{ ... })
		}
	},[])

	return <Echarts width={500} height={400} chartRef={chartRef}/>
}

自定义失败的视图

const MyErrorView = ()=>{
	return <>...</>
}

const Page = ()=>{
	const { data, loading, error } = useRequest(getUser)	// 获取API数据
	const option = {...data}	// data组成echarts option

	return <Echarts width={500} height={400} option={...} error={error} loading={loading} errorView={<MyErrorView/>}/>
}