222

schangxiang@126.com

2025-09-26 2b05362eba2f989b7857349cc9a3a1c12f8181b6

 yiqi_screen/src/components/ProductionCompletionTrend.vue

@@ -1,12 +1,16 @@
<template>
  <div>
    <div class="box-container" id="echarts5" style="width: 100%;height:230px"></div>
    <div
      class="box-container"
      id="echarts5"
      style="width: 100%; height: 230px"
    ></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import {zhu} from './img/t.js'
import { zhu } from "./img/t.js";

export default {
  props: {
@@ -20,7 +24,6 @@
      option: {},
      myChart: {},
      timechartes: null,

      myChart2: null,
      textureImg: null,
      // img,
@@ -33,23 +36,34 @@
        yData2 = [],
        yData3 = [];
      val.forEach((item) => {
        console.log('ceshi', item.completionNum);
        
        console.log("ceshi", item.completionNum);
        xData.push(item.month);
        yData1.push({
          value: item.completionNum,
          // value: item.completionNum,
          value: 100,
          symbolRepeat: false,
        }); //实际
        // yData1.push(item.completionNum); //实际
        yData2.push(item.planCompletionRate); //planCompletionRate
        yData3.push(item.planCompletionNum); //计划
        var num = 0; //已完成数 / 计划完成数
        if (item.completionNum > 0) {
          if (item.planCompletionNum > item.completionNum) {
            // 5/10
            num = item.completionNum / item.planCompletionNum;
          } else if (item.planCompletionNum <= 0) {
            // 10/0
            num = 100;
          } else if (item.completionNum >= item.planCompletionNum) {
            // 10/5
            num = 100;
          }
        }
        yData2.push(num.toFixed(2)); //planCompletionRate
        // yData2.push(item.planCompletionRate); //planCompletionRate
        // yData3.push(item.planCompletionNum); //计划
      });
      this.$set(this.option.xAxis, "data", xData);
      // console.log('---', yData1);
      
      this.$set(this.option.series[0], "data", yData1);
      this.$set(this.option.series[1], "data", yData2);
      // this.$set(this.option.series[2], "data", yData3);
      this.$nextTick(() => {
        this.myChart.setOption(this.option);
      });
@@ -62,7 +76,7 @@
        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,#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)",
@@ -81,7 +95,7 @@
        type: "category",
        axisLabel: {
          color: "#326e92",
          interval: 0,  
          interval: 0,
          fontSize: 13,
          // formatter: '{value}月'
        },
@@ -91,7 +105,6 @@
        axisLine: {
          lineStyle: {
            color: "#326e92",
          
          },
        },
      },
@@ -109,7 +122,7 @@
            show: true,
            margin: 5,
            color: "#326e92",
            // formatter: '{value}%'
            formatter: "{value}%",
          },
          alignTicks: false,
          nameTextStyle: {
@@ -152,9 +165,8 @@
          name: "生产完成数",
          type: "pictorialBar",
          // type: "bar",
          symbol: 'image://'+zhu,
          symbol: "image://" + zhu,
          data: [],

          // yAxisIndex: 0,
          // color: {
          //   type: "linear",
@@ -178,10 +190,11 @@
          name: "生产完成率",
          type: "line",
          data: [],
          z: 5,
          showSymbol: true,
          yAxisIndex: 1,
          smooth: true, // 使折线图平滑
          color: "rgba(255,205,86,0.85)",
          color: "#ff9600",
          lineStyle: {
            width: 1,
          },
@@ -220,7 +233,6 @@
    // window.addEventListener("resize",  ()=> {
    //   this.myChart.resize();
    // });

    // this.init()
  },
  methods: {
@@ -274,8 +286,8 @@
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;
      var rocket =''
        
      var rocket = "";

      option = {
        legend: {
          data: ["tu1", "barbg1"],
@@ -290,7 +302,7 @@
          {
            type: "pictorialBar",
            name: "tu1",
            symbol: 'image://'+zhu,
            symbol: "image://" + zhu,
            data: [
              {
                value: 60,
@@ -314,7 +326,6 @@
      };
      myChart.setOption(option);
    },
    
  },
};
</script>