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-10-23 16:09:39
 */


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

@withRouter

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

  componentDidMount() {
    this.setData();
  }

  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:5,
          textStyle:{
            fontSize:12,
            color:"#ededed"
          },
          formatter: '{a0}: {c0}<br />{a1}: {c1}',
          backgroundColor:"#0000008a"
        }, "grid": {
          "top": "20%",
          "right": "15%",
          "bottom": "20",
          "left": "15%",
        },
        legend: {
          data: ['目标一次及格率', '实际一次及格率'],
          right: 'center',
          padding: [10, 0, 0, 15],
          top: 0,
          textStyle: {
            color: "#fff"
          },
          itemWidth: 12,
          itemHeight: 5,
        },
        "xAxis": [
          {
            "type": "category",

            data: ['2月', '3月', '4月', '5月', '6月'],
            axisLine: { lineStyle: { color: "rgba(255,255,255,.1)" } },
            axisLabel: {
              textStyle: { color: "rgba(255,255,255,.7)", 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": [66, 16.8, 1.33, 12.65],
            lineStyle: {
              normal: {
                width: 2
              },
            },
            "itemStyle": {
              "normal": {
                "color": "#69FFDE",

              }
            },
            "smooth": true
          },
          {
            "name": "实际一次及格率",
            "type": "line",
            "data": [0, 11.48, 18.00, 25.65],
            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;