@tsingroc/tsingroc-components 1.0.4 → 1.0.5

package/dist/components/tsingrocCom.js

@@ -0,0 +1,967 @@
+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