一汽大屏 未提交的代码

liuying

2025-04-28 0630126012170da25291d55f0a1bd3130e64f434

 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,15 +36,30 @@
        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);
      this.$set(this.option.series[0], "data", yData1);
@@ -58,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)",
@@ -87,7 +105,6 @@
        axisLine: {
          lineStyle: {
            color: "#326e92",
          
          },
        },
      },
@@ -105,7 +122,7 @@
            show: true,
            margin: 5,
            color: "#326e92",
            // formatter: '{value}%'
            formatter: "{value}%",
          },
          alignTicks: false,
          nameTextStyle: {
@@ -148,9 +165,8 @@
          name: "生产完成数",
          type: "pictorialBar",
          // type: "bar",
          symbol: 'image://'+zhu,
          symbol: "image://" + zhu,
           data: [],
         
          // yAxisIndex: 0,
          // color: {
          //   type: "linear",
@@ -174,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,
          },
@@ -216,7 +233,6 @@
    // window.addEventListener("resize",  ()=> {
    //   this.myChart.resize();
    // });

    // this.init()
  },
  methods: {
@@ -270,7 +286,7 @@
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;
      var rocket =''
      var rocket = "";
        
      option = {
        legend: {
@@ -286,7 +302,7 @@
          {
            type: "pictorialBar",
            name: "tu1",
            symbol: 'image://'+zhu,
            symbol: "image://" + zhu,
            data: [
              {
                value: 60,
@@ -310,7 +326,6 @@
      };
      myChart.setOption(option);
    },
    
  },
};
</script>