ttk-app-core/src/apps/app-demo/home/home-invoice/components/EchartCom.js

@ttk/recat enterprise develop framework

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 EchartCom(props) {
  const commit = useCommit();
  const actions = useActions(props);
  //销项数据
  const { tempData } = useData([props, "invoiceSelect"]).toJS();
  var echartList = tempData.echartList;
  var rate = tempData.rate;
  var add = tempData.add;
  var tax = tempData.tax;
  var total = tempData.total;
  var lengendArr = [];
  echartList &&
    echartList.map((item, index) => {
      lengendArr.push(item.name);
    });
  //进项数据
  const { incomeData } = useData([props, "incomeData"]).toJS();
  var incomeEchart = incomeData.echartList;
  var irate = incomeData.rate;
  var iadd = incomeData.add;
  var itax = incomeData.tax;
  var itotal = incomeData.total;
  var incomeLengend = [];
  incomeEchart &&
    incomeEchart.map((item, index) => {
      incomeLengend.push(item.name);
    });
  const xxoption = {
    tooltip: {
      formatter: "{b}: {c}",
    },
    legend: {
      orient: "vertical",
      right: "right",
      top: "center",
      data: lengendArr,
    },
    series: [
      {
        type: "pie",
        radius: ["40%", "70%"],
        right: 150,
        top: -20,
        avoidLabelOverlap: false,
        label: {
          show: true,
          position: "center",
          formatter: function (params) {
            // 默认显示第一个数据
            if (params.dataIndex === 0) {
              return `{p|}{p|${params.value}}{p|份}`;
            } else {
              return "";
            }
          },
          emphasis: {
            formatter: function (params) {
              if (params.dataIndex != 0) {
                return `{p|}{p|${params.value}}{p|份}`;
              }
            },
          },
          rich: {
            p: {
              fontSize: 20,
              backgroundColor: "#fff", // 覆盖index=0时的数据
            },
          },
        },
        labelLine: {
          show: false,
        },
        data: echartList,
      },
    ],
  };
  const jxoption = {
    tooltip: {
      formatter: "{b}: {c}",
    },
    legend: {
      orient: "vertical",
      right: "right",
      top: "center",
      data: incomeLengend,
    },
    series: [
      {
        type: "pie",
        radius: ["40%", "70%"],
        right: 150,
        top: -20,
        avoidLabelOverlap: false,
        label: {
          show: true,
          position: "center",
          formatter: function (params) {
            // 默认显示第一个数据
            if (params.dataIndex === 0) {
              return `{p|}{p|${params.value}}{p|份}`;
            } else {
              return "";
            }
          },
          emphasis: {
            formatter: function (params) {
              if (params.dataIndex != 0) {
                return `{p|}{p|${params.value}}{p|份}`;
              }
            },
          },
          rich: {
            p: {
              fontSize: 20,
              backgroundColor: "#fff", // 覆盖index=0时的数据
            },
          },
        },
        labelLine: {
          show: false,
        },
        data: incomeEchart,
      },
    ],
  };
  useEffect(() => {
    async function fetchData() {
      await actions.getInvoiceData();
      await actions.getIncomeData();
    }
    fetchData();
  }, []);
  const updateForm = useCallback((e) => {
    async function asyncFun(arges) {}
    asyncFun(e);
  }, []);
  function changeTabs(key) {
    actions.getInvoiceData();
    actions.getIncomeData();
  }
  return (
    <Tabs
      defaultActiveKey="1"
      onChange={(e) => {
        changeTabs(e);
      }}
      className="tabs-style"
    >
      <TabPane tab="销项" key="1">
        <div className="tax-money">
          <span>
            税估税负率:<span>{rate}</span>
            <Popover
              placement="rightBottom"
              content="税负率 =（本期销项税额 - 本期抵扣的进项税额 ）/ 销售收入"
            >
              <Icon type="question-circle" />
            </Popover>
          </span>
          <span>
            应交增值税:<span>{add}元</span>
          </span>
          <span>
            税项税额:<span>{tax}元</span>
          </span>
        </div>
        <p>
          价税合计:<span>{total}元</span>
        </p>
        <ReactEcharts
          option={xxoption}
          notMerge={true}
          lazyUpdate={true}
          style={{ height: "150px", width: "100%" }}
        />
      </TabPane>
      <TabPane tab="进项" key="2">
        <div className="tax-money">
          <span>
            税估税负率:<span>{irate}</span>
            <Popover
              placement="rightBottom"
              content="税负率 =（本期销项税额 - 本期抵扣的进项税额 ）/ 销售收入"
            >
              <Icon type="question-circle" />
            </Popover>
          </span>
          <span>
            应交增值税:<span>{iadd}元</span>
          </span>
          <span>
            已抵扣税额:<span>{itax}元</span>
          </span>
        </div>
        <p>
          价税合计:<span>{itotal}元</span>
        </p>
        <ReactEcharts
          option={jxoption}
          notMerge={true}
          lazyUpdate={true}
          style={{ height: "150px", width: "100%" }}
        />
      </TabPane>
    </Tabs>
  );
}