tqv-data-operation-screen/src/pages/tqcDataVHome/component/oneQualified.jsx

/*
 * @Author: dayan_hjm 一次合格率
 * @Date: 2023-10-23 09:32:12 
 * @Last Modified by: dayan_hjm
 * @Last Modified time: 2023-11-29 10:53:47
 */


import React, { useState, useEffect, Component } from "react";
import styles from "../style.less";
import { useHistory, useLocation, withRouter } from "react-router-dom";
import mod from '../mod';
import {
  twoService,
} from "../api";

@withRouter

class BottomLineForSend extends Component {
  // 构造函数，组件的实例创建时，最先执行
  constructor(props, context) {
    super(props, context);
    this.store = mod;
    this.state = {
      targeRate: [],
      year: [],
      qcRate: [],
    };
  }

  componentDidMount() {
    this.getUrl()
  }

  async getUrl() {
    await twoService().then(({ data = [], resultCode }) => {
      if (+resultCode === 0) {
        let year = [], qcRate = [], targeRate = [];
        data.map((x, i) => {
          year.push(x.bMonth);
          qcRate.push(x.qcRate)
          targeRate.push(x.targeRate)
        });
        this.setState({ year, targeRate, qcRate });
        this.setData();
      }
    });
  }
  roundFun(value=0) {
    value = value * 100;
    var str = parseFloat(value).toFixed(10);
    var num = str.substring(0,str.lastIndexOf('.')+3);
    return num
  }


  setData() {
    setTimeout(() => {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('echarts5'));

      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'shadow' },
          borderColor: "rgba(105, 255, 222, 0.5)",
          borderWidth: 2,
          padding: 2,
          textStyle: {
            fontSize: 12,
            color: "#ededed"
          },
          formatter: (param)=> {
            return (param[0] && param[0].seriesName ? param[0].seriesName + ":" : "") + (param[0] && param[0].value ? this.roundFun(param[0].value) + "%<br />" : "") + (param[1] && param[1].seriesName ? param[1].seriesName + ":" : "") + (param[1] && param[1].value ? this.roundFun(param[1].value) + "%" : "")
            // return (
            //   <div>
            //     <p>
            //       <span>{param[0] && param[0].seriesName ? param[0].seriesName + ":" : ""}</span>
            //       <span>{param[0] && param[0].value ? param[0].value.toFixed(2) + "%<br />" : ""}</span>
            //     </p>
            //     <p>
            //       <span>{param[1] && param[1].seriesName ? param[1].seriesName + ":" : ""}</span>
            //       <span>{param[1] && param[1].value ? param[1].value.toFixed(2) + "%" : ""}</span>
            //     </p>
            //   </div>
            // )
          },
          //  `{a0}: {c0}<br />{a1}: {c1}`,
          backgroundColor: "#0000008a"
        }, "grid": {
          "top": "20%",
          "right": "5%",
          "bottom": "20",
          "left": "7%",
        },
        legend: {
          data: ['目标一次及格率', '实际一次及格率'],
          right: 'center',
          padding: [10, 0, 0, 5],
          top: 0,
          textStyle: {
            color: "#fff",
            fontSize: 10,
          },
          itemWidth: 12,
          itemHeight: 5,
        },
        "xAxis": [
          {
            "type": "category",
            data: this.state.year,
            axisLine: { lineStyle: { color: "rgba(255,255,255,.1)" } },
            axisLabel: {
              textStyle: { color: "'#7d7d7d'", fontSize: '12', },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#3b3b3b',
                type: 'dashed',

              }
            }

          },
        ],
        "yAxis": [
          {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#7d7d7d',
                type: 'dashed',
              },
            },
            axisTick: { show: false },
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                color: '#7d7d7d',
                fontSize: 12
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#3b3b3b',
                type: 'dashed',

              }
            }
          },
        ],
        "series": [
          {
            "name": "目标一次及格率",
            "type": "line",
            data: this.state.targeRate,
            lineStyle: {
              normal: {
                width: 2
              },
            },
            "itemStyle": {
              "normal": {
                "color": "#69FFDE",

              }
            },
            "smooth": true
          },
          {
            "name": "实际一次及格率",
            "type": "line",
            data: this.state.qcRate,
            lineStyle: {
              normal: {
                width: 2
              },
            },
            "itemStyle": {
              "normal": {
                "color": "#FFCE00",

              }
            },
            "smooth": true
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });

    }, 3000)
  }

  render() {

    return (
      <div className={["eacharView cbBottomLineForSend"]}>
        <div id="echarts5"></div>
      </div>
    )
  }
}
export default BottomLineForSend;