基于React Hooks 封装一个Echarts组件
基于React Hooks 封装一个Echarts组件
官网 https://echarts.apache.org/zh/index.html
1 Echarts全局配置
echarts.config.js
// 引入 echarts 核心模块,核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入柱状图图表,图表后缀都为 Chart
import { BarChart,PieChart } from 'echarts/charts';
// 引入提示框,标题,直角坐标系,数据集,内置数据转换器组件,组件后缀都为 Component
import {
TitleComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent,
LegendComponent
} from 'echarts/components';
// 标签自动布局,全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器,注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';
// 注册必须的组件
echarts.use([
TitleComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent,
BarChart,
LabelLayout,
UniversalTransition,
CanvasRenderer,
LegendComponent,
PieChart
]);
export default echarts;
2 封装React Echarts组件
import React, { useEffect, useRef,memo } from 'react'
import echarts from './echarts.config'
import './ReactEchartComponent.css'
const ReactEchartComponent = (props) => {
const { option: chartOptions, clickHandler, className } = props
const dom = useRef()
useEffect(() => {
if (chartOptions) {
const chart = echarts.init(dom.current)
// chart.showLoading()
clickHandler && chart.on('click', clickHandler)
chart.setOption(chartOptions)
// chart.hideLoading()
}
}, [chartOptions, clickHandler])
return (
<div className={className} ref={dom}></div>
)
}
export memo(ReactEchartComponent)
3 使用组件
import React from 'react'
import { useCallback } from 'react';
import { ReactEchartComponent } from '../component/ReactEchartComponent';
import './ReactEchartDemo.css'
const option = {
legend: {
orient: 'vertical',
x: 'right',
data: ['A', 'B', 'C', 'D', 'E']
},
series: [
{
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'left',
emphasis: {
show: true
}
},
labelLine: {
show: true
},
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
},
data: [
{ value: 335, name: 'A' },
{ value: 310, name: 'B' },
{ value: 234, name: 'C' },
{ value: 135, name: 'D' },
{ value: 1548, name: 'E' }
]
}
]
};
export const ReactEchartDemo = () => {
const clickHandler = useCallback(
(e) => {
console.log(e);
}, [])
return (
<div className='con'>
<ReactEchartComponent clickHandler={clickHandler} className="chart" option={option}></ReactEchartComponent>
</div>
)
}
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库