Skip to content

Commit 5dbbbe5

Browse files
BigFaceMasterBigFaceMaster
committed
feat: Import the echarts core module, which provides the necessary interfaces for using echarts.
1 parent cc3cb54 commit 5dbbbe5

File tree

3 files changed

+339
-5
lines changed

3 files changed

+339
-5
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "echarts-next-for-react",
3-
"version": "1.0.9",
3+
"version": "1.1.0",
44
"description": "Echarts(v5.x | next) components for react.",
55
"main": "dist/index.js",
66
"module": "dist/index.esm.js",

‎src/index.tsx‎

Lines changed: 23 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,18 @@
11
import type { FC } from 'react';
22
import React, { useEffect, useRef } from 'react';
3-
import type { EChartsOption } from 'echarts';
4-
import { dispose, getInstanceByDom, init } from 'echarts';
53
import classNames from 'classnames';
64
import isFunction from 'lodash/isFunction';
75
import isEmpty from 'lodash/isEmpty';
86
import isString from 'lodash/isString';
97
import { bind, clear } from 'size-sensor';
108
import { useMount, useUnmount } from 'react-use';
9+
// echarts
10+
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
11+
// Import the echarts core module, which provides the necessary interfaces for using echarts.
12+
import type { EChartsOption } from 'echarts';
13+
import * as echarts from 'echarts/core';
14+
15+
import { getRegisterComponents } from '@/utils';
1116

1217
export type EChartsNextForReactCoreProps = {
1318
option: EChartsOption;
@@ -28,6 +33,7 @@ export type EChartsNextForReactCoreProps = {
2833
showLoading?: boolean;
2934
onChartReady?: (arg0: any) => void;
3035
onEvents?: Record<string, unknown>;
36+
renderType?: 'canvas' | 'svg';
3137
};
3238

3339
const EChartsNextForReactCore: FC<EChartsNextForReactCoreProps> = (props) => {
@@ -42,13 +48,26 @@ const EChartsNextForReactCore: FC<EChartsNextForReactCoreProps> = (props) => {
4248
showLoading,
4349
onChartReady,
4450
onEvents,
51+
renderType = 'canvas',
4552
} = props;
53+
// coordinateSystem 'polar': PolarComponent
54+
55+
const isCanvas = renderType === 'canvas';
56+
57+
// necessary Component
58+
const useOps = getRegisterComponents(option, isCanvas);
59+
60+
useEffect(() => {
61+
echarts.use(useOps);
62+
}, []);
63+
4664
const chartRefElements = useRef<HTMLDivElement>(null);
4765

4866
const getChartInstance = () => {
4967
if (chartRefElements?.current) {
5068
return (
51-
getInstanceByDom(chartRefElements?.current) ?? init(chartRefElements?.current, theme, opts)
69+
echarts.getInstanceByDom(chartRefElements?.current) ??
70+
echarts.init(chartRefElements?.current, theme, opts)
5271
);
5372
}
5473
return undefined;
@@ -108,7 +127,7 @@ const EChartsNextForReactCore: FC<EChartsNextForReactCoreProps> = (props) => {
108127
const disposeCurrentChart = () => {
109128
if (chartRefElements?.current) {
110129
clear(chartRefElements?.current);
111-
dispose(chartRefElements?.current);
130+
echarts.dispose(chartRefElements?.current);
112131
}
113132
};
114133

‎src/utils/index.ts‎

Lines changed: 315 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,315 @@
1+
import isEmpty from 'lodash/isEmpty';
2+
import isObject from 'lodash/isObject';
3+
import {
4+
BarChart,
5+
BoxplotChart,
6+
CandlestickChart,
7+
CustomChart,
8+
EffectScatterChart,
9+
FunnelChart,
10+
GaugeChart,
11+
GraphChart,
12+
HeatmapChart,
13+
LineChart,
14+
LinesChart,
15+
MapChart,
16+
ParallelChart,
17+
PictorialBarChart,
18+
PieChart,
19+
RadarChart,
20+
SankeyChart,
21+
ScatterChart,
22+
SunburstChart,
23+
ThemeRiverChart,
24+
TreeChart,
25+
TreemapChart,
26+
} from 'echarts/charts';
27+
// 引入提示框，标题，直角坐标系组件，组件后缀都为 Component
28+
import {
29+
AriaComponent,
30+
AxisPointerComponent,
31+
BrushComponent,
32+
CalendarComponent,
33+
DataZoomComponent,
34+
DataZoomInsideComponent,
35+
DataZoomSliderComponent,
36+
DatasetComponent,
37+
GeoComponent,
38+
GraphicComponent,
39+
GridComponent,
40+
GridSimpleComponent,
41+
LegendComponent,
42+
LegendPlainComponent,
43+
LegendScrollComponent,
44+
MarkAreaComponent,
45+
MarkLineComponent,
46+
MarkPointComponent,
47+
ParallelComponent,
48+
PolarComponent,
49+
RadarComponent,
50+
SingleAxisComponent,
51+
TimelineComponent,
52+
TitleComponent,
53+
ToolboxComponent,
54+
TooltipComponent,
55+
TransformComponent,
56+
VisualMapComponent,
57+
VisualMapContinuousComponent,
58+
VisualMapPiecewiseComponent,
59+
} from 'echarts/components';
60+
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
61+
import { CanvasRenderer, SVGRenderer } from 'echarts/renderers';
62+
import type { EChartsOption } from 'echarts';
63+
64+
const enableComponentBySeriesType = (series: object | any[], type: any) =>
65+
isObject(series)
66+
? // @ts-ignore
67+
series?.type === type
68+
: // @ts-ignore
69+
series?.length > 0 && !!series?.find((v) => v.type === type);
70+
71+
const enableComponentBySeriesProp = (series: object | any[], prop: any) =>
72+
isObject(series)
73+
? // @ts-ignore
74+
series?.[prop]
75+
: // @ts-ignore
76+
series?.length > 0 && !!series?.map(v.prop);
77+
78+
export const getRegisterComponents = (option: EChartsOption, isCanvas: boolean) => {
79+
// necessary Component
80+
let registerComponents = [GridComponent, isCanvas ? CanvasRenderer : SVGRenderer];
81+
if (option && !isEmpty(option)) {
82+
// register title component
83+
const {
84+
title = {},
85+
legend = {},
86+
polar,
87+
radar,
88+
dataZoom,
89+
visualMap,
90+
tooltip = {},
91+
axisPointer = {},
92+
toolbox = {},
93+
brush,
94+
geo,
95+
grid,
96+
parallel,
97+
singleAxis,
98+
timeline = {},
99+
graphic,
100+
calendar,
101+
dataset,
102+
aria = {},
103+
series = [],
104+
} = option ?? {};
105+
const titleOps = isEmpty(title) ? title[0] ?? {} : title;
106+
const { show: titleShow = true } = titleOps ?? {};
107+
if (titleShow) {
108+
registerComponents = [TitleComponent, ...registerComponents];
109+
}
110+
// register legend Component
111+
const legendOps = isEmpty(legend) ? legend[0] ?? {} : legend;
112+
const { show: legendShow = true } = legendOps ?? {};
113+
if (legendShow) {
114+
registerComponents = [
115+
LegendComponent,
116+
LegendPlainComponent,
117+
LegendScrollComponent,
118+
...registerComponents,
119+
];
120+
}
121+
// register polar Component
122+
if (
123+
polar &&
124+
// @ts-ignore
125+
((isObject(series) && series?.coordinateSystem === 'polar') ||
126+
// @ts-ignore
127+
(series?.length > 0 && series?.find((v) => v.coordinateSystem === 'polar')))
128+
) {
129+
registerComponents = [PolarComponent, ...registerComponents];
130+
}
131+
// register radar Component
132+
if (radar || enableComponentBySeriesType(series, 'radar')) {
133+
registerComponents = [RadarChart, RadarComponent, ...registerComponents];
134+
}
135+
// register datazoom Component
136+
if (dataZoom) {
137+
registerComponents = [
138+
DataZoomComponent,
139+
DataZoomSliderComponent,
140+
DataZoomInsideComponent,
141+
...registerComponents,
142+
];
143+
}
144+
// register visualMap Component
145+
if (visualMap) {
146+
registerComponents = [
147+
VisualMapComponent,
148+
VisualMapContinuousComponent,
149+
VisualMapPiecewiseComponent,
150+
...registerComponents,
151+
];
152+
}
153+
// register tooltip Component
154+
const tooltipOps = isEmpty(tooltip) ? tooltip[0] ?? {} : tooltip;
155+
const { show: tooltipShow = true } = tooltipOps ?? {};
156+
if (tooltipShow) {
157+
registerComponents = [TooltipComponent, ...registerComponents];
158+
}
159+
// register axisPointer Component
160+
const axisPointerOps = isEmpty(axisPointer) ? axisPointer[0] ?? {} : axisPointer;
161+
const { show: axisPointerShow } = axisPointerOps ?? {};
162+
if (axisPointerShow) {
163+
registerComponents = [AxisPointerComponent, ...registerComponents];
164+
}
165+
// register toolbox Component
166+
const toolboxOps = isEmpty(toolbox) ? toolbox[0] ?? {} : toolbox;
167+
const { show: toolboxShow = true } = toolboxOps ?? {};
168+
if (toolboxShow) {
169+
registerComponents = [ToolboxComponent, ...registerComponents];
170+
}
171+
// register grid Component
172+
if (grid) {
173+
registerComponents = [GridComponent, GridSimpleComponent, ...registerComponents];
174+
}
175+
// register brush Component
176+
if (brush) {
177+
registerComponents = [BrushComponent, ...registerComponents];
178+
}
179+
// register geo Component
180+
if (
181+
geo || // @ts-ignore
182+
(isObject(series) && series?.coordinateSystem === 'geo') ||
183+
// @ts-ignore
184+
(series?.length > 0 && series?.find((v) => v.coordinateSystem === 'geo'))
185+
) {
186+
registerComponents = [GeoComponent, ...registerComponents];
187+
}
188+
// register parallel Component
189+
if (
190+
parallel ||
191+
enableComponentBySeriesType(series, 'parallel') || // @ts-ignore
192+
(isObject(series) && series?.coordinateSystem === 'parallel') ||
193+
// @ts-ignore
194+
(series?.length > 0 && series?.find((v) => v.coordinateSystem === 'parallel'))
195+
) {
196+
registerComponents = [ParallelChart, ParallelComponent, ...registerComponents];
197+
}
198+
// register singleAxis Component
199+
if (singleAxis) {
200+
registerComponents = [SingleAxisComponent, ...registerComponents];
201+
}
202+
// register timeline Component
203+
const timelineOps = isEmpty(timeline) ? timeline[0] ?? {} : timeline;
204+
const { show: timelineShow = true } = timelineOps ?? {};
205+
if (timelineShow) {
206+
registerComponents = [TimelineComponent, ...registerComponents];
207+
}
208+
// register graphic Component
209+
if (graphic || enableComponentBySeriesType(series, 'graph')) {
210+
registerComponents = [GraphChart, GraphicComponent, ...registerComponents];
211+
}
212+
// register calendar Component
213+
if (calendar) {
214+
registerComponents = [CalendarComponent, ...registerComponents];
215+
}
216+
// register dataset Component
217+
if (dataset) {
218+
registerComponents = [TransformComponent, DatasetComponent, ...registerComponents];
219+
}
220+
// register aria Component
221+
if (aria?.enabled) {
222+
registerComponents = [AriaComponent, ...registerComponents];
223+
}
224+
// register components by series
225+
// register line component
226+
if (enableComponentBySeriesType(series, 'line')) {
227+
registerComponents = [LinesChart, LineChart, ...registerComponents];
228+
}
229+
// register bar component
230+
if (enableComponentBySeriesType(series, 'bar')) {
231+
registerComponents = [BarChart, ...registerComponents];
232+
}
233+
// register pie component
234+
if (enableComponentBySeriesType(series, 'pie')) {
235+
registerComponents = [PieChart, ...registerComponents];
236+
}
237+
// register scatter component
238+
if (enableComponentBySeriesType(series, 'scatter')) {
239+
registerComponents = [ScatterChart, ...registerComponents];
240+
}
241+
// register effectScatter component
242+
if (enableComponentBySeriesType(series, 'effectScatter')) {
243+
registerComponents = [EffectScatterChart, ...registerComponents];
244+
}
245+
// register tree component
246+
if (enableComponentBySeriesType(series, 'tree')) {
247+
registerComponents = [TreeChart, ...registerComponents];
248+
}
249+
// register treemap component
250+
if (enableComponentBySeriesType(series, 'treemap')) {
251+
registerComponents = [TreemapChart, ...registerComponents];
252+
}
253+
// register sunburst component
254+
if (enableComponentBySeriesType(series, 'sunburst')) {
255+
registerComponents = [SunburstChart, ...registerComponents];
256+
}
257+
// register boxplot component
258+
if (enableComponentBySeriesType(series, 'boxplot')) {
259+
registerComponents = [BoxplotChart, ...registerComponents];
260+
}
261+
// register candlestick component
262+
if (enableComponentBySeriesType(series, 'candlestick')) {
263+
registerComponents = [CandlestickChart, ...registerComponents];
264+
}
265+
// register heatmap component
266+
if (enableComponentBySeriesType(series, 'heatmap')) {
267+
registerComponents = [HeatmapChart, ...registerComponents];
268+
}
269+
// register map component
270+
if (enableComponentBySeriesType(series, 'map')) {
271+
registerComponents = [MapChart, ...registerComponents];
272+
}
273+
// register lines component
274+
if (enableComponentBySeriesType(series, 'lines')) {
275+
registerComponents = [LineChart, LinesChart, ...registerComponents];
276+
}
277+
// register sankey component
278+
if (enableComponentBySeriesType(series, 'sankey')) {
279+
registerComponents = [SankeyChart, ...registerComponents];
280+
}
281+
// register funnel component
282+
if (enableComponentBySeriesType(series, 'funnel')) {
283+
registerComponents = [FunnelChart, ...registerComponents];
284+
}
285+
// register gauge component
286+
if (enableComponentBySeriesType(series, 'gauge')) {
287+
registerComponents = [GaugeChart, ...registerComponents];
288+
}
289+
// register pictorialBar component
290+
if (enableComponentBySeriesType(series, 'pictorialBar')) {
291+
registerComponents = [PictorialBarChart, ...registerComponents];
292+
}
293+
// register themeRiver component
294+
if (enableComponentBySeriesType(series, 'themeRiver')) {
295+
registerComponents = [ThemeRiverChart, ...registerComponents];
296+
}
297+
// register custom component
298+
if (enableComponentBySeriesType(series, 'custom')) {
299+
registerComponents = [CustomChart, ...registerComponents];
300+
}
301+
// register markPoint Component
302+
if (enableComponentBySeriesProp(series, 'markPoint')) {
303+
registerComponents = [MarkPointComponent, ...registerComponents];
304+
}
305+
// register markLine Component
306+
if (enableComponentBySeriesProp(series, 'markLine')) {
307+
registerComponents = [MarkLineComponent, ...registerComponents];
308+
}
309+
// register markArea Component
310+
if (enableComponentBySeriesProp(series, 'markArea')) {
311+
registerComponents = [MarkAreaComponent, ...registerComponents];
312+
}
313+
}
314+
return registerComponents;
315+
};

0 commit comments

Comments
 (0)