46 lines
1.7 KiB
JavaScript
46 lines
1.7 KiB
JavaScript
import { useEffect, useRef } from "react";
|
|
import { BarChart, EffectScatterChart, FunnelChart, LineChart, LinesChart, MapChart, PieChart, ScatterChart } from "echarts/charts";
|
|
import { GeoComponent, GridComponent, LegendComponent, TooltipComponent, VisualMapComponent } from "echarts/components";
|
|
import * as echarts from "echarts/core";
|
|
import { CanvasRenderer } from "echarts/renderers";
|
|
import worldMap from "../data/world.json";
|
|
|
|
echarts.use([BarChart, EffectScatterChart, FunnelChart, GeoComponent, GridComponent, LegendComponent, LineChart, LinesChart, MapChart, PieChart, ScatterChart, TooltipComponent, VisualMapComponent, CanvasRenderer]);
|
|
echarts.registerMap("databi-world", worldMap);
|
|
|
|
export function EChart({ className = "", option }) {
|
|
const elementRef = useRef(null);
|
|
const chartRef = useRef(null);
|
|
const optionRef = useRef(option);
|
|
|
|
useEffect(() => {
|
|
optionRef.current = option;
|
|
chartRef.current?.setOption(option, true);
|
|
}, [option]);
|
|
|
|
useEffect(() => {
|
|
const element = elementRef.current;
|
|
if (!element) {
|
|
return undefined;
|
|
}
|
|
|
|
const chart = echarts.init(element, null, { renderer: "canvas" });
|
|
chartRef.current = chart;
|
|
chart.setOption(optionRef.current, true);
|
|
|
|
const resize = () => chart.resize();
|
|
const observer = typeof ResizeObserver === "function" ? new ResizeObserver(resize) : null;
|
|
observer?.observe(element);
|
|
window.addEventListener("resize", resize);
|
|
|
|
return () => {
|
|
observer?.disconnect();
|
|
window.removeEventListener("resize", resize);
|
|
chart.dispose();
|
|
chartRef.current = null;
|
|
};
|
|
}, []);
|
|
|
|
return <div className={["databi-chart", className].filter(Boolean).join(" ")} ref={elementRef} />;
|
|
}
|