From 0630126012170da25291d55f0a1bd3130e64f434 Mon Sep 17 00:00:00 2001
From: liuying <1427574514@qq.com>
Date: 周一, 28 4月 2025 15:45:28 +0800
Subject: [PATCH] 一汽大屏 未提交的代码
---
yiqi_screen/src/components/ProductionCompletionTrend.vue | 57 ++++++++++++++++++++++++++++++++++-----------------------
1 files changed, 34 insertions(+), 23 deletions(-)
diff --git a/yiqi_screen/src/components/ProductionCompletionTrend.vue b/yiqi_screen/src/components/ProductionCompletionTrend.vue
index 22b5161..54bd1e1 100644
--- a/yiqi_screen/src/components/ProductionCompletionTrend.vue
+++ b/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>
--
Gitblit v1.9.3