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/ProductionStatistics.vue | 130 ++++++++++++++++--------------------------
1 files changed, 50 insertions(+), 80 deletions(-)
diff --git a/yiqi_screen/src/components/ProductionStatistics.vue b/yiqi_screen/src/components/ProductionStatistics.vue
index dbf822c..a1c07ef 100644
--- a/yiqi_screen/src/components/ProductionStatistics.vue
+++ b/yiqi_screen/src/components/ProductionStatistics.vue
@@ -1,7 +1,6 @@
<template>
<!-- 鏈彮/鏈湀浜ч噺缁熻 -->
<div class="box-container box4" id="echarts4"></div>
-
</template>
<script>
@@ -25,8 +24,9 @@
watch: {
produceStatisData(val) {
// 娴嬭瘯鐢細
- val.currentShiftProduceNum = 300;
- val.currentShiftPlanNum = 300;
+ // val.currentShiftProduceNum = 280;
+ // val.currentShiftPlanNum = 300;
+
// 褰撳墠鐝粍瀹為檯鐢熶骇鏁伴噺 currentShiftProduceNum
// 褰撳墠鐝粍璁″垝鐢熶骇鏁伴噺 currentShiftPlanNum
var num1 = val.currentShiftProduceNum; //瀹為檯鐢熶骇鏁伴噺
@@ -36,15 +36,15 @@
num1 = 0;
num2 = 10;
}
-
-
-
this.$set(this.option.series[0], "data", [
// { value: 1 }, //瀹為檯鐢熶骇鏁伴噺 1/ (9+1) = 10%
// { value: 9 },
- { value: num1,
- }, //瀹為檯鐢熶骇鏁伴噺
- { value: num2 },
+ {
+ value: num1,
+ }, //瀹為檯鐢熶骇鏁伴噺
+ {
+ value: num2,
+ },
]);
var num3 = val.currentMonthProduceNum;
var num4 = val.currentMonthPlanNum - val.currentMonthProduceNum;
@@ -66,53 +66,52 @@
this.myChart = this.$echarts.init(document.getElementById("echarts4"));
this.option = {
color: ["#00f6fe", "transparent"],
- // 鎻掑叆鑳屾櫙鍥�
- graphic: [
- {
- type: "image",
- id: "background1",
- left: "11px", // 鏍规嵁鐜舰鍥剧殑浣嶇疆璋冩暣
- top: "59.5px", // 鏍规嵁鐜舰鍥剧殑浣嶇疆璋冩暣
- z: -10,
- bounding: "raw",
- origin: [0, 0],
- style: {
- image: require(`@/assets/images/quan.png`), // 绗竴涓幆褰㈠浘鐨勮儗鏅浘鐗囪矾寰�
- width: 100,
- height: 100,
- opacity: 1,
- },
- },
- {
- type: "image",
- id: "background2",
- left: "130px", // 鏍规嵁鐜舰鍥剧殑浣嶇疆璋冩暣
- top: "59.5px", // 鏍规嵁鐜舰鍥剧殑浣嶇疆璋冩暣
- z: -10,
- bounding: "raw",
- origin: [0, 0],
- style: {
- image: require(`@/assets/images/quan.png`), // 绗竴涓幆褰㈠浘鐨勮儗鏅浘鐗囪矾寰�
- width: 100,
- height: 100,
- opacity: 1,
- },
- },
- ],
+ // 鎻掑叆鑳屾櫙鍥�
+ // graphic: [
+ // {
+ // type: "image",
+ // id: "background1",
+ // left: "13px", // 鏍规嵁鐜舰鍥剧殑浣嶇疆璋冩暣
+ // top: "61px", // 鏍规嵁鐜舰鍥剧殑浣嶇疆璋冩暣
+ // z: -10,
+ // bounding: "raw",
+ // origin: [0, 0],
+ // style: {
+ // image: require(`@/assets/images/quan.png`), // 绗竴涓幆褰㈠浘鐨勮儗鏅浘鐗囪矾寰�
+ // width: 100,
+ // height: 100,
+ // },
+ // },
+ // {
+ // type: "image",
+ // id: "background2",
+ // left: "131px", // 鏍规嵁鐜舰鍥剧殑浣嶇疆璋冩暣
+ // top: "61px", // 鏍规嵁鐜舰鍥剧殑浣嶇疆璋冩暣
+ // z: -10,
+ // bounding: "raw",
+ // origin: [0, 0],
+ // style: {
+ // image: require(`@/assets/images/quan.png`), // 绗竴涓幆褰㈠浘鐨勮儗鏅浘鐗囪矾寰�
+ // width: 100,
+ // height: 100,
+ // },
+ // },
+ // ],
series: [
{
name: "Access From",
type: "pie",
// padAngle: 5, //鐜笌鐜箣闂寸殑闂撮殭
- radius: ["30%", "37%"], //鐜彉缁�
- center: ["26%", "47%"],
- silent: true,clockwise: true,
+ radius: ["29%", "36%"], //鐜彉缁�
+ center: ["25%", "49%"],
// avoidLabelOverlap: false,
label: {
show: false,
position: "center",
formatter: function (params) {
- return Math.floor(params.percent) + '%'; // 鍥涜垗浜斿叆鍒版暣鏁�
+ return params.percent < 1
+ ? params.percent + "%"
+ : Math.floor(params.percent) + "%"; // 鍥涜垗浜斿叆鍒版暣鏁�
},
color: "#fff",
fontSize: 12,
@@ -126,7 +125,6 @@
color: "#19d8d0",
fontWeight: "normal",
},
-
},
labelLine: {
show: false,
@@ -143,14 +141,16 @@
type: "pie",
// padAngle: 5, //鐜笌鐜箣闂寸殑闂撮殭
// radius: ["25%", "40%"],
- radius: ["30%", "37%"], //鐜彉缁�
- center: ["74%", "47%"],
+ radius: ["29%", "36%"], //鐜彉缁�
+ center: ["74%", "49%"],
// avoidLabelOverlap: false,
label: {
show: false,
position: "center",
formatter: function (params) {
- return Math.floor(params.percent) + '%'; // 鍥涜垗浜斿叆鍒版暣鏁�
+ return params.percent < 1
+ ? params.percent + "%"
+ : Math.floor(params.percent) + "%"; // 鍥涜垗浜斿叆鍒版暣鏁�
},
color: "#fff",
fontSize: 12,
@@ -274,35 +274,5 @@
<style>
#echarts4 {
transform: scaleY(2);
-}
-
-.box4::before{
- position: absolute;
- background-size: 100% 100%;
- background-repeat: no-repeat;
- content: "";
- width: 95px;
- height: 47px;
- z-index: -1;
- top: 86px;
- left: 13px;
- transform: scaleY(2);
- border: 1px solid #074d95;
- border-radius: 100%;
-}
-
-.box4::after{
- position: absolute;
- background-size: 100% 100%;
- background-repeat: no-repeat;
- content: "";
- width: 95px;
- height: 47px;
- z-index: -1;
- top: 86px;
- left: 132px;
- transform: scaleY(2);
- border: 1px solid #074d95;
- border-radius: 100%;
}
</style>
--
Gitblit v1.9.3