@tsingroc/tsingroc-components 1.0.4 → 1.0.6

package/src/components/tsingrocCom.js

@@ -1,1121 +0,0 @@
-import React, { useEffect, useMemo, useRef,useState } from "react";
-import DayJs from "dayjs";
-import ReactECharts from "echarts-for-react";
-import * as echarts from "echarts";
-import { LeftOutlined, RightOutlined } from "@ant-design/icons"
-import { DatePicker } from "antd"
-
-// 带风险区间的折线图
-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) => {
-      let time = (index + 1).toString().padStart(2, "0");
-      return time + ":00";
-    });
-  }, []);
-  let x = [];
-  if (!propsX) {
-    x = xTemp;
-  } else {
-    x = propsX;
-  }
-  // 获取最大值，构建bar
-  const option = useMemo(() => {
-    let barArr = [];
-    if (Array.isArray(yArr) && yArr.length > 0 && addMaxBar) {
-      let length = yArr[0].length;
-      for (let i = 0; i < length; i++) {
-        let max = -Infinity;
-        let tempIndex = -1;
-        let 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 (
-    <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) => {
-      let time = (index + 1).toString().padStart(2, "0");
-      return time + ":00";
-    });
-  }, []);
-  let x = [];
-  if (!propsX) {
-    x = xTemp;
-  } else {
-    x = propsX;
-  }
-  // 获取最大值，构建bar
-  const option = useMemo(() => {
-    let barArr = [];
-    if (Array.isArray(yArr) && yArr.length > 0 && addMaxBar) {
-      let length = yArr[0].length;
-      for (let i = 0; i < length; i++) {
-        let max = -Infinity;
-        let tempIndex = -1;
-        let 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 (
-    <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)=>{
-    let temp = dateValue.add(type, dataType)
-    setDateValue(temp)
-    propsOnChange && propsOnChange(temp)
-  }
-  const onChange=(value)=>{
-    setDateValue(value)
-    propsOnChange && propsOnChange(value)
-  }
-  return <div>
-     <div onClick={() => { quickGo(-1) }} className={`quick-jump ${className}`} style={{borderRight: 'none', borderRadius: '2px 0 0 2px' }}>
-          <LeftOutlined className="quick-icon" />
-        </div>
-        {
-          dataType === 'day' && <DatePicker value={dateValue} onChange={onChange} />
-        }
-        {
-          dataType === 'week' && <DatePicker value={dateValue} onChange={onChange} picker="week" />
-        }
-        {
-          dataType === 'month' && <DatePicker  popupClassName={popupClassName} className={className} value={dateValue} onChange={onChange} picker="month" />
-        }
-        <div onClick={() => { quickGo(1) }} className={`quick-jump ${className}`} style={{ borderLeft:'none', borderRadius: '0 2px 2px 0' }}>
-          <RightOutlined className="quick-icon" />
-        </div>
-
-  </div>
-}
-// 雷达图
-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 <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 <div style={{ height: "100%" }}>
-    <div style={{ display: 'flex', height: "100%" }}>
-      <div style={{ flex: 3 }}>
-        <ReactECharts style={{ height: '100%' }} option={option} />
-      </div>
-      <div style={{ flex: 2, display: "flex", alignItems: 'center' }}>
-        <div style={{}}>
-          {
-            valueArr.map((item, key) => {
-              return <div key={key} style={{ fontSize: '14px', lineHeight: "20px" }}>
-                <div style={{ display: 'inline-block', width: '6px', height: '6px', backgroundColor: color[key], marginRight: "5px", transform: "translateY(-1px)" }}></div>
-                <Space>
-                  <div style={{ color: "#96A9BA" }}>{item.name}:</div>
-                  <div style={{ color: '#fff' }}>{item.value}</div>
-                </Space>
-              </div>
-            })
-          }
-        </div>
-      </div>
-    </div>
-  </div>
-
-}
-// 环形统计图
-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 (
-    <div style={{ width: "100%", height: "100%", position: 'relative' }}>
-      <svg
-        width="100%"
-        height="100%"
-        viewBox="0 0 42 42"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <circle
-          className="circle"
-          cx="21"
-          cy="21"
-          r="15.91549430918954"
-          stroke="#22405a"
-          strokeWidth="3"
-          fill="none"
-        />
-        <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}
-        />
-      </svg>
-      <div style={{ position: "absolute", top: '50%', transform: 'translateY(-50%)', textAlign: "center", width: "100%" }}>{clampProgress(progress)}%</div>
-    </div>
-  );
-};
-
-// 风向模拟
-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
-  let valMin = Infinity;
-  let valMax = -Infinity;
-  let tempMap = {}
-  let orderArr = []
-  weatherData.forEach((item) => {
-    let a = item.location.split(" ")
-    let x = a[0]
-    let 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]
-    })
-  })
-  let retArr = []
-  orderArr.forEach((key, index) => {
-    retArr[index] = tempMap[key]
-  })
-  console.log(retArr)
-
-  function generateData() {
-    var 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 (
-    <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: function (param) {
-            return [
-              '时间 ' + 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 <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 (
-      <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)=>{
-    let temp = dateValue.add(type, dataType)
-    setDateValue(temp)
-    propsOnChange && propsOnChange(temp)
-  }
-  const onChange=(value)=>{
-    setDateValue(value)
-    propsOnChange && propsOnChange(value)
-  }
-  return <div>
-     <div onClick={() => { quickGo(-1) }} className={`quick-jump ${className}`} style={{borderRight: 'none', borderRadius: '2px 0 0 2px' }}>
-          <LeftOutlined className="quick-icon" />
-        </div>
-        {
-          dataType === 'day' && <DatePicker value={dateValue} onChange={onChange} />
-        }
-        {
-          dataType === 'week' && <DatePicker value={dateValue} onChange={onChange} picker="week" />
-        }
-        {
-          dataType === 'month' && <DatePicker  popupClassName={popupClassName} className={className} value={dateValue} onChange={onChange} picker="month" />
-        }
-        <div onClick={() => { quickGo(1) }} className={`quick-jump ${className}`} style={{ borderLeft:'none', borderRadius: '0 2px 2px 0' }}>
-          <RightOutlined className="quick-icon" />
-        </div>
-
-  </div>
-}
-
-function ImageBac(props){
-  const {children, width='100%',height='100%',url="",style,}=props
-  let relativeUrl=''
-  if(url.startsWith('@')){
-    relativeUrl=url.replace('@','../../../../..')
-  }else{
-    relativeUrl=url
-  }
-  return <div  style={{...style,backgroundSize:'100% 100%',width:width,height:height,backgroundImage:`url('${relativeUrl}')`}}>
-    {children}
-  </div>
-}
-
-export {
-  ImageBac,
-  EchartMult,
-  RiskEchartMult,
-  TsingrocDatePick,
-  RadarEchart,
-  TsingrocPie,
-  CircularProgress,
-  WindFlow,
-  BoxplotEchart,
-  EchartJustOneLine,
-  TsingrocMonthPick
-}