aldehyde 0.2.479 → 0.2.481

package/src/aldehyde/lowcode-components/column-3d-chart/index.tsx

@@ -1,438 +1,438 @@
-import * as echarts from 'echarts';
-import React, { useEffect, useRef, useState, ForwardedRef, forwardRef, useImperativeHandle } from 'react';
-import _ from 'lodash';
-import { Spin } from "antd";
-import { useLocale } from "../../locale/useLocale";
-import HydrocarbonService from "../../tmpl/hcservice-v3";
-import { DataConfigProps } from "../data";
-
-const defData = [["1990", 52], ["1991", 45], ["1992", 35], ["1993", 41], ["1994", 23], ["1995", 25], ["1996", 15]];
-
-const defOption = {
-    title: {
-        text: '暂无数据',
-        left: 'center',
-        top: 'middle',
-        show: false, // 无数据时显示
-    },
-    color: [],
-    tooltip: { trigger: "axis" },
-    grid: { top: 30, let: 30, right: 20, bottom: 30 },
-    xAxis: {
-        type: 'category',
-        boundaryGap: true,
-        axisTick: { show: true },
-    },
-    yAxis: {
-        type: 'value'
-    },
-    legend: { show: false },
-    dataZoom: [],
-    series: []
-};
-
-const legends = {
-    top: { top: 0 },
-    bottom: { bottom: 0 },
-    left: { left: 5, top: "center" },
-    right: { right: 5, top: "center" },
-    leftTop: { left: 5 },
-    rightTop: { right: 5 },
-    leftBottom: { left: 5, bottom: 0 },
-    rightBottom: { right: 5, bottom: 0 },
-};
-
-// 处理数据格式
-const handleData = (data: { config: { [key: string]: string }, value: { [key: string]: any }[] }[]) => {
-    if (!data?.length) {
-        return [];
-    }
-    const temData = data.map((r) => {
-        const { config, value } = r;
-        const isD = Object.keys(config).some(r => r.includes("d"));
-        const vNames = Object.keys(config).filter((r) => r.startsWith("v") && !r.includes("-")).sort((a, b) => parseInt(a.substring(1)) - parseInt(b.substring(1)));
-        return isD ? {
-            name: config.d1,
-            data: vNames.map((r) => ({
-                name: config[r],
-                data: value.map((v) => [v["d1"], v[r]]),
-            }))
-        } : {
-            data: value.map((r, index) => ({ name: `数值${index || ""}`, data: vNames.map(v => [config[v], r[v]]) }))
-        };
-    });
-    return temData[0]?.data?.[0]?.data || [];
-};
-
-// 绘制左侧面
-const CubeLeft = echarts.graphic.extendShape({
-    shape: {
-        x: 0,
-        y: 0
-    },
-    buildPath: (ctx, shape) => {
-        const barWidth = shape.barWidth || 20;
-        const offset = barWidth / 2;
-        const xAxisPoint = shape.xAxisPoint;
-        const c0 = [shape.x, shape.y];
-        const c1 = [shape.x - offset, shape.y - offset];
-        const c2 = [xAxisPoint[0] - offset, xAxisPoint[1] - offset];
-        const c3 = [xAxisPoint[0], xAxisPoint[1]];
-        const moveTo: any = ctx.moveTo(c0[0], c0[1]);
-        moveTo.lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath();
-    }
-});
-// 绘制右侧面
-const CubeRight = echarts.graphic.extendShape({
-    shape: {
-        x: 0,
-        y: 0
-    },
-    buildPath: (ctx, shape) => {
-        const barWidth = shape.barWidth || 20;
-        const offset2 = barWidth / 10;
-        const offset = barWidth / 2 + offset2;
-        const xAxisPoint = shape.xAxisPoint;
-        const c1 = [shape.x, shape.y];
-        const c2 = [xAxisPoint[0], xAxisPoint[1]];
-        const c3 = [xAxisPoint[0] + offset, xAxisPoint[1] - offset + 3 * offset2];
-        const c4 = [shape.x + offset, shape.y - offset + 3 * offset2];
-        const moveTo: any = ctx.moveTo(c1[0], c1[1]);
-        moveTo.lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
-    }
-});
-// 绘制顶面
-const CubeTop = echarts.graphic.extendShape({
-    shape: {
-        x: 0,
-        y: 0,
-    },
-    buildPath: (ctx, shape) => {
-        const barWidth = shape.barWidth || 20;
-        const offset2 = barWidth / 10;
-        const offset = barWidth / 2;
-        const c1 = [shape.x, shape.y];
-        const c2 = [shape.x + offset + offset2, shape.y - offset + 2 * offset2];
-        const c3 = [shape.x + offset2, shape.y - 2 * offset + 2 * offset2];
-        const c4 = [shape.x - offset, shape.y - offset];
-        const moveTo: any = ctx.moveTo(c1[0], c1[1]);
-        moveTo.lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
-    }
-});
-
-export interface ComponentStyle {
-    tooltip?: { show: boolean };
-    color?: string;
-    grid?: { top: number, let: number, right: number, bottom: number };
-    xAxis?: { [key: string]: any };
-    yAxis?: { [key: string]: any };
-    legend?: { [key: string]: any };
-    barWidth?: number; // 柱状图宽度
-    isBackground?: boolean; // 是否显示背景
-    renderer?: "canvas" | "svg";
-    dataZoom?: boolean;
-    slider?: boolean; // 区域缩放是否显示滑动条
-}
-
-export interface ComponentProps {
-    style?: ComponentStyle;
-    base: { width: number, height: number, type: string };
-    data?: DataConfigProps;
-    isDesignMode?: boolean; // 是否编辑模式
-    initSearchParams?: { [key: string]: any }; // 全局初始化外部参数，例：传参包含设备id，则在查询时带上设备id
-}
-
-export interface ComponentRef {
-    updateConfig: (newConfig: ComponentProps) => void;
-    destroy: () => void;
-}
-
-const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>) => {
-    const { style, data: propsData, isDesignMode } = props;
-    const [config, setConfig] = useState<ComponentStyle>(style || {});
-    const [renderType, setRenderType] = useState<"canvas" | "svg">(style?.renderer || "svg"); // 渲染模式
-    const [size, setSize] = useState<{ width: number, height: number }>();
-    const [dataConfig, setDataConfig] = useState<DataConfigProps>({ ...propsData }); // 数据源配置
-    const [data, setData] = useState([]);
-    const [searchParams, setSearchParams] = useState<{ [key: string]: any }>();
-    const [initSearchParams, setInitSearchParams] = useState<{ [key: string]: any }>();
-    const [loading, setLoading] = useState<boolean>(false);
-    const chartRef = useRef<HTMLDivElement>(null);
-    const chart = useRef<any>(null);
-    const pollingIntervalRef = useRef<number | NodeJS.Timeout>(null);
-    const { translate } = useLocale();
-
-    const handleDestroy = () => {
-        pollingIntervalRef.current && clearInterval(pollingIntervalRef.current);
-        window.removeEventListener('resize', handleResize);
-        chart.current && chart.current.dispose();
-    };
-
-    // 全局初始化请求数据处理
-    const handleInitData = (val: DataConfigProps) => {
-        if (val.sourceType === "sourceId" && val.isInit && val.initData) {
-            const { config, value } = val.initData;
-            const temData = handleData(value);
-            setData(temData);
-            if (config?.requestMode === "polling") {
-                pollingIntervalRef.current = setInterval(() => { getData() }, config?.pollingInterval || 60000);
-            }
-        }
-    }
-
-    // ws订阅数据更新
-    const handleWSData = (val: DataConfigProps) => {
-        if (val.sourceType === "sourceId" && val.wsData) {
-            const { value } = val.initData;
-            const temData = handleData(value);
-            setData(temData);
-        }
-    }
-
-    useImperativeHandle(ref, () => ({
-        updateConfig: (newConfig) => {
-            const { base, style: newStyle, data: newDataConfig, initSearchParams: newISParams } = newConfig;
-            setConfig({ ...(newStyle || {}) });
-            setSize({ width: base.width, height: base.height });
-            setDataConfig(newDataConfig);
-            setRenderType(newStyle?.renderer || "svg");
-            handleInitData(newDataConfig);
-            setSearchParams(newDataConfig.searchParams);
-            setInitSearchParams(newISParams);
-            handleWSData(newDataConfig);
-        },
-        destroy: handleDestroy,
-    }));
-
-    // 窗口大小变化时重新调整图表大小
-    const handleResize = () => {
-        chart.current.resize({ animation: { duration: 500 } });
-    };
-
-    useEffect(() => {
-        // 注册三个面图形
-        echarts.graphic.registerShape('CubeLeft', CubeLeft);
-        echarts.graphic.registerShape('CubeRight', CubeRight);
-        echarts.graphic.registerShape('CubeTop', CubeTop);
-        return () => {
-            handleDestroy();
-        }
-    }, []);
-
-    useEffect(() => {
-        handleDestroy();
-        chart.current = echarts.init(chartRef.current, null, { renderer: renderType });
-        window.addEventListener('resize', handleResize);
-    }, [renderType]);
-
-    // 请求数据
-    const getData = async (params?: object) => {
-        setLoading(true);
-        const { data } = await HydrocarbonService.requestChartData(null, dataConfig?.sourceId, params) || {};
-        setLoading(false);
-        const { config, value } = data || {};
-        const temData = handleData(value);
-        setData(temData);
-        return config;
-    };
-
-    // 初始化请求数据
-    const getInitData = async (params?: object) => {
-        pollingIntervalRef.current && clearInterval(pollingIntervalRef.current);
-        const config = await getData(params);
-        if (config?.requestMode === "polling") {
-            pollingIntervalRef.current = setInterval(() => getData(params), config?.pollingInterval || 60000);
-        }
-    };
-
-    // 静态数据处理
-    useEffect(() => {
-        if (dataConfig?.sourceType === 'staticData') {
-            setData(handleData(dataConfig.staticData));
-        }
-    }, [dataConfig?.sourceType, dataConfig?.staticData]);
-
-    /**
-     * 数据源数据请求
-     * 1、编辑态不请求数据
-     */
-    useEffect(() => {
-        if (!isDesignMode && dataConfig?.sourceType === 'sourceId' && dataConfig?.sourceId && !dataConfig?.isInit && dataConfig?.isDefRequest !== false) {
-            if (dataConfig?.isInitParams) { // 组件数据源接收外部参数
-                initSearchParams && getInitData(initSearchParams);
-            } else {
-                getInitData();
-            }
-        } else if (dataConfig?.sourceType === 'sourceId') {
-            setData([]);
-        }
-    }, [dataConfig?.sourceType, dataConfig?.sourceId, initSearchParams]);
-
-    // 搜索参数变化时重新请求数据
-    useEffect(() => {
-        if (searchParams) {
-            const params = { ...(initSearchParams || {}), ...searchParams };
-            if (dataConfig?.isInitParams) { // 数据源接收外部参数，则参数存在再请求
-                initSearchParams && getInitData(params);
-            } else {
-                getInitData(params);
-            }
-        }
-    }, [searchParams, initSearchParams]);
-
-    const renderChart = () => {
-        const { grid, barWidth, legend, tooltip, color, xAxis, yAxis, isBackground, dataZoom, slider } = config;
-        const option = _.cloneDeep(defOption);
-        // 编辑态无数据显示默认数据
-        const temData = isDesignMode && !data?.length ? defData : data;
-        // 背景数据
-        let bgData = [];
-        if (isBackground) {
-            const maxData = Math.max(...temData.map(r => r[1])) + 5;
-            bgData = temData.map(r => ([r[0], maxData]));
-        }
-        option.color = [color]
-        option.grid = grid;
-        option.legend = { ...legend, ...legends[legend?.position] };
-        option.tooltip = { trigger: "axis", ...tooltip };
-        option.xAxis = { ...option.xAxis, ...xAxis, axisTick: { show: xAxis?.axisLine?.show } };
-        option.yAxis = { ...option.yAxis, ...yAxis };
-        option.dataZoom = dataZoom ? [slider ? { type: "slider" } : undefined, { type: "inside", disabled: false }].filter(Boolean) : [];
-        option.title.text = translate("${暂无数据}");
-        option.title.show = !temData?.length;
-        option.series = [{
-            type: 'custom',
-            tooltip: { show: false },
-            renderItem: (params, api) => {
-                const location = api.coord([api.value(0), api.value(1)]);
-                return {
-                    type: 'group',
-                    children: [{
-                        type: 'CubeLeft',
-                        shape: {
-                            api,
-                            x: location[0],
-                            y: location[1],
-                            xAxisPoint: api.coord([api.value(0), 0]),
-                            barWidth,
-                        },
-                        style: { fill: `${color}28` }
-                    },
-                    {
-                        type: 'CubeRight',
-                        shape: {
-                            api,
-                            x: location[0],
-                            y: location[1],
-                            xAxisPoint: api.coord([api.value(0), 0]),
-                            barWidth,
-                        },
-                        style: { fill: `${color}32` }
-                    },
-                    {
-                        type: 'CubeTop',
-                        shape: {
-                            api,
-                            x: location[0],
-                            y: location[1],
-                            xAxisPoint: api.coord([api.value(0), 0]),
-                            barWidth,
-                        },
-                        style: { fill: `${color}50` }
-                    }]
-                }
-            },
-            data: bgData
-        },
-        {
-            type: 'custom',
-            renderItem: (params, api) => {
-                const location = api.coord([api.value(0), api.value(1)]);
-                return {
-                    type: 'group',
-                    children: [{
-                        type: 'CubeLeft',
-                        shape: {
-                            api,
-                            xValue: api.value(0),
-                            yValue: api.value(1),
-                            x: location[0],
-                            y: location[1],
-                            xAxisPoint: api.coord([api.value(0), 0]),
-                            barWidth,
-                        },
-                        style: {
-                            fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                                offset: 0,
-                                color
-                            },
-                            {
-                                offset: 0.8,
-                                color: `${color}5A`
-                            }
-                            ])
-                        }
-                    }, {
-                        type: 'CubeRight',
-                        shape: {
-                            api,
-                            xValue: api.value(0),
-                            yValue: api.value(1),
-                            x: location[0],
-                            y: location[1],
-                            xAxisPoint: api.coord([api.value(0), 0]),
-                            barWidth,
-                        },
-                        style: {
-                            fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                                offset: 0,
-                                color: `${color}5A`
-                            },
-                            {
-                                offset: 0.8,
-                                color: `${color}50`
-                            }
-                            ])
-                        }
-                    }, {
-                        type: 'CubeTop',
-                        shape: {
-                            api,
-                            xValue: api.value(0),
-                            yValue: api.value(1),
-                            x: location[0],
-                            y: location[1],
-                            xAxisPoint: api.coord([api.value(0), 0]),
-                            barWidth,
-                        },
-                        style: { fill: color }
-                    }]
-                }
-            },
-            data: temData
-        }];
-        chart.current.setOption(option, true);
-    }
-    useEffect(() => {
-        if (config) {
-            renderChart();
-        }
-    }, [config, data]);
-
-    useEffect(() => {
-        if (size) {
-            handleResize();
-        }
-    }, [size]);
-
-    const renderChartDom = () => <div ref={chartRef} style={{ width: '100%', height: '100%' }} />;
-
-    if (isDesignMode) {
-        return renderChartDom();
-    }
-
-    return <Spin spinning={loading}>{renderChartDom()}</Spin>;
-});
-
-export default Index;
-
+import * as echarts from 'echarts';
+import React, { useEffect, useRef, useState, ForwardedRef, forwardRef, useImperativeHandle } from 'react';
+import _ from 'lodash';
+import { Spin } from "antd";
+import { useLocale } from "../../locale/useLocale";
+import HydrocarbonService from "../../tmpl/hcservice-v3";
+import { DataConfigProps } from "../data";
+
+const defData = [["1990", 52], ["1991", 45], ["1992", 35], ["1993", 41], ["1994", 23], ["1995", 25], ["1996", 15]];
+
+const defOption = {
+    title: {
+        text: '暂无数据',
+        left: 'center',
+        top: 'middle',
+        show: false, // 无数据时显示
+    },
+    color: [],
+    tooltip: { trigger: "axis" },
+    grid: { top: 30, let: 30, right: 20, bottom: 30 },
+    xAxis: {
+        type: 'category',
+        boundaryGap: true,
+        axisTick: { show: true },
+    },
+    yAxis: {
+        type: 'value'
+    },
+    legend: { show: false },
+    dataZoom: [],
+    series: []
+};
+
+const legends = {
+    top: { top: 0 },
+    bottom: { bottom: 0 },
+    left: { left: 5, top: "center" },
+    right: { right: 5, top: "center" },
+    leftTop: { left: 5 },
+    rightTop: { right: 5 },
+    leftBottom: { left: 5, bottom: 0 },
+    rightBottom: { right: 5, bottom: 0 },
+};
+
+// 处理数据格式
+const handleData = (data: { config: { [key: string]: string }, value: { [key: string]: any }[] }[]) => {
+    if (!data?.length) {
+        return [];
+    }
+    const temData = data.map((r) => {
+        const { config, value } = r;
+        const isD = Object.keys(config).some(r => r.includes("d"));
+        const vNames = Object.keys(config).filter((r) => r.startsWith("v") && !r.includes("-")).sort((a, b) => parseInt(a.substring(1)) - parseInt(b.substring(1)));
+        return isD ? {
+            name: config.d1,
+            data: vNames.map((r) => ({
+                name: config[r],
+                data: value.map((v) => [v["d1"], v[r]]),
+            }))
+        } : {
+            data: value.map((r, index) => ({ name: `数值${index || ""}`, data: vNames.map(v => [config[v], r[v]]) }))
+        };
+    });
+    return temData[0]?.data?.[0]?.data || [];
+};
+
+// 绘制左侧面
+const CubeLeft = echarts.graphic.extendShape({
+    shape: {
+        x: 0,
+        y: 0
+    },
+    buildPath: (ctx, shape) => {
+        const barWidth = shape.barWidth || 20;
+        const offset = barWidth / 2;
+        const xAxisPoint = shape.xAxisPoint;
+        const c0 = [shape.x, shape.y];
+        const c1 = [shape.x - offset, shape.y - offset];
+        const c2 = [xAxisPoint[0] - offset, xAxisPoint[1] - offset];
+        const c3 = [xAxisPoint[0], xAxisPoint[1]];
+        const moveTo: any = ctx.moveTo(c0[0], c0[1]);
+        moveTo.lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath();
+    }
+});
+// 绘制右侧面
+const CubeRight = echarts.graphic.extendShape({
+    shape: {
+        x: 0,
+        y: 0
+    },
+    buildPath: (ctx, shape) => {
+        const barWidth = shape.barWidth || 20;
+        const offset2 = barWidth / 10;
+        const offset = barWidth / 2 + offset2;
+        const xAxisPoint = shape.xAxisPoint;
+        const c1 = [shape.x, shape.y];
+        const c2 = [xAxisPoint[0], xAxisPoint[1]];
+        const c3 = [xAxisPoint[0] + offset, xAxisPoint[1] - offset + 3 * offset2];
+        const c4 = [shape.x + offset, shape.y - offset + 3 * offset2];
+        const moveTo: any = ctx.moveTo(c1[0], c1[1]);
+        moveTo.lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
+    }
+});
+// 绘制顶面
+const CubeTop = echarts.graphic.extendShape({
+    shape: {
+        x: 0,
+        y: 0,
+    },
+    buildPath: (ctx, shape) => {
+        const barWidth = shape.barWidth || 20;
+        const offset2 = barWidth / 10;
+        const offset = barWidth / 2;
+        const c1 = [shape.x, shape.y];
+        const c2 = [shape.x + offset + offset2, shape.y - offset + 2 * offset2];
+        const c3 = [shape.x + offset2, shape.y - 2 * offset + 2 * offset2];
+        const c4 = [shape.x - offset, shape.y - offset];
+        const moveTo: any = ctx.moveTo(c1[0], c1[1]);
+        moveTo.lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
+    }
+});
+
+export interface ComponentStyle {
+    tooltip?: { show: boolean };
+    color?: string;
+    grid?: { top: number, let: number, right: number, bottom: number };
+    xAxis?: { [key: string]: any };
+    yAxis?: { [key: string]: any };
+    legend?: { [key: string]: any };
+    barWidth?: number; // 柱状图宽度
+    isBackground?: boolean; // 是否显示背景
+    renderer?: "canvas" | "svg";
+    dataZoom?: boolean;
+    slider?: boolean; // 区域缩放是否显示滑动条
+}
+
+export interface ComponentProps {
+    style?: ComponentStyle;
+    base: { width: number, height: number, type: string };
+    data?: DataConfigProps;
+    isDesignMode?: boolean; // 是否编辑模式
+    initSearchParams?: { [key: string]: any }; // 全局初始化外部参数，例：传参包含设备id，则在查询时带上设备id
+}
+
+export interface ComponentRef {
+    updateConfig: (newConfig: ComponentProps) => void;
+    destroy: () => void;
+}
+
+const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>) => {
+    const { style, data: propsData, isDesignMode } = props;
+    const [config, setConfig] = useState<ComponentStyle>(style || {});
+    const [renderType, setRenderType] = useState<"canvas" | "svg">(style?.renderer || "svg"); // 渲染模式
+    const [size, setSize] = useState<{ width: number, height: number }>();
+    const [dataConfig, setDataConfig] = useState<DataConfigProps>({ ...propsData }); // 数据源配置
+    const [data, setData] = useState([]);
+    const [searchParams, setSearchParams] = useState<{ [key: string]: any }>();
+    const [initSearchParams, setInitSearchParams] = useState<{ [key: string]: any }>();
+    const [loading, setLoading] = useState<boolean>(false);
+    const chartRef = useRef<HTMLDivElement>(null);
+    const chart = useRef<any>(null);
+    const pollingIntervalRef = useRef<number | NodeJS.Timeout>(null);
+    const { translate } = useLocale();
+
+    const handleDestroy = () => {
+        pollingIntervalRef.current && clearInterval(pollingIntervalRef.current);
+        window.removeEventListener('resize', handleResize);
+        chart.current && chart.current.dispose();
+    };
+
+    // 全局初始化请求数据处理
+    const handleInitData = (val: DataConfigProps) => {
+        if (val.sourceType === "sourceId" && val.isInit && val.initData) {
+            const { config, value } = val.initData;
+            const temData = handleData(value);
+            setData(temData);
+            if (config?.requestMode === "polling") {
+                pollingIntervalRef.current = setInterval(() => { getData() }, config?.pollingInterval || 60000);
+            }
+        }
+    }
+
+    // ws订阅数据更新
+    const handleWSData = (val: DataConfigProps) => {
+        if (val.sourceType === "sourceId" && val.wsData) {
+            const { value } = val.initData;
+            const temData = handleData(value);
+            setData(temData);
+        }
+    }
+
+    useImperativeHandle(ref, () => ({
+        updateConfig: (newConfig) => {
+            const { base, style: newStyle, data: newDataConfig, initSearchParams: newISParams } = newConfig;
+            setConfig({ ...(newStyle || {}) });
+            setSize({ width: base.width, height: base.height });
+            setDataConfig(newDataConfig);
+            setRenderType(newStyle?.renderer || "svg");
+            handleInitData(newDataConfig);
+            setSearchParams(newDataConfig.searchParams);
+            setInitSearchParams(newISParams);
+            handleWSData(newDataConfig);
+        },
+        destroy: handleDestroy,
+    }));
+
+    // 窗口大小变化时重新调整图表大小
+    const handleResize = () => {
+        chart.current.resize({ animation: { duration: 500 } });
+    };
+
+    useEffect(() => {
+        // 注册三个面图形
+        echarts.graphic.registerShape('CubeLeft', CubeLeft);
+        echarts.graphic.registerShape('CubeRight', CubeRight);
+        echarts.graphic.registerShape('CubeTop', CubeTop);
+        return () => {
+            handleDestroy();
+        }
+    }, []);
+
+    useEffect(() => {
+        handleDestroy();
+        chart.current = echarts.init(chartRef.current, null, { renderer: renderType });
+        window.addEventListener('resize', handleResize);
+    }, [renderType]);
+
+    // 请求数据
+    const getData = async (params?: object) => {
+        setLoading(true);
+        const { data } = await HydrocarbonService.requestChartData(null, dataConfig?.sourceId, params) || {};
+        setLoading(false);
+        const { config, value } = data || {};
+        const temData = handleData(value);
+        setData(temData);
+        return config;
+    };
+
+    // 初始化请求数据
+    const getInitData = async (params?: object) => {
+        pollingIntervalRef.current && clearInterval(pollingIntervalRef.current);
+        const config = await getData(params);
+        if (config?.requestMode === "polling") {
+            pollingIntervalRef.current = setInterval(() => getData(params), config?.pollingInterval || 60000);
+        }
+    };
+
+    // 静态数据处理
+    useEffect(() => {
+        if (dataConfig?.sourceType === 'staticData') {
+            setData(handleData(dataConfig.staticData));
+        }
+    }, [dataConfig?.sourceType, dataConfig?.staticData]);
+
+    /**
+     * 数据源数据请求
+     * 1、编辑态不请求数据
+     */
+    useEffect(() => {
+        if (!isDesignMode && dataConfig?.sourceType === 'sourceId' && dataConfig?.sourceId && !dataConfig?.isInit && dataConfig?.isDefRequest !== false) {
+            if (dataConfig?.isInitParams) { // 组件数据源接收外部参数
+                initSearchParams && getInitData(initSearchParams);
+            } else {
+                getInitData();
+            }
+        } else if (dataConfig?.sourceType === 'sourceId') {
+            setData([]);
+        }
+    }, [dataConfig?.sourceType, dataConfig?.sourceId, initSearchParams]);
+
+    // 搜索参数变化时重新请求数据
+    useEffect(() => {
+        if (searchParams) {
+            const params = { ...(initSearchParams || {}), ...searchParams };
+            if (dataConfig?.isInitParams) { // 数据源接收外部参数，则参数存在再请求
+                initSearchParams && getInitData(params);
+            } else {
+                getInitData(params);
+            }
+        }
+    }, [searchParams, initSearchParams]);
+
+    const renderChart = () => {
+        const { grid, barWidth, legend, tooltip, color, xAxis, yAxis, isBackground, dataZoom, slider } = config;
+        const option = _.cloneDeep(defOption);
+        // 编辑态无数据显示默认数据
+        const temData = isDesignMode && !data?.length ? defData : data;
+        // 背景数据
+        let bgData = [];
+        if (isBackground) {
+            const maxData = Math.max(...temData.map(r => r[1])) + 5;
+            bgData = temData.map(r => ([r[0], maxData]));
+        }
+        option.color = [color]
+        option.grid = grid;
+        option.legend = { ...legend, ...legends[legend?.position] };
+        option.tooltip = { trigger: "axis", ...tooltip };
+        option.xAxis = { ...option.xAxis, ...xAxis, axisTick: { show: xAxis?.axisLine?.show } };
+        option.yAxis = { ...option.yAxis, ...yAxis };
+        option.dataZoom = dataZoom ? [slider ? { type: "slider" } : undefined, { type: "inside", disabled: false }].filter(Boolean) : [];
+        option.title.text = translate("${暂无数据}");
+        option.title.show = !temData?.length;
+        option.series = [{
+            type: 'custom',
+            tooltip: { show: false },
+            renderItem: (params, api) => {
+                const location = api.coord([api.value(0), api.value(1)]);
+                return {
+                    type: 'group',
+                    children: [{
+                        type: 'CubeLeft',
+                        shape: {
+                            api,
+                            x: location[0],
+                            y: location[1],
+                            xAxisPoint: api.coord([api.value(0), 0]),
+                            barWidth,
+                        },
+                        style: { fill: `${color}28` }
+                    },
+                    {
+                        type: 'CubeRight',
+                        shape: {
+                            api,
+                            x: location[0],
+                            y: location[1],
+                            xAxisPoint: api.coord([api.value(0), 0]),
+                            barWidth,
+                        },
+                        style: { fill: `${color}32` }
+                    },
+                    {
+                        type: 'CubeTop',
+                        shape: {
+                            api,
+                            x: location[0],
+                            y: location[1],
+                            xAxisPoint: api.coord([api.value(0), 0]),
+                            barWidth,
+                        },
+                        style: { fill: `${color}50` }
+                    }]
+                }
+            },
+            data: bgData
+        },
+        {
+            type: 'custom',
+            renderItem: (params, api) => {
+                const location = api.coord([api.value(0), api.value(1)]);
+                return {
+                    type: 'group',
+                    children: [{
+                        type: 'CubeLeft',
+                        shape: {
+                            api,
+                            xValue: api.value(0),
+                            yValue: api.value(1),
+                            x: location[0],
+                            y: location[1],
+                            xAxisPoint: api.coord([api.value(0), 0]),
+                            barWidth,
+                        },
+                        style: {
+                            fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                                offset: 0,
+                                color
+                            },
+                            {
+                                offset: 0.8,
+                                color: `${color}5A`
+                            }
+                            ])
+                        }
+                    }, {
+                        type: 'CubeRight',
+                        shape: {
+                            api,
+                            xValue: api.value(0),
+                            yValue: api.value(1),
+                            x: location[0],
+                            y: location[1],
+                            xAxisPoint: api.coord([api.value(0), 0]),
+                            barWidth,
+                        },
+                        style: {
+                            fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                                offset: 0,
+                                color: `${color}5A`
+                            },
+                            {
+                                offset: 0.8,
+                                color: `${color}50`
+                            }
+                            ])
+                        }
+                    }, {
+                        type: 'CubeTop',
+                        shape: {
+                            api,
+                            xValue: api.value(0),
+                            yValue: api.value(1),
+                            x: location[0],
+                            y: location[1],
+                            xAxisPoint: api.coord([api.value(0), 0]),
+                            barWidth,
+                        },
+                        style: { fill: color }
+                    }]
+                }
+            },
+            data: temData
+        }];
+        chart.current.setOption(option, true);
+    }
+    useEffect(() => {
+        if (config) {
+            renderChart();
+        }
+    }, [config, data]);
+
+    useEffect(() => {
+        if (size) {
+            handleResize();
+        }
+    }, [size]);
+
+    const renderChartDom = () => <div ref={chartRef} style={{ width: '100%', height: '100%' }} />;
+
+    if (isDesignMode) {
+        return renderChartDom();
+    }
+
+    return <Spin spinning={loading}>{renderChartDom()}</Spin>;
+});
+
+export default Index;
+