React_遇到的图表问题

一.昨天在对接图表的时候数据取到了,赋值也没问题就是出来不了

解决的完整代码如下

import React, { Component } from "react";
import styles from "./index.module.scss";
import Echarts from "@components/Echarts";
import { home, homelist } from "@services/home/home";
export default class Home extends Component {
  state = {
    options: null,
    tabType: 1,
    lineObj: {},
    tableLoading: false,
  };

  componentDidMount() {
    this.getList();
    this.getChartData(1);
  }
  // 头部数据请求
  getList() {
    home().then((res) => {
      let {
        data: { data },
      } = res;
      this.setState({
        lineObj: data,
      });
    });
  }
  // 图表数据请求
  tabChange(num) {
    this.setState(
      {
        tabType: num,
      },
      () => {
        this.getChartData(this.state.tabType);
      }
    );
  }

  getChartData(num) {
    homelist({ is_week: num ? true : false }).then((res) => {
      console.log(res);
      let {
        data: { data },
      } = res;
      let XData = [],
        YData = [];
      for (let index = 0; index < data.length; index++) {
        const element = data[index];
        XData.push({ daydate: element.daydate });
        YData.push({ total: element.total });
      }
      let XNewData = XData.map((item) => item.daydate);
      let YNewData = YData.map((item) => item.total);
      console.log(YNewData);
      let chartObj = {
        grid: {
          left: 50,
          right: 0,
        },
        dataZoom: [
          {
            type: "inside",
            start: 5,
            end: 95,
          },
          {
            start: 5,
            end: 95,
          },
        ],
        xAxis: {
          type: "category",
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#E3E8F4",
            },
          },
          axisLabel: {
            color: "#1D263D",
            interval: 0,
            rotate: this.state.tabType ? 0 : 40,
            padding: [30, 0, 0, 0],
            showMinLabel: true, //显示最小值
            showMaxLabel: true, //显示最大值
          },
          data: XNewData,
        },
        yAxis: {
          type: "value",
          splitLine: {
            lineStyle: {
              color: "#E3E8F4",
            },
          },
          axisLabel: {
            color: "#26BE3A",
          },
        },
        series: [
          {
            data: YNewData,
            type: "bar",
            barWidth: 35,
            itemStyle: {
              color: "#2C9EE0",
              borderRadius: 4,
            },
          },
        ],
      };
      this.setState(
        {
          options: null,
        },
        () => {
          this.setState({
            options: chartObj,
          });
        }
      );
    });
  }
  render() {
    const { options, tabType, lineObj, tableLoading } = this.state;
    return (
      <div className={styles["home-container"]}>
        <div className={styles["container-t"]}>
          <div className={styles["count-list"]}>
            <span>用户总数</span>
            <span>
              <i>{lineObj.total_user}</i>人
            </span>
            <span>{lineObj.yes_add_user}（昨日新增）</span>
          </div>
          {/* <div className={styles["count-list"]}>
            <span>总收益</span>
            <span>
              <i>10000</i>￥
            </span>
            <span>+200（昨日新增）</span>
          </div> */}
          <div className={styles["count-list"]}>
            <span>今日在线</span>
            <span>
              <i>{lineObj.online_user}</i>人
            </span>
            <span>{lineObj.yes_add_line_user}（昨日新增）</span>
          </div>
          <div className={styles["count-list"]}>
            <span>手机端下载</span>
            <span>
              <i>{lineObj.total_mb_download}</i>人
            </span>
            <span>{lineObj.yes_add_mb_download}（昨日新增）</span>
          </div>
          <div className={styles["count-list"]}>
            <span>PC端下载</span>
            <span>
              <i>{lineObj.total_pc_download}</i>人
            </span>
            <span>{lineObj.yes_add_pc_download}（昨日新增）</span>
          </div>
        </div>
        <div className={styles["container-b"]}>
          <div className={styles["tab-box"]}>
            <span>用户分析</span>
            <div>
              <span
                className={tabType === 1 ? styles["active"] : ""}
                onClick={() => this.tabChange(1)}
              >
                本周
              </span>
              <span
                className={tabType === 0 ? styles["active"] : ""}
                onClick={() => this.tabChange(0)}
              >
                本月
              </span>
            </div>
            <div>
              {/* <span>用户人数</span>
              <span>收益</span> */}
            </div>
          </div>
          {options && (
            <Echarts
              options={options}
              width="100%"
              height={573}
              loading={tableLoading}
            />
          )}
        </div>
      </div>
    );
  }
}

实际截图

image.png

二.在切换本周 本月的时候发现数据一直都是本周的

实际截图

image.png image.png