@tsingroc/tsingroc-components 1.0.5 → 2.0.1

package/dist/components/tsingrocCom.js

@@ -1,967 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { LeftOutlined, RightOutlined } from "@ant-design/icons";
-import { DatePicker } from "antd";
-import DayJs from "dayjs";
-import * as echarts from "echarts";
-import ReactECharts from "echarts-for-react";
-import React, { useEffect, useMemo, useRef, useState } from "react";
-// 带风险区间的折线图
-const RiskEchartMult = React.memo(function EchartMult(props) {
-    const l = localStorage.getItem("lang");
-    const { riskArr, max, x: propsX, yArr, nameArr, notFormat, nofoot, step, h = "350px", w = "100%", noDiff, addMaxBar, echartColorArr = [
-        "#2FDAFF",
-        "#77DA9B",
-        "#FFB82E",
-        "#5470c6",
-        "#91cc75",
-        "#fac858",
-        "#ee6666",
-        "#73c0de",
-        "#3ba272",
-        "#fc8452",
-        "#9a60b4",
-        "#ea7ccc",
-    ], areaStyle = [
-        "rgba(47,218,255 ,0.3)",
-        "rgba(119,218,155,0.3)",
-        "rgba(255,184,46,0.3)",
-    ], yAxis = "功率(MW)", barColor, legendLeft, unit = "MW", specialLine, pickLine, type, } = props;
-    const xTemp = useMemo(() => {
-        return new Array(24).fill(0).map((item, index) => {
-            const time = (index + 1).toString().padStart(2, "0");
-            return time + ":00";
-        });
-    }, []);
-    let x = [];
-    if (!propsX) {
-        x = xTemp;
-    }
-    else {
-        x = propsX;
-    }
-    // 获取最大值，构建bar
-    const option = useMemo(() => {
-        const barArr = [];
-        if (Array.isArray(yArr) && yArr.length > 0 && addMaxBar) {
-            const length = yArr[0].length;
-            for (let i = 0; i < length; i++) {
-                let max = Number.NEGATIVE_INFINITY;
-                let tempIndex = -1;
-                const secendLoopLength = yArr.length;
-                for (let j = 0; j < secendLoopLength; j++) {
-                    if (yArr[j][i] > max) {
-                        max = yArr[j][i];
-                        tempIndex = j;
-                    }
-                }
-                barArr.push({
-                    value: max,
-                    itemStyle: {
-                        color: barColor[tempIndex],
-                    },
-                });
-            }
-        }
-        const option = {
-            grid: {
-                top: "30",
-                left: "40",
-                right: "40",
-                bottom: "20",
-                containLabel: true,
-            },
-            xAxis: {
-                type: "category",
-                show: !nofoot,
-                data: notFormat ? x.map((item) => new DayJs(item).format("HH:mm")) : x,
-            },
-            yAxis: [
-                {
-                    max: max,
-                    name: yAxis,
-                    nameGap: 10,
-                    position: "left",
-                    nameTextStyle: {
-                        align: "center",
-                        fontWeight: "bold",
-                    },
-                    type: "value",
-                    splitLine: {
-                        lineStyle: {
-                            color: "rgba(130, 144, 157, 0.18)",
-                        },
-                    },
-                    splitNumber: 3,
-                },
-                {
-                    type: "value",
-                    splitLine: {
-                        lineStyle: {
-                            color: "#DCDEE0",
-                        },
-                    },
-                    splitNumber: 3,
-                },
-            ],
-            legend: {
-                data: [...nameArr, "风险区间"].map((item, index) => {
-                    return {
-                        name: item,
-                        itemStyle: {
-                            color: item === "风险区间"
-                                ? "rgba(99,211,149,0.8)"
-                                : echartColorArr[index],
-                        },
-                        icon: item === "实际"
-                            ? "path://M304.43 532.76H221.4c-11.47 0-20.76-9.3-20.76-20.76s9.29-20.76 20.76-20.76h83.03c11.47 0 20.76 9.3 20.76 20.76s-9.29 20.76-20.76 20.76zM581.19 532.76H442.81c-11.47 0-20.76-9.3-20.76-20.76s9.29-20.76 20.76-20.76h138.38c11.47 0 20.76 9.3 20.76 20.76s-9.3 20.76-20.76 20.76zM802.59 532.76h-83.03c-11.47 0-20.76-9.3-20.76-20.76s9.29-20.76 20.76-20.76h83.03c11.47 0 20.76 9.3 20.76 20.76s-9.29 20.76-20.76 20.76z"
-                            : "rect",
-                    };
-                }),
-                textStyle: {
-                    color: "#646566",
-                },
-                left: legendLeft,
-                right: "20",
-                // formatter: (name) => {
-                //   return shark(name,l)
-                // }
-            },
-            color: echartColorArr,
-            tooltip: {
-                trigger: "axis",
-                valueFormatter: (value) => value ? value.toFixed(2) + unit : value === 0 ? 0 + unit : "",
-            },
-            series: yArr
-                ?.map((item, index) => ({
-                data: item?.map((i) => (typeof i === "number" ? i : undefined)),
-                type: type || "line",
-                smooth: true,
-                name: nameArr[index],
-                lineStyle: {
-                    // type: noDiff ? "solid" : index === 0 ? "dashed" : "solid",
-                    type: specialLine
-                        ? nameArr[index] === pickLine
-                            ? "solid"
-                            : "dashed"
-                        : "solid",
-                    color: echartColorArr[index],
-                },
-                step: step || "",
-                symbol: "none",
-                emphasis: {
-                    itemStyle: {
-                        color: "red",
-                    },
-                },
-                // areaStyle:{
-                //   color:areaStyle[index]
-                // }
-            }))
-                .concat(addMaxBar
-                ? [
-                    {
-                        data: barArr,
-                        type: "bar",
-                        name: "max",
-                        barWidth: "101%",
-                        yAxisIndex: 1,
-                        tooltip: {
-                            show: false,
-                        },
-                    },
-                ]
-                : []),
-        };
-        if (riskArr && riskArr.length > 0 && riskArr[0]) {
-            option.series.push({
-                data: riskArr[1],
-                type: "line",
-                name: "风险上边界",
-                smooth: true,
-                showSymbol: false,
-                tooltip: {
-                    show: true,
-                },
-                lineStyle: {
-                    opacity: 0,
-                },
-            }, {
-                yAxisIndex: 0,
-                data: riskArr[0],
-                type: "line",
-                name: "风险下边界",
-                smooth: true,
-                stack: "st",
-                showSymbol: false,
-                lineStyle: {
-                    opacity: 0,
-                },
-                tooltip: {
-                    show: true,
-                },
-                emphasis: {
-                    disabled: true,
-                },
-            }, {
-                yAxisIndex: 0,
-                name: "风险区间",
-                stack: "st",
-                stackStrategy: "all",
-                data: riskArr[1].map((item, index) => {
-                    return riskArr[1][index] - riskArr[0][index];
-                }),
-                type: "line",
-                smooth: true,
-                symbol: "none",
-                lineStyle: {
-                    opacity: 0,
-                },
-                areaStyle: {
-                    color: "#63D395",
-                },
-                emphasis: {
-                    disabled: true,
-                },
-                tooltip: {
-                    show: false,
-                },
-            });
-        }
-        return option;
-    }, [
-        echartColorArr,
-        addMaxBar,
-        x,
-        yArr,
-        nameArr,
-        noDiff,
-        nofoot,
-        step,
-        yAxis,
-        notFormat,
-        barColor,
-        riskArr,
-    ]);
-    const echartRef = useRef(null);
-    useEffect(() => {
-        if (echartRef.current) {
-            const ins = echartRef.current.getEchartsInstance();
-        }
-    }, [x, yArr, nameArr, riskArr, option]);
-    const onEvents = {
-        " click": () => { },
-    };
-    return (_jsx(ReactECharts, { ref: echartRef, option: option, style: { height: h, width: w }, onEvents: onEvents }));
-});
-// 折线图
-const EchartMult = React.memo(function EchartMult(props) {
-    const l = localStorage.getItem("lang");
-    const { max, x: propsX, yArr, nameArr, notFormat, nofoot, step, h = "350px", w = "100%", left = 30, right = 40, noDiff, addMaxBar, barWidth = "15px", barLinearGradientArr, echartColorArr = [
-        "#2FDAFF",
-        "#77DA9B",
-        "#FFB82E",
-        "#5470c6",
-        "#91cc75",
-        "#fac858",
-        "#ee6666",
-        "#73c0de",
-        "#3ba272",
-        "#fc8452",
-        "#9a60b4",
-        "#ea7ccc",
-    ], legendTextColor = "#fff", areaStyle = [
-        "rgba(47,218,255 ,0.3)",
-        "rgba(119,218,155,0.3)",
-        "rgba(255,184,46,0.3)",
-    ], yAxis = "功率(MW)", barColor, legendLeft, unit = "MW", specialLine, pickLine, type, } = props;
-    if (barLinearGradientArr) {
-        echartColorArr[0] = barLinearGradientArr[1];
-    }
-    const xTemp = useMemo(() => {
-        return new Array(24).fill(0).map((item, index) => {
-            const time = (index + 1).toString().padStart(2, "0");
-            return time + ":00";
-        });
-    }, []);
-    let x = [];
-    if (!propsX) {
-        x = xTemp;
-    }
-    else {
-        x = propsX;
-    }
-    // 获取最大值，构建bar
-    const option = useMemo(() => {
-        const barArr = [];
-        if (Array.isArray(yArr) && yArr.length > 0 && addMaxBar) {
-            const length = yArr[0].length;
-            for (let i = 0; i < length; i++) {
-                let max = Number.NEGATIVE_INFINITY;
-                let tempIndex = -1;
-                const secendLoopLength = yArr.length;
-                for (let j = 0; j < secendLoopLength; j++) {
-                    if (yArr[j][i] > max) {
-                        max = yArr[j][i];
-                        tempIndex = j;
-                    }
-                }
-                barArr.push({
-                    value: max,
-                    itemStyle: {
-                        color: barColor[tempIndex],
-                    },
-                });
-            }
-        }
-        const option = {
-            grid: {
-                top: "30",
-                left: left,
-                right: right,
-                bottom: "20",
-                containLabel: true,
-            },
-            xAxis: {
-                type: "category",
-                // axisLabel: {
-                //   interval: 0 // 强制显示所有x轴标签
-                // },
-                show: !nofoot,
-                data: notFormat ? x.map((item) => new DayJs(item).format("HH:mm")) : x,
-            },
-            yAxis: [
-                {
-                    max: max,
-                    name: yAxis,
-                    nameGap: 10,
-                    position: "left",
-                    nameTextStyle: {
-                        align: "center",
-                        fontWeight: "bold",
-                    },
-                    type: "value",
-                    splitLine: {
-                        lineStyle: {
-                            color: "rgba(130, 144, 157, 0.18)",
-                        },
-                    },
-                    splitNumber: 3,
-                },
-                {
-                    type: "value",
-                    splitLine: {
-                        lineStyle: {
-                            color: "#DCDEE0",
-                        },
-                    },
-                    splitNumber: 3,
-                },
-            ],
-            legend: {
-                data: nameArr.map((item, index) => {
-                    return {
-                        name: item,
-                        itemStyle: {
-                            color: echartColorArr[index],
-                        },
-                        icon: item === "实际"
-                            ? "path://M304.43 532.76H221.4c-11.47 0-20.76-9.3-20.76-20.76s9.29-20.76 20.76-20.76h83.03c11.47 0 20.76 9.3 20.76 20.76s-9.29 20.76-20.76 20.76zM581.19 532.76H442.81c-11.47 0-20.76-9.3-20.76-20.76s9.29-20.76 20.76-20.76h138.38c11.47 0 20.76 9.3 20.76 20.76s-9.3 20.76-20.76 20.76zM802.59 532.76h-83.03c-11.47 0-20.76-9.3-20.76-20.76s9.29-20.76 20.76-20.76h83.03c11.47 0 20.76 9.3 20.76 20.76s-9.29 20.76-20.76 20.76z"
-                            : "rect",
-                    };
-                }),
-                textStyle: {
-                    // color: "#646566",
-                    color: legendTextColor,
-                },
-                left: legendLeft,
-                right: "20",
-                // formatter: (name) => {
-                //   return shark(name,l)
-                // }
-            },
-            color: echartColorArr,
-            tooltip: {
-                trigger: "axis",
-                valueFormatter: (value) => value ? value.toFixed(2) + unit : value === 0 ? 0 + unit : "",
-            },
-            series: yArr
-                ?.map((item, index) => ({
-                data: item?.map((i) => (typeof i === "number" ? i : undefined)),
-                type: type || "line",
-                smooth: true,
-                name: nameArr[index],
-                lineStyle: {
-                    // type: noDiff ? "solid" : index === 0 ? "dashed" : "solid",
-                    type: specialLine
-                        ? nameArr[index] === pickLine
-                            ? "solid"
-                            : "dashed"
-                        : "solid",
-                    color: echartColorArr[index],
-                },
-                step: step || "",
-                symbol: "none",
-                emphasis: {
-                    itemStyle: {
-                        color: "red",
-                    },
-                },
-                areaStyle: areaStyle
-                    ? {
-                        color: areaStyle[index],
-                    }
-                    : null,
-                barWidth: barWidth,
-                itemStyle: barLinearGradientArr
-                    ? {
-                        barBorderRadius: [3, 3, 0, 0],
-                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                            { offset: 0, color: barLinearGradientArr[1] },
-                            { offset: 1, color: barLinearGradientArr[0] },
-                        ]),
-                    }
-                    : {},
-            }))
-                .concat(addMaxBar
-                ? [
-                    {
-                        data: barArr,
-                        type: "bar",
-                        name: "max",
-                        barWidth: "101%",
-                        yAxisIndex: 1,
-                        tooltip: {
-                            show: false,
-                        },
-                    },
-                ]
-                : []),
-        };
-        return option;
-    }, [
-        echartColorArr,
-        addMaxBar,
-        x,
-        yArr,
-        nameArr,
-        noDiff,
-        nofoot,
-        step,
-        yAxis,
-        notFormat,
-        barColor,
-    ]);
-    const echartRef = useRef(null);
-    useEffect(() => {
-        if (echartRef.current) {
-            const ins = echartRef.current.getEchartsInstance();
-            ins.setOption({
-                ...ins.getOption(),
-                series: ins
-                    .getOption()
-                    .series.filter((item) => [...nameArr, "max"].includes(item.name)),
-            }, true, true);
-        }
-    }, [x, yArr, nameArr]);
-    const onEvents = {
-        " click": () => { },
-    };
-    return (_jsx(ReactECharts, { ref: echartRef, option: option, style: { height: h, width: w }, onEvents: onEvents }));
-});
-// 待快速跳转的日，周，月 选择器
-function TsingrocDatePick(props) {
-    const { value, onChange: propsOnChange, dataType = "month", className, popupClassName, } = props;
-    const [dateValue, setDateValue] = useState(value);
-    const quickGo = (type) => {
-        const temp = dateValue.add(type, dataType);
-        setDateValue(temp);
-        propsOnChange && propsOnChange(temp);
-    };
-    const onChange = (value) => {
-        setDateValue(value);
-        propsOnChange && propsOnChange(value);
-    };
-    return (_jsxs("div", { children: [_jsx("div", { onClick: () => {
-                    quickGo(-1);
-                }, className: `quick-jump ${className}`, style: { borderRight: "none", borderRadius: "2px 0 0 2px" }, children: _jsx(LeftOutlined, { className: "quick-icon" }) }), dataType === "day" && (_jsx(DatePicker, { value: dateValue, onChange: onChange })), dataType === "week" && (_jsx(DatePicker, { value: dateValue, onChange: onChange, picker: "week" })), dataType === "month" && (_jsx(DatePicker, { popupClassName: popupClassName, className: className, value: dateValue, onChange: onChange, picker: "month" })), _jsx("div", { onClick: () => {
-                    quickGo(1);
-                }, className: `quick-jump ${className}`, style: { borderLeft: "none", borderRadius: "0 2px 2px 0" }, children: _jsx(RightOutlined, { className: "quick-icon" }) })] }));
-}
-// 雷达图
-function RadarEchart(props) {
-    const { h = "100px", x = [], yAxis, arr = [], value = [] } = props;
-    const echartRef = useRef(null);
-    const option = {
-        // grid: {
-        //   top: "20%",
-        //   left: "40",
-        //   right: "40",
-        //   containLabel: true,
-        // },
-        radar: {
-            indicator: arr.map((item, key) => {
-                return { name: item, max: 1 };
-            }),
-            // indicator: [
-            //   { name: 'Sales', max: 6500 },
-            //   { name: 'Administration', max: 16000 },
-            //   { name: 'Information Technology', max: 30000 },
-            //   { name: 'Customer Support', max: 38000 },
-            // ],
-            radius: "60%",
-            splitArea: {
-                areaStyle: {
-                    color: "rgba(119, 218, 155, 0)", // 设置分隔区域颜色为渐变色
-                },
-            },
-            splitLine: {
-                lineStyle: {
-                    color: "rgba(64, 175, 239, 0.15)",
-                },
-            },
-            axisLine: {
-                // show: false,
-                lineStyle: {
-                    with: 1,
-                    color: "rgba(130, 144, 157, 0.18)",
-                },
-            },
-            axisName: {
-                show: true,
-                color: "#9FC7DD",
-            },
-        },
-        series: [
-            {
-                name: "Budget vs spending",
-                type: "radar",
-                data: [
-                    {
-                        value: value,
-                        name: "Actual Spending",
-                    },
-                ],
-                lineStyle: {
-                    normal: {
-                        color: "#77DA9B", // 设置线条颜色为橙色，透明度为0.5
-                    },
-                },
-                areaStyle: {
-                    color: "rgba(119, 218, 155, 0.3)",
-                },
-                symbol: "none",
-            },
-        ],
-    };
-    const onEvents = () => { };
-    return (_jsx(ReactECharts, { ref: echartRef, option: option, style: { height: h, width: "100%" }, onEvents: onEvents }));
-}
-// 饼图
-function TsingrocPie(props) {
-    const { name = "饼图", valueArr = [
-        { value: 735, name: "Search Engine" },
-        { value: 735, name: "Direct" },
-        { value: 735, name: "Email" },
-        { value: 735, name: "Union Ads" },
-        { value: 735, name: "Video Ads" },
-    ], color = [
-        "#ECA926",
-        "#32ADF4",
-        "#DC7756",
-        "#62CE89",
-        "#4256B9",
-        "#00D0FF",
-        "#96D0DD",
-    ], } = props;
-    const option = {
-        color: color,
-        tooltip: {
-            trigger: "item",
-        },
-        legend: {
-            top: "5%",
-            left: "center",
-            show: false,
-        },
-        series: [
-            {
-                name: name,
-                type: "pie",
-                radius: ["40%", "70%"],
-                avoidLabelOverlap: false,
-                padAngle: 2,
-                itemStyle: {
-                    borderRadius: 1,
-                },
-                label: {
-                    show: false,
-                    position: "center",
-                },
-                emphasis: {
-                    label: {
-                        show: true,
-                        fontSize: 16,
-                        fontWeight: "bold",
-                    },
-                },
-                labelLine: {
-                    show: false,
-                },
-                data: valueArr,
-            },
-        ],
-    };
-    return (_jsx("div", { style: { height: "100%" }, children: _jsxs("div", { style: { display: "flex", height: "100%" }, children: [_jsx("div", { style: { flex: 3 }, children: _jsx(ReactECharts, { style: { height: "100%" }, option: option }) }), _jsx("div", { style: { flex: 2, display: "flex", alignItems: "center" }, children: _jsx("div", { style: {}, children: valueArr.map((item, key) => {
-                            return (_jsxs("div", { style: { fontSize: "14px", lineHeight: "20px" }, children: [_jsx("div", { style: {
-                                            display: "inline-block",
-                                            width: "6px",
-                                            height: "6px",
-                                            backgroundColor: color[key],
-                                            marginRight: "5px",
-                                            transform: "translateY(-1px)",
-                                        } }), _jsxs(Space, { children: [_jsxs("div", { style: { color: "#96A9BA" }, children: [item.name, ":"] }), _jsx("div", { style: { color: "#fff" }, children: item.value })] })] }, key));
-                        }) }) })] }) }));
-}
-// 环形统计图
-const CircularProgress = ({ progress, color = "#34A9D4" }) => {
-    // 确保进度值在0到100之间
-    const clampProgress = (value) => Math.max(0, Math.min(100, value));
-    // 计算圆的周长
-    const circumference = 2 * Math.PI * 15.91549430918954;
-    return (_jsxs("div", { style: { width: "100%", height: "100%", position: "relative" }, children: [_jsxs("svg", { width: "100%", height: "100%", viewBox: "0 0 42 42", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("circle", { className: "circle", cx: "21", cy: "21", r: "15.91549430918954", stroke: "#22405a", strokeWidth: "3", fill: "none" }), _jsx("circle", { className: "circle", cx: "21", cy: "21", r: "15.91549430918954", stroke: color, 
-                        // stroke="#ff0"
-                        strokeWidth: "3", fill: "none", strokeDasharray: circumference, strokeDashoffset: circumference - (clampProgress(progress) / 100) * circumference })] }), _jsxs("div", { style: {
-                    position: "absolute",
-                    top: "50%",
-                    transform: "translateY(-50%)",
-                    textAlign: "center",
-                    width: "100%",
-                }, children: [clampProgress(progress), "%"] })] }));
-};
-// 风向模拟
-const WindFlow = React.memo(function WindFlowFunc(props) {
-    const { weatherData } = props;
-    const echartRef = useRef(null);
-    const { h = "150%" } = props;
-    const noise = createNoise2D(Math.random);
-    const noise2 = createNoise2D(Math.random);
-    // returns a value between -1 and 1
-    const valMin = Number.POSITIVE_INFINITY;
-    const valMax = Number.NEGATIVE_INFINITY;
-    const tempMap = {};
-    const orderArr = [];
-    weatherData.forEach((item) => {
-        const a = item.location.split(" ");
-        const x = a[0];
-        const y = a[1];
-        if (tempMap[x]) {
-            tempMap[x].push(item);
-        }
-        else {
-            orderArr.push(x);
-            tempMap[x] = [item];
-        }
-    });
-    orderArr.sort((a, b) => {
-        return a - b;
-    });
-    Object.keys(tempMap).forEach((key) => {
-        tempMap[key].sort((a, b) => {
-            return a.location.split(" ")[1] - b.location.split(" ")[1];
-        });
-    });
-    const retArr = [];
-    orderArr.forEach((key, index) => {
-        retArr[index] = tempMap[key];
-    });
-    console.log(retArr);
-    function generateData() {
-        const data = [];
-        // for (var i = 0; i <= 100; i++) {
-        //   for (var j = 0; j <= 100; j++) {
-        //     var dx = noise(i / 150, j / 150);
-        //     var dy = noise2(i / 150, j / 150);
-        //     var mag = Math.sqrt(dx * dx + dy * dy);
-        //     valMax = Math.max(valMax, mag);
-        //     valMin = Math.min(valMin, mag);
-        //     // data.push([i, j, dx, dy, mag]);
-        //     data.push([i, j, 0.2 + 0.01 * i, -0.9 + i * 0.01, 1])
-        //   }
-        // }
-        // todo
-        retArr.forEach((item, i) => {
-            item.forEach((sub, j) => {
-                data.push([
-                    i,
-                    j,
-                    -Math.cos(sub.wind_direction_80m * (Math.PI / 180)),
-                    Math.sin(sub.wind_direction_80m * (Math.PI / 180)),
-                    1,
-                ]);
-            });
-        });
-        return data;
-    }
-    const data = generateData();
-    // const data = windData
-    const onEvents = {
-        " click": () => { },
-    };
-    const option = {
-        grid: {
-            left: 0,
-            top: 0,
-            bottom: 0,
-            right: 0,
-        },
-        visualMap: {
-            show: false,
-            min: valMin,
-            max: valMax,
-            dimension: 2,
-            inRange: {
-                color: ["#fff"],
-            },
-        },
-        xAxis: {
-            type: "value",
-            axisLine: {
-                lineStyle: {
-                    color: "#fff",
-                },
-            },
-            splitLine: {
-                show: false,
-                lineStyle: {
-                    color: "rgba(255,255,255,0.2)",
-                },
-            },
-        },
-        yAxis: {
-            type: "value",
-            axisLine: {
-                lineStyle: {
-                    color: "#fff",
-                },
-            },
-            show: false,
-            splitLine: {
-                show: false,
-                lineStyle: {
-                    color: "rgba(255,255,255,0.2)",
-                },
-            },
-        },
-        series: [
-            {
-                type: "flowGL",
-                data: data,
-                particleDensity: 20,
-                particleSize: 3,
-                // particleDensity: 15,
-                // particleSize: 3,
-                particleSpeed: 0.5,
-                itemStyle: {
-                    opacity: 0.5,
-                },
-            },
-            // {
-            //   type: 'custom',
-            //   data: data,
-            //   encode: {
-            //     x: 0,
-            //     y: 0
-            //   },
-            //   renderItem: function (params, api) {
-            //     var x = api.value(0),
-            //       y = api.value(1),
-            //       dx = api.value(2),
-            //       dy = api.value(3);
-            //     var start = api.coord([x - dx / 2, y - dy / 2]);
-            //     var end = api.coord([x + dx / 2, y + dy / 2]);
-            //     return {
-            //       type: 'line',
-            //       shape: {
-            //         x1: start[0],
-            //         y1: start[1],
-            //         x2: end[0],
-            //         y2: end[1]
-            //       },
-            //       style: {
-            //         lineWidth: 2,
-            //         stroke: '#fff',
-            //         opacity: 1
-            //       }
-            //     };
-            //   }
-            // }
-        ],
-    };
-    return (_jsx(ReactECharts, { ref: echartRef, option: option, style: { height: h, width: "110%", marginTop: "-100px" }, onEvents: onEvents }));
-});
-// 箱线图
-function BoxplotEchart(props) {
-    const { h = "100px", x = [], yAxis, yArr = [] } = props;
-    const echartRef = useRef(null);
-    const option = {
-        tooltip: {
-            trigger: "item",
-            axisPointer: {
-                type: "shadow",
-            },
-        },
-        grid: {
-            top: "30",
-            left: "40",
-            right: "40",
-            bottom: "20",
-            containLabel: true,
-        },
-        xAxis: {
-            type: "category",
-            boundaryGap: true,
-            splitArea: {
-                show: false,
-            },
-            splitLine: {
-                show: false,
-            },
-            data: x,
-        },
-        yAxis: {
-            type: "value",
-            max: 50,
-            min: -50,
-            name: yAxis || "km/s minus 299,000",
-            splitLine: {
-                lineStyle: {
-                    color: "rgba(130, 144, 157, 0.18)",
-                },
-            },
-            splitNumber: 3,
-        },
-        series: [
-            {
-                name: "boxplot",
-                type: "boxplot",
-                data: yArr,
-                tooltip: {
-                    formatter: (param) => [
-                        "时间 " + param.name,
-                        "最大值: " + param.data[5].toFixed(2) + "%",
-                        "第三四分位数: " + param.data[4].toFixed(2) + "%",
-                        "中位数: " + param.data[2].toFixed(2) + "%",
-                        "第一四分位数: " + param.data[3].toFixed(2) + "%",
-                        "最小值: " + param.data[1].toFixed(2) + "%",
-                    ].join("<br/>"),
-                },
-            },
-        ],
-    };
-    const onEvents = () => { };
-    return (_jsx(ReactECharts, { ref: echartRef, option: option, style: { height: h, width: "100%" }, onEvents: onEvents }));
-}
-function EchartJustOneLine(props) {
-    const { x = [], y = [], h = "350px", styleObj = {}, bottom, left = "0%", isLine, w, top = "0%", } = props;
-    const option = {
-        grid: {
-            left: left,
-            right: "0",
-            top: top,
-        },
-        xAxis: {
-            type: "category",
-            data: x,
-            show: isLine,
-            axisLine: {
-                show: isLine,
-            },
-        },
-        yAxis: {
-            splitLine: {
-                show: false,
-            },
-            type: "value",
-        },
-        series: [
-            {
-                data: y,
-                type: "line",
-                smooth: true,
-                name: "电价",
-                symbol: "none",
-                lineStyle: {
-                    color: styleObj.lineColor,
-                },
-                areaStyle: {
-                    color: {
-                        type: "linear",
-                        x: 0,
-                        y: 0,
-                        x2: 0,
-                        y2: 1,
-                        colorStops: [
-                            {
-                                offset: 0,
-                                color: styleObj.areaStyle ? styleObj.areaStyle[0] : "", // 0% 处的颜色
-                            },
-                            {
-                                offset: 1,
-                                color: styleObj.areaStyle ? styleObj.areaStyle[1] : "", // 100% 处的颜色
-                            },
-                        ],
-                        global: false, // 缺省为 false
-                    },
-                },
-            },
-        ],
-    };
-    if (bottom) {
-        option.grid.bottom = bottom;
-    }
-    const echartRef = useRef();
-    useEffect(() => {
-        if (echartRef.current) {
-            const ins = echartRef.current.getEchartsInstance();
-            ins.setOption(option);
-        }
-    }, [props]);
-    return (_jsx(ReactECharts, { ref: echartRef, option: option, style: { height: h, width: w } }));
-}
-function TsingrocMonthPick(props) {
-    const { value, onChange: propsOnChange, dataType = "month", className, popupClassName, } = props;
-    const [dateValue, setDateValue] = useState(value);
-    const quickGo = (type) => {
-        const temp = dateValue.add(type, dataType);
-        setDateValue(temp);
-        propsOnChange && propsOnChange(temp);
-    };
-    const onChange = (value) => {
-        setDateValue(value);
-        propsOnChange && propsOnChange(value);
-    };
-    return (_jsxs("div", { children: [_jsx("div", { onClick: () => {
-                    quickGo(-1);
-                }, className: `quick-jump ${className}`, style: { borderRight: "none", borderRadius: "2px 0 0 2px" }, children: _jsx(LeftOutlined, { className: "quick-icon" }) }), dataType === "day" && (_jsx(DatePicker, { value: dateValue, onChange: onChange })), dataType === "week" && (_jsx(DatePicker, { value: dateValue, onChange: onChange, picker: "week" })), dataType === "month" && (_jsx(DatePicker, { popupClassName: popupClassName, className: className, value: dateValue, onChange: onChange, picker: "month" })), _jsx("div", { onClick: () => {
-                    quickGo(1);
-                }, className: `quick-jump ${className}`, style: { borderLeft: "none", borderRadius: "0 2px 2px 0" }, children: _jsx(RightOutlined, { className: "quick-icon" }) })] }));
-}
-function ImageBac(props) {
-    const { children, width = "100%", height = "100%", url = "", style } = props;
-    let relativeUrl = "";
-    if (url.startsWith("@")) {
-        relativeUrl = url.replace("@", "../../../../..");
-    }
-    else {
-        relativeUrl = url;
-    }
-    return (_jsx("div", { style: {
-            ...style,
-            backgroundSize: "100% 100%",
-            width: width,
-            height: height,
-            backgroundImage: `url('${relativeUrl}')`,
-        }, children: children }));
-}
-export { ImageBac, EchartMult, RiskEchartMult, TsingrocDatePick, RadarEchart, TsingrocPie, CircularProgress, WindFlow, BoxplotEchart, EchartJustOneLine, TsingrocMonthPick, };
-//# sourceMappingURL=tsingrocCom.js.map