GScreenWEB_TPMes/src/components/dianfanbao-demo/newContain5.vue

// 修改模板部分
<template>
  <div class="ncb-cmp">
    <div class="ncb-main-container" style="height:100%;display:flex;">
      
      <div class="ncbmc-middle">
        <dv-border-box-1>
          <div class="chart-title">
            <span class="title-decoration"></span>
            UPPH统计信息
          </div>
          <div id="nbc-line2" style="width: 100%; height: 600px;">

          </div>
        </dv-border-box-1>
       
      </div>
     
    </div>
  </div>
</template>

<script>
import LabelTag from './LabelTag'
import * as echarts from 'echarts';
import testRes from './test'

console.log(testRes)
export default {
  name: 'CenterCmp',
  components: {
    LabelTag,
  },
  props: { 
    dataType: {
      type: String,
      default: ''
    }
  },
  data () { 


    return {
    }
  },
  // 在mounted()中调用
  mounted() {
    this.initMixedChart()
  },
  // 在methods中添加方法
  methods: {
    initMixedChart() {
      const chartDom = document.getElementById('nbc-line2');
      const myChart = echarts.init(chartDom);
      const actualData = [10.5, 10.5, 10.5, 10.5, 0, 0]; 
      const targetData = [10.5, 10.5, 10.5, 10.5, 0, 0];
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: {
          data: ['目标UPPH','实际UPPH'],
          bottom: 10, // 图例显示在下方
          textStyle: {
            fontSize: '20',
            color: '#fff' // 图例文字为白色
          }
        },
        xAxis: {
          type: 'category',
          data: ['08:00-09:00', '09:00-10:00', '10:00-12:00', '13:30-15:30', '15:30-17:30', '17:30-19:30'],
          axisLabel: {
            fontSize: 20, // 放大 x 轴文字
            fontWeight: 'bold', // x 轴文字加粗
            color: '#fff' // 设置 x 轴文字为白色
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            fontSize: 26, // 放大 y 轴文字
            fontWeight: 'bold', // y 轴文字加粗
            color: '#fff' // 设置 y 轴文字为白色
          },
          splitLine: { // 关闭 y 轴辅助线
            show: false
          }
        },
        series: [
          {
            name: '实际UPPH',
            type: 'bar',
            barWidth: '30%', // 缩小柱状图的条状宽度
            data: actualData,
            itemStyle: {
              color: 'rgb(255, 255, 204)' // 天黄色
            },
            label: {
              show: true,
              position: 'inside',
              fontSize: '22px',
              fontWeight: 'bolder', // 柱状图 label 字体加粗 
              formatter: function(params) {
                return params.value;
              },
              color: function(params) {
                return params.value >= targetData[params.dataIndex] ? 'green' : 'red';
              }
            }
          },
          {
            name: '目标UPPH',
            type: 'line',
            data: targetData,
            itemStyle: {
              color: 'rgb(173, 216, 230)' // 浅蓝色
            },
            label: {
              show: true,
              position: 'top',
              fontSize: '20px',
              fontWeight: 'bold', // 柱状图 label 字体加粗 
              formatter: function(params) {
                return params.value;
              },
              color: 'rgb(173, 216, 230)' // 浅蓝色
            }
          }
        ]
      };
      myChart.setOption(option);
      window.addEventListener('resize', () => {
        myChart.resize();
      });
    }
  }
}
</script>

// 添加样式

<style lang="less">
.ncb-cmp {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  display: flex;
  flex-direction: column;   
    .middle-top {
    padding-left: 20px;
    margin-top: -50px;
    margin-bottom: 30px;
    background-image: linear-gradient(
                to bottom,
                rgba(135, 178, 252, 0.04),  /* 蓝色透明度15% */
                rgba(158, 158, 158, 0.149)  /* 灰色透明度15% */
            );
    border-radius: 20px;
    &-container {
        display: flex;
        justify-content: space-around;
        height: 100%;
    }
    
    .inspection-box {
        width: 15%;
        padding: 15px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        
        .inspection-title {
        font-size: 30px;
        color: #fff;
        font-weight: bold;
        margin-bottom: 10px;
        }
        
        .inspection-value {
        font-size: 44px;
        color: #08e5ff;
        font-weight: bold;
        }
    }
    
    .pass-rate-box {
        width: 27%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    }

  .ncb-header {
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 30px;
  }

  .ncb-main-container {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    .ncbmc-middle {
      width: 100%;
      height: 100%;
    background-color:rgba(4,49,128,.15);
      .active-ring-name {
        width: 150px;
        font-size: 30px !important;
        font-weight: bold;
        height:100px;
      }
      .dv-digital-flop {
        font-size: 100px;
        // width: 100px;
        // height: 30px;
        font-weight: bold;
      }
    }
    .ncbmc-left-new{
      height: 15%;
    }
    .chart-title{
        position: absolute;
        top: 20px;
      
        font-size: 32px; // 放大字体
        font-weight: bold;
        .title-decoration {
          display: inline-block;
          width: 10px;
          height: 25px;
          background-color: #08e5ff; // 淡蓝色
          margin-right: 10px;
        }
      }
    #nbc-line2{
      position: absolute;
      top: 70px;
    }
  }

    .staff-box {
    margin-top: 50px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    // padding: 20px;
  }

  .staff-item {
    display: flex;
    align-items: center;
    // width:calc(50% - 50px) ; // 每行两个元素
    // background-color: rgba(255, 255, 255, 0.1);
    padding: 15px;
    border-radius: 10px;
  }

  .staff-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 70px;
    margin-right: 20px;
  }

  .staff-name {
    color: #fff;
    font-size: 23px;
    font-weight: bold;
    margin-bottom: 10px;
  }

  .staff-count {
    color: orange;
    font-weight: bold;
    font-size: 20px;
  }

  .staff-images {
    display: flex;
    gap: 5px;
  }

  .staff-images img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
  }
}
</style>