ttk-app-core/src/apps/app-demo/home/home-condition/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 Echart(props) {
  const commit = useCommit();
  const actions = useActions(props);
  const conditionData = useData([props, "conditionData"]).toJS();
  var xAxisData = [];
  var data1 = [];
  var data2 = [];
  var data3 = [];
  conditionData &&
    conditionData.map((item, index) => {
      xAxisData.push(item.date);
      data1.push(item.income);
      data2.push(item.expend);
      data3.push(item.profit);
    });
  const option = {
    tooltip: {
      formatter: "{b}: {c}",
    },
    legend: {
      data: ["收入", "支出", "利润"],
      left: 200,
      top: 10,
    },
    xAxis: {
      data: xAxisData,
      axisLine: { onZero: true },
    },
    yAxis: {
      inverse: true,
    },
    series: [
      {
        name: "收入",
        type: "bar",
        stack: "one",
        data: data1,
      },
      {
        name: "支出",
        type: "bar",
        stack: "one",
        data: data2,
      },
      {
        name: "利润",
        type: "bar",
        stack: "two",
        data: data3,
      },
    ],
  };
  function changeTabs(key) {
    console.log(key);
  }

  useEffect(() => {
    async function fetchData() {}
    fetchData();
  }, []);
  return (
    <div>
      <ReactEcharts
        option={option}
        notMerge={true}
        lazyUpdate={true}
        style={{ height: "260px", width: "100%" }}
      />
    </div>
  );
}