import * as React from 'react';
import ReactEcharts from 'echarts-for-react';
var StripChart = function StripChart(props) {
  var propData = props || {};
  var jsonData = props.data;
  var xdata = [];
  var ydata = [];
  // const  lineStyle = props.lineStyle || 3 
  jsonData.map(function (item) {
    xdata.push(item[props.xAxis]);
    ydata.push(item[props.yAxis]);
  });
  var echartsOption = {
    title: {
      text: propData.title
    },
    tooltip: {
      trigger: 'axis',
      show: propData.reminder,
      // 是否显示提示框
      axisPointer: {
        type: 'shadow' // 设置为 none 表示不显示轴指示器
      },

      formatter: !propData.ifReminder ? null : propData.formatterrender
    },
    legend: {//需要对应 series 的 name值
      // data: ['天海湾', '鼎龙湾', '珍珠湾', '翠逸家园', '紫林湾']
    },
    color: propData.color,
    grid: {
      top: '3%',
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    // toolbox: {
    //     feature: {
    //         dataView: { show: true, readOnly: false },
    //         magicType: { show: true, type: ['line', 'bar'] },
    //         saveAsImage: {} //存取为图片
    //     }
    // },
    xAxis: {
      type: 'value',
      name: props.xAxisaxisLabel,
      //配置name(单位),
      min: props.min,
      // 设置Y轴的最小值
      max: props.max,
      // 设置Y轴的最大值
      // nameLocation:'end',
      nameTextStyle: {
        padding: [0, 0, 0, 0, 0] // 加上padding可以调整其位置
      },

      axisTick: {
        show: props.axisTickX // 隐藏X轴刻度线
      },

      axisLine: {
        show: props.axisLineX // 隐藏X轴线
      },

      axisLabel: {
        show: props.axisLabelX // 显示X轴标签
      },

      splitLine: {
        show: props.splitLineX // 隐藏X轴的网格线
      },

      boundaryGap: false
    },
    yAxis: {
      type: 'category',
      axisTick: {
        show: props.axisTickY // 隐藏X轴刻度线
      },

      axisLine: {
        show: props.axisLineY // 隐藏X轴线
      },

      axisLabel: {
        show: props.axisLabelY // 显示X轴标签
      },

      splitLine: {
        show: props.splitLineY // 隐藏X轴的网格线
      },

      data: xdata
    },
    series: [{
      //name:propData.title,
      type: 'bar',
      stack: '总量',
      data: ydata,
      barWidth: props.barWidth,
      //配置大小
      smooth: props.smooth,
      //平滑
      showSymbol: props.showSymbol,
      //显示点
      color: {
        colorStops: [{
          offset: 0,
          color: propData.initialColor
        }, {
          offset: 1,
          color: propData.endColor
        }]
      },
      label: {
        //显示标签
        show: props.show,
        position: ['100%', '40%']
      },
      itemStyle: {
        // normal: {
        //     lineStyle: {
        //         width: props.lineStyle || 2//设置线条粗细
        //     }
        // }
        borderColor: propData.borderColor,
        // 边框颜色
        borderWidth: propData.borderWidth,
        // 边框宽度
        borderType: propData.borderType // 边框类型，可选值：'solid', 'dashed', 'dotted'
      }
    }]
  };

  return /*#__PURE__*/React.createElement(ReactEcharts, {
    style: {
      width: props.setWidth,
      height: props.setheight,
      zIndex: 222
    },
    option: echartsOption,
    theme: "clear"
  });
};
export default StripChart;