import * as React from 'react';
import ReactEcharts from 'echarts-for-react';
// import logo from "../../lowcode/Imgs/log.jpg"
import logo from "../..//lowcode/Imgs/kongzhuangtai.png";
// import logo from 'http://124.222.233.124/lowfile/jpg/2023-01-06/352d3de52ee07a328328cb3aabbfac0-5eea4df5443541908312ded284ac031c.jpg'

var LineBaseChart = function LineBaseChart(props) {
  var propData = props || {};
  console.log(propData, 22222222222222);
  var jsonData = props.data;
  var xdata = [];
  var ydata = [];
  // const  lineStyle = props.lineStyle || 3 s
  jsonData === null || jsonData === void 0 ? void 0 : jsonData.map(function (item) {
    xdata.push(item[props.xAxis]);
    ydata.push(item[props.yAxis]);
  });
  var showDataZoom = props.showDataZoom ? true : false;
  var end = props.endArrow ? 'arrow' : 'none';
  var start = props.startCircle ? 'circle' : 'none';
  var echartsOption = {
    title: {
      text: propData.title
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {//需要对应 series 的 name值
      // data: ['天海湾', '鼎龙湾', '珍珠湾', '翠逸家园', '紫林湾']
    },
    color: propData.color,
    grid: {
      left: '3%',
      right: '8%',
      bottom: '3%',
      containLabel: true
    },
    // 是否显示还原图标
    toolbox: {
      right: 10,
      show: props.isShowTool,
      feature: {
        restore: {}
      }
    },
    // 是否显示区域标尺
    dataZoom: [{
      startValue: '1991',
      show: showDataZoom
    }, {
      type: 'inside'
    }],
    // 区域的颜色 高中低
    visualMap: {
      top: 50,
      right: 0,
      show: false,
      pieces: [{
        gt: 0,
        lte: Number(props.markLineoneyAxis),
        color: props.colorLow
      }, {
        gt: Number(props.markLineoneyAxis),
        lte: Number(props.markLinetwoyAxis),
        color: props.colorCenter
      }, {
        gt: Number(props.markLinetwoyAxis),
        color: props.colorHigh
      }],
      outOfRange: {
        color: '#999'
      }
    },
    // toolbox: {
    //     feature: {
    //         dataView: { show: true, readOnly: false },
    //         magicType: { show: true, type: ['line', 'bar'] },
    //         saveAsImage: {} //存取为图片
    //     }
    // },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: xdata
    },
    yAxis: {
      type: 'value',
      max: function max(value) {
        if (value.max > props.markLinetwoyAxis) {
          return value.max;
        } else {
          value.max = props.markLinetwoyAxis;
          return value.max;
        }
      },
      axisLabel: {
        //y轴单位
        formatter: function formatter(value, index) {
          return value + ' ' + props.yAxisaxisLabel;
        }
      }
    },
    series: [{
      //name:propData.title,
      type: 'line',
      stack: '总量',
      data: ydata,
      markLine: {
        symbol: [start, end],
        // 箭头
        data: [{
          name: '最小阈值',
          yAxis: props.markLineoneyAxis,
          label: {
            position: props.markLineonelabelType,
            // 表现内容展示的位置
            formatter: props.markLineoneTitle + '(' + props.markLineoneyAxis + ')',
            // 标线展示的内容
            color: props.markLineonecolor // 展示内容颜色
          },

          lineStyle: {
            color: props.markLineonelineStylecolor,
            width: props.markLineonelineStylewidth,
            type: props.markLineonelineStyletype //虚线
          }
        }, {
          name: '最大阈值',
          yAxis: props.markLinetwoyAxis,
          label: {
            position: props.markLinetwolabelType,
            // 表现内容展示的位置
            formatter: props.markLinetwoTitle + '(' + props.markLinetwoyAxis + ')',
            // 标线展示的内容
            color: props.markLinetwocolor // 展示内容颜色
          },

          lineStyle: {
            color: props.markLinetwolineStylecolor,
            width: props.markLinetwolineStylewidth,
            type: props.markLinetwolineStyletype //虚线
          }
          // emphasis: {
          //     lineStyle: {
          //         width: props.markLinetwolineStylewidth,	// hover时的折线宽度
          //     }
          //   }
        }]
      },

      smooth: props.smooth,
      //平滑
      showSymbol: props.showSymbol,
      //显示点
      label: {
        //显示标签
        show: props.show,
        position: 'top'
      },
      itemStyle: {
        normal: {
          lineStyle: {
            width: props.lineStyle || 2 //设置线条粗细
          }
        }
      }
    }]
  };

  return jsonData.length !== 0 ? /*#__PURE__*/React.createElement(ReactEcharts, {
    option: echartsOption,
    theme: "clear",
    style: {
      height: props.height,
      width: props.width
    }
  }) : /*#__PURE__*/React.createElement("div", {
    style: {
      height: props.height,
      width: props.width,
      textAlign: 'center'
    }
  }, /*#__PURE__*/React.createElement("img", {
    style: {
      width: 'auto',
      height: '80%',
      marginTop: '2%'
    },
    src: logo,
    alt: ""
  }));
};
export default LineBaseChart;