大屏整改

liuying

2024-11-10 19b415a1aa36dc70e5546b0fdeefa6a39570f19b

 yiqi_screen/src/components/ProductionStatistics.vue

@@ -26,25 +26,27 @@
      // 当前班组计划生产数量 currentShiftPlanNum
      var num1 = val.currentShiftProduceNum; //实际生产数量
      var num2 = val.currentShiftPlanNum - val.currentShiftProduceNum; //计划生产数量
      if(val.currentShiftPlanNum == 0){ //分母为0 显示0%
        num1 = 0
        num2 = 10
      if (val.currentShiftPlanNum == 0) {
        //分母为0 显示0%
        num1 = 0;
        num2 = 10;
      }
      this.$set(this.option.series[0], "data", [
      // { value: 1 },  //实际生产数量 1/ (9+1) = 10%
      // { value: 9 },
        { value: num1 }, //实际生产数量
        { value: num2 },
        { value: Math.floor(num1) }, //实际生产数量
        { value: Math.floor(num2) },
      ]);
      var num3 = val.currentMonthProduceNum; 
      var num4 = val.currentMonthPlanNum - val.currentMonthProduceNum; 
      if(val.currentMonthPlanNum == 0 ){ //分母为0 显示0%
        num3 = 0
        num4 = 10
      if (val.currentMonthPlanNum == 0) {
        //分母为0 显示0%
        num3 = 0;
        num4 = 10;
      }
      this.$set(this.option.series[1], "data", [
        { value: num3 },
        { value: num4 },
        { value: Math.floor(num3) },
        { value: Math.floor(num4) },
      ]);

      this.myChart.setOption(this.option);
@@ -55,6 +57,40 @@
    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,
      //     },
      //   },
      // ],
    
      series: [
        {
          name: "Access From",
@@ -71,11 +107,13 @@
            fontSize: 12,
          },

          emphasis: { //饼图中间的字体大小
          emphasis: {
            //饼图中间的字体大小
            scale: false,
            label: {
              show: true,
              fontSize: 15,
              fontSize: 22,
              color: "#19d8d0",
              fontWeight: "normal",
            },
          },
@@ -112,7 +150,8 @@
            scale: false,
            label: {
              show: true,
              fontSize: 15, //饼图中间的字体大小
              fontSize: 22,
              color: "#19d8d0",
              fontWeight: "normal",
            },
          },
@@ -124,10 +163,10 @@
      ],
    };
    this.myChart.setOption(this.option);
    const that=this
    window.addEventListener('resize',()=>{
    const that = this;
    window.addEventListener("resize", () => {
      that.myChart.resize();
    })
    });
    // this.getData();
    this.defineEvent();
    // this.selectPie();