From 19b415a1aa36dc70e5546b0fdeefa6a39570f19b Mon Sep 17 00:00:00 2001
From: liuying <1427574514@qq.com>
Date: 周日, 10 11月 2024 09:07:50 +0800
Subject: [PATCH] 大屏整改
---
yiqi_screen/src/components/ProductionStatistics.vue | 103 ++++++++++++++++++++++++++++++++++++---------------
1 files changed, 72 insertions(+), 31 deletions(-)
diff --git a/yiqi_screen/src/components/ProductionStatistics.vue b/yiqi_screen/src/components/ProductionStatistics.vue
index 65d8a59..b8654cc 100644
--- a/yiqi_screen/src/components/ProductionStatistics.vue
+++ b/yiqi_screen/src/components/ProductionStatistics.vue
@@ -1,8 +1,8 @@
<template>
<div class="box-container" id="echarts4"></div>
</template>
-
- <script>
+
+<script>
let timer = null;
export default {
props: {
@@ -22,29 +22,31 @@
},
watch: {
produceStatisData(val) {
- // 褰撳墠鐝粍瀹為檯鐢熶骇鏁伴噺 currentShiftProduceNum
+ // 褰撳墠鐝粍瀹為檯鐢熶骇鏁伴噺 currentShiftProduceNum
// 褰撳墠鐝粍璁″垝鐢熶骇鏁伴噺 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: 1 }, //瀹為檯鐢熶骇鏁伴噺 1/ (9+1) = 10%
+ // { value: 9 },
+ { 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
+ var num3 = val.currentMonthProduceNum;
+ var num4 = val.currentMonthPlanNum - val.currentMonthProduceNum;
+ 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,11 +57,46 @@
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",
type: "pie",
- radius: ["25%", "40%"],
+ // radius: ["25%", "40%"],
+ radius: ["30%", "37%"], //鐜彉缁�
center: ["26%", "47%"],
avoidLabelOverlap: false,
label: {
@@ -70,11 +107,13 @@
fontSize: 12,
},
- emphasis: { //楗煎浘涓棿鐨勫瓧浣撳ぇ灏�
+ emphasis: {
+ //楗煎浘涓棿鐨勫瓧浣撳ぇ灏�
scale: false,
label: {
show: true,
- fontSize: 14,
+ fontSize: 22,
+ color: "#19d8d0",
fontWeight: "normal",
},
},
@@ -91,7 +130,8 @@
{
name: "Access From",
type: "pie",
- radius: ["25%", "40%"],
+ // radius: ["25%", "40%"],
+ radius: ["30%", "37%"], //鐜彉缁�
center: ["74%", "47%"],
avoidLabelOverlap: false,
label: {
@@ -110,7 +150,8 @@
scale: false,
label: {
show: true,
- fontSize: 14, //楗煎浘涓棿鐨勫瓧浣撳ぇ灏�
+ fontSize: 22,
+ color: "#19d8d0",
fontWeight: "normal",
},
},
@@ -122,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();
@@ -215,9 +256,9 @@
},
};
</script>
-
- <style>
- #echarts4{
- transform: scaleY(2);
- }
-</style>
\ No newline at end of file
+
+<style>
+#echarts4 {
+ transform: scaleY(2);
+}
+</style>
--
Gitblit v1.9.3