39 lines
1.1 KiB
JavaScript
39 lines
1.1 KiB
JavaScript
|
import React, {useRef, useEffect, useImperativeHandle} from "react";
|
||
|
|
import * as echarts from "echarts";
|
||
|
|
import theme from "./theme.json";
|
||
|
|
import './echarts-liquidfill'
|
||
|
|
// import('echarts-liquidfill');
|
||
|
|
|
||
|
|
echarts.registerTheme("darkBlue", theme);
|
||
|
|
|
||
|
|
export default React.forwardRef(({option}, ref) => {
|
||
|
|
const chartRef = useRef(null);
|
||
|
|
const chart = useRef();
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
chart.current = echarts.init(chartRef.current, "darkBlue");
|
||
|
|
let resize = () => {
|
||
|
|
chart.current.resize();
|
||
|
|
};
|
||
|
|
window.addEventListener("resize", () => resize());
|
||
|
|
return window.removeEventListener("resize", () => resize());
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (chart && option) {
|
||
|
|
// console.log("chart",chart)
|
||
|
|
chart.current.setOption(option);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
useImperativeHandle(ref, () => ({
|
||
|
|
setOption: (opt) => {
|
||
|
|
// chart.current.setOption(Object.assign(opt, option));
|
||
|
|
chart.current.setOption(opt);
|
||
|
|
},
|
||
|
|
getChart: () => chart.current,
|
||
|
|
}));
|
||
|
|
|
||
|
|
return <div ref={chartRef} style={{height: "100%", width: "100%"}}/>;
|
||
|
|
});
|