@tsingroc/tsingroc-components 1.0.2

package/src/components/tsingrocCom.js

@@ -0,0 +1,1120 @@
+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",
+    ],
+    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: '#fff'
+        },
+        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
+}