import * as React from 'react';
import { useState } from 'react';
import ReactEcharts from 'echarts-for-react';
import "./index.scss";
var RadarChart = function RadarChart(props) {
  var option = {
    // title: {
    //     text: props.title,
    //     left: 'center',

    // },
    // 图表的位置
    grid: {
      position: 'center'
    },
    tooltip: {
      show: props.show
    },
    // tooltip: {
    //     //雷达图的tooltip不会超出div，也可以设置position属性，position定位的tooltip 不会随着鼠标移动而位置变化，不友好
    //     confine: true,
    //     enterable: true, //鼠标是否可以移动到tooltip区域内
    // },
    radar: {
      splitNumber: props.splitNumber,
      // 雷达图圈数设置
      shape: props.shape,
      //图形 多边形
      indicator: props.radardata
    },
    series: [{
      type: 'radar',
      areaStyle: {
        normal: {
          color: props.areaStylecolor,
          opacity: 0.3
        }
      },
      //雷达覆盖区域
      symbol: props.showSymbol,
      //去掉折线上的小圆点
      lineStyle: {
        color: props.color //线条颜色
      },

      data: [{
        value: props.data,
        name: props.datatitle,
        itemStyle: {
          //雷达图每一个焦点的样式
          normal: {
            color: props.symbolColor //折点颜色
          }
        },

        lineStyle: {
          type: props.lineStyleType
        }
      }]
    }]
  };
  var objArr = props.objArr1 || [];
  var _useState = useState(false),
    flag = _useState[0],
    setFlag = _useState[1];
  // 鼠标移入
  var mouseenter = function mouseenter() {
    setFlag(true);
  };

  // 鼠标移出
  var mouseleave = function mouseleave() {
    setFlag(false);
  };
  return /*#__PURE__*/React.createElement("div", {
    style: {
      width: props.width
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: "radar"
  }, /*#__PURE__*/React.createElement("div", {
    className: "radarTitle"
  }, props.titleTip, /*#__PURE__*/React.createElement("span", {
    onMouseEnter: mouseenter,
    onMouseLeave: mouseleave
  }, props.titleLevel)), flag ? /*#__PURE__*/React.createElement("ol", {
    className: "randarTip"
  }, objArr.map(function (item, idx) {
    return /*#__PURE__*/React.createElement("li", {
      key: idx
    }, /*#__PURE__*/React.createElement("span", null, item[props.titlename]), "  ", /*#__PURE__*/React.createElement("span", null, item[props.titlevalue]));
  })) : ''), /*#__PURE__*/React.createElement(ReactEcharts, {
    option: option,
    theme: "clear",
    style: {
      height: props.height,
      width: props.width
    }
  }));
};
export default RadarChart;