大屏

liuying

2024-11-11 62ec1f19c3444695e21f1fe97472261ce3082075

 yiqi_screen/src/components/ProductionStatistics.vue

@@ -1,5 +1,7 @@
<template>
  <div class="box-container" id="echarts4"></div>
  <!-- 本班/本月产量统计 -->
  <div class="box-container box4" id="echarts4"></div>
  
</template>

<script>
@@ -22,6 +24,9 @@
  },
  watch: {
    produceStatisData(val) {
      // 测试用：
      val.currentShiftProduceNum = 300;
      val.currentShiftPlanNum = 300;
      // 当前班组实际生产数量 currentShiftProduceNum
      // 当前班组计划生产数量 currentShiftPlanNum
      var num1 = val.currentShiftProduceNum; //实际生产数量
@@ -31,11 +36,15 @@
        num1 = 0;
        num2 = 10;
      }


      
      this.$set(this.option.series[0], "data", [
        // { value: 1 },  //实际生产数量 1/ (9+1) = 10%
        // { value: 9 },
        { value: Math.floor(num1) }, //实际生产数量
        { value: Math.floor(num2) },
        { value: num1,
         }, //实际生产数量
        { value: num2 },
      ]);
      var num3 = val.currentMonthProduceNum;
      var num4 = val.currentMonthPlanNum - val.currentMonthProduceNum;
@@ -45,8 +54,8 @@
        num4 = 10;
      }
      this.$set(this.option.series[1], "data", [
        { value: Math.floor(num3) },
        { value: Math.floor(num4) },
        { value: num3 },
        { value: num4 },
      ]);

      this.myChart.setOption(this.option);
@@ -56,57 +65,58 @@
  mounted() {
    this.myChart = this.$echarts.init(document.getElementById("echarts4"));
    this.option = {
      color: ["#00f6fe", "#c4c3d6"],
      // 插入背景图
      // graphic: [
      //   {
      //     type: "image",
      //     id: "background1",
      //     left: "20px", // 根据环形图的位置调整
      //     top: "60px", // 根据环形图的位置调整
      //     z: -10,
      //     bounding: "raw",
      //     origin: [-25, -25],
      //     style: {
      //       image: require(`@/assets/images/quan.png`), // 第一个环形图的背景图片路径
      //       width: 100,
      //       height: 100,
      //       opacity: 1,
      //     },
      //   },
      //   {
      //     type: "image",
      //     id: "background2",
      //     left: "153px", // 根据环形图的位置调整
      //     top: "60px", // 根据环形图的位置调整
      //     z: -10,
      //     bounding: "raw",
      //     origin: [0, 0],
      //     style: {
      //       image: require(`@/assets/images/quan.png`), // 第一个环形图的背景图片路径
      //       width: 100,
      //       height: 100,
      //       opacity: 1,
      //     },
      //   },
      // ],
    
      color: ["#00f6fe", "transparent"],
         // 插入背景图
         graphic: [
        {
          type: "image",
          id: "background1",
          left: "11px", // 根据环形图的位置调整
          top: "59.5px", // 根据环形图的位置调整
          z: -10,
          bounding: "raw",
          origin: [0, 0],
          style: {
            image: require(`@/assets/images/quan.png`), // 第一个环形图的背景图片路径
            width: 100,
            height: 100,
            opacity: 1,
          },
        },
        {
          type: "image",
          id: "background2",
          left: "130px", // 根据环形图的位置调整
          top: "59.5px", // 根据环形图的位置调整
          z: -10,
          bounding: "raw",
          origin: [0, 0],
          style: {
            image: require(`@/assets/images/quan.png`), // 第一个环形图的背景图片路径
            width: 100,
            height: 100,
            opacity: 1,
          },
        },
      ],
      series: [
        {
          name: "Access From",
          type: "pie",
          // radius: ["25%", "40%"],
          // padAngle: 5, //环与环之间的间隙
          radius: ["30%", "37%"], //环变细
          center: ["26%", "47%"],
          avoidLabelOverlap: false,
          silent: true,clockwise: true,
          // avoidLabelOverlap: false,
          label: {
            show: false,
            position: "center",
            formatter: `{d}%`,
            formatter: function (params) {
              return Math.floor(params.percent) + '%'; // 四舍五入到整数
            },
            color: "#fff",
            fontSize: 12,
          },

          emphasis: {
            //饼图中间的字体大小
            scale: false,
@@ -116,6 +126,7 @@
              color: "#19d8d0",
              fontWeight: "normal",
            },
         
          },
          labelLine: {
            show: false,
@@ -130,14 +141,17 @@
        {
          name: "Access From",
          type: "pie",
          // padAngle: 5, //环与环之间的间隙
          // radius: ["25%", "40%"],
          radius: ["30%", "37%"], //环变细
          center: ["74%", "47%"],
          avoidLabelOverlap: false,
          // avoidLabelOverlap: false,
          label: {
            show: false,
            position: "center",
            formatter: `{d}%`,
            formatter: function (params) {
              return Math.floor(params.percent) + '%'; // 四舍五入到整数
            },
            color: "#fff",
            fontSize: 12,
          },
@@ -261,4 +275,34 @@
#echarts4 {
  transform: scaleY(2);
}

.box4::before{
    position: absolute;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    content: "";
    width: 95px;
    height: 47px;
    z-index: -1;
    top: 86px;
    left: 13px;
    transform: scaleY(2);
    border: 1px solid #074d95;
    border-radius: 100%;
}

.box4::after{
  position: absolute;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    content: "";
    width: 95px;
    height: 47px;
    z-index: -1;
    top: 86px;
    left: 132px;
    transform: scaleY(2);
    border: 1px solid #074d95;
    border-radius: 100%;
}
</style>