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 10:47:46
 */


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' },
        }, "grid": {
          "top": "15%",
          "right": "10%",
          "bottom": "20",
          "left": "10%",
        },
        legend: {
          data: ['目标一次及格率', '实际一次及格率'],
          right: 'center',
          top: 0,
          textStyle: {
            color: "#fff"
          },
          itemWidth: 12,
          itemHeight: 10,
        },
        "xAxis": [
          {
            "type": "category",

            data: ['2016', '2017', '2018', '2019'],
            axisLine: { lineStyle: { color: "rgba(255,255,255,.1)" } },
            axisLabel: {
              textStyle: { color: "rgba(255,255,255,.7)", fontSize: '14', },
            },

          },
        ],
        "yAxis": [
          {
            "type": "value",
            "name": "单位1",
            "show": true,
            axisTick: { show: false },
            "axisLabel": {
              "show": true,
              color: "rgba(255,255,255,.6)"

            },
            axisLine: { lineStyle: { color: 'rgba(255,255,255,.1)' } },//左线色

          },
          {
            "type": "value",
            "name": "单位2",
            "show": true,
            axisTick: { show: false },
            "axisLabel": {
              "show": true,
              formatter: "{value}",
              color: "rgba(255,255,255,.6)"
            },
            axisLine: { lineStyle: { color: 'rgba(255,255,255,.1)' } },//右线色
            splitLine: { show: true, lineStyle: { color: 'rgba(255,255,255,.1)' } },//x轴线
          },
        ],
        "series": [
          {
            "name": "目标一次及格率",
            "type": "line",
            "yAxisIndex": 1,

            "data": [66, 16.8, 1.33, 12.65],
            lineStyle: {
              normal: {
                width: 2
              },
            },
            "itemStyle": {
              "normal": {
                "color": "#69FFDE",

              }
            },
            "smooth": true
          },
          {
            "name": "实际一次及格率",
            "type": "line",
            "yAxisIndex": 1,

            "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();
      });

    }, 200)
  }

  render() {

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