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'
    },
    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(单位),
      // nameLocation:'end',
      nameTextStyle: {
        padding: [0, 0, 0, 0, 0] // 加上padding可以调整其位置
      },

      boundaryGap: false
    },
    yAxis: {
      type: 'category',
      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 //设置线条粗细
          }
        }
      }
    }]
  };

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