import * as React from 'react';
import { useState } from 'react';
import ReactEcharts from 'echarts-for-react';
var PieBaseChart = function PieBaseChart(props) {
  var propData = props || {};
  var jsonData = props.data;
  var xdata = [];
  var ydata = [];
  jsonData.map(function (item) {
    xdata.push(item[props.xAxis]);
    ydata.push(item[props.yAxis]);
  });
  var option = {
    // title: {
    //   text: props.title,
    //   // subtext: 'Fake Data',
    //   left: 'center'
    // },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      type: 'scroll',
      //可收起
      show: props.legendshow,
      //图例显示
      orient: props.orient,
      //垂直  horizontal 水平
      x: props.x,
      y: props.y,
      padding: [0, 50, 0, 0],
      //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
      itemWidth: props.itemWidth,
      //图形宽度。
      itemHeight: props.itemHeight,
      //图形高度
      itemGap: props.itemGap //图例每项之间的间隔
      // 右侧提示框文字样式
    },

    grid: {
      left: '3%',
      //左边空闲3%
      right: '4%',
      //右边空闲4%
      bottom: '3%',
      //底部空闲 3%
      top: '25%',
      //顶部空闲25% 用于展示标题 和图例，这里就是我们本文要调整的数据。
      containLabel: true
    },
    series: [{
      // name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: jsonData,
      label: {
        show: propData.labelVisible,
        //控制显示隐藏的
        type: propData.typelabelType || "outer",
        //控制折线线条
        formatter: ydata,
        position: props.labelType // label 
      },

      labelLine: {
        show: true
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0
        }
      },
      color: props.color
    }]
  };
  var _useState = useState(0),
    count = _useState[0],
    setCount = _useState[1];
  function onChartReady(echarts) {
    console.log('echarts is ready', echarts);
  }
  function onChartClick(param, echarts) {
    console.log(param, echarts);
    setCount(count + 1);
  }
  ;
  function onChartLegendselectchanged(param, echarts) {
    console.log(param, echarts);
  }
  ;
  // 定义onEvents  click事件
  var onEvents = {
    'click': function click(params) {
      setCount(count + 1);
      console.log(params.name);
    }
  };
  return (
    /*#__PURE__*/
    // <div>
    React.createElement(ReactEcharts, {
      option: option,
      theme: "clear",
      onChartReady: onChartReady
      // onEvents={{
      //   'click': onChartClick,
      //   'legendselectchanged': onChartLegendselectchanged
      // }}
      ,
      onEvents: onEvents,
      style: {
        height: props.height,
        width: props.width
      }
    })
    // {/* <div>Click Count: {count}</div> */}
    // </div>
  );
};

export default PieBaseChart;