细节

liuying

2024-11-01 3c10ef337099f10ad5a8043019af3818055bd4c8

 yiqi_screen/src/components/ProductionCompletionTrend.vue

@@ -19,16 +19,21 @@
  },
  watch:{
    produceCompletionData(val){
      let xData=[],yData1=[],yData2=[];
      let xData=[],yData1=[],yData2=[],yData3=[];
      val.forEach(item => {
        xData.push(item.month)
        yData1.push(item.planCompletionNum)
        yData2.push(item.planCompletionRate)
        yData1.push(item.completionNum) //实际
        yData2.push(item.planCompletionRate)  //planCompletionRate
        yData3.push(item.planCompletionNum)  //计划
      });
      this.$set(this.option.xAxis,'data',xData)
      this.$set(this.option.series[0],'data',yData1)
      this.$set(this.option.series[1],'data',yData2)
      this.myChart.setOption(this.option);
      this.$set(this.option.series[2],'data',yData3)
      this.$nextTick(() => {
        this.myChart.setOption(this.option);
        });

    }
  },
  mounted() {
@@ -37,8 +42,12 @@
      tooltip: {
        trigger: "axis",
        formatter:
          '{b0}月<br /><a style="display:inline-block;width:10px;height:10px;background:linear-gradient(to bottom,#13e5f2,#01afba);border-radius:50%"></a> {a0}: {c0}<br /><a style="display:inline-block;width:10px;height:10px;background:linear-gradient(to bottom,#fff,#eee);border-radius:50%"></a> {a1}: {c1}%',
    '{b0}月<br />' +
    '<a style="display:inline-block;width:10px;height:10px;background:linear-gradient(to bottom,#13e5f2,#01afba);border-radius:50%"></a> {a0}: {c0}<br />' +
     '<a style="display:inline-block;width:10px;height:10px;background:linear-gradient(to bottom,#ffc107,#fd7e14);border-radius:50%"></a> {a2}: {c2}<br />'+
    '<a style="display:inline-block;width:10px;height:10px;background:linear-gradient(to bottom,#fff,#eee);border-radius:50%"></a> {a1}: {c1}%<br />', // 添加生产计划数提示
        backgroundColor: "rgba(0,0,0,0.7)",
        
        textStyle: {
          color: "#fff",
        },
@@ -69,7 +78,6 @@
      yAxis: [
        {
          type: "value",
          // name: "报警次数",
          position:'left',
          axisLine: {
            show: true,
@@ -154,6 +162,17 @@
            width:3
          }
        },
     {
    name: "生产计划数", // 添加生产计划数
     type: "line",
     data: [], // 根据需要填充此数组
     showSymbol: false,
     yAxisIndex: 0, // 与相应的 y 轴关联
    color: 'rgba(255,205,86,0.85)', // 自定义颜色
      lineStyle: {
       width: 3
     }
    }
      ],
      // animation: true,
      // dataZoom: [