import { Store } from "antd/es/form/interface";
import * as echarts from "echarts";
import { inject, observer } from "mobx-react";
import { useEffect } from "react";
const Ac = (props: Store) => {
  const { homeStore } = props;

  const initChart = (data) => {
    var myChart = echarts.init(document.getElementById("rm"));
    var option = {
      legend: {
        top: "5%",
        left:"left",
        textStyle: {
          color: "#fff",
        },
        formatter: function (name) {
          let v;
          data.forEach((item) => {
            if (item.name === name) {
              v = item.value;
            }
          });
          return name + "-" + v;
        },
        orient: "vertical", // 垂直排列
        type: "scroll", //分页类型
        pageIconColor: "#ff781f", //翻页箭头颜色
        pageTextStyle: {
          color: "#999", //翻页数字颜色
        }, //翻页数字设置
        pageIconSize: 5,
      },
      series: [
        {
          center: ["70%", "40%"],
          name: "Access From",
          type: "pie",
          radius: ["40%", "60%"],
            normal : {
              label : {
                show : false
              },
              labelLine : {
                show : false
              }
          },
          label: {
            backgroundColor: "#F6F8FC",
            borderColor: "#8C8D8E",
            borderWidth: 0,
            show: false,
            borderRadius: 4,
          },
          data,
        },
      ],
    };
    option && myChart.setOption(option);
  };
  useEffect(() => {
    homeStore.getRm().then((res) => {
      initChart(res.data?.record);
    });
   
  }, [homeStore]);
  return <div style={{ width: "100%", height: "100%" }} id="rm"></div>;
};
export default inject("homeStore")(observer(Ac));
