import React, { useState, useCallback, useEffect } from "react";
import { Tabs, Icon, Popover } from "antd";
import { useData, useActions, useCommit } from "@ttk/app-loader";
import ReactEcharts from "echarts-for-react";
const { TabPane } = Tabs;
export default function Echart(props) {
  const commit = useCommit();
  const actions = useActions(props);
  const { tempData } = useData([props, "receiveData"]).toJS();
  var arr = [];
  arr.push(tempData.rec);
  arr.push(tempData.otherRec);
  arr.push(tempData.pay);
  arr.push(tempData.otherPay);
  const option = {
    xAxis: {
      type: "value",
    },
    grid: {
      left: "4%",
      right: "4%",
      containLabel: true,
    },
    yAxis: {
      type: "category",
      data: ["应收", "其他应收", "应付", "其他应付"],
    },
    series: [
      {
        data: arr,
        type: "bar",
      },
    ],
  };
  return (
    <div>
      <ReactEcharts
        option={option}
        notMerge={true}
        lazyUpdate={true}
        style={{ height: "260px", width: "100%" }}
      />
    </div>
  );
}
