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/EquipmentRunStatus.vue | 87 +++++++++++++++++++++++++++----------------
1 files changed, 55 insertions(+), 32 deletions(-)
diff --git a/yiqi_screen/src/components/EquipmentRunStatus.vue b/yiqi_screen/src/components/EquipmentRunStatus.vue
index af5d79a..8a0583c 100644
--- a/yiqi_screen/src/components/EquipmentRunStatus.vue
+++ b/yiqi_screen/src/components/EquipmentRunStatus.vue
@@ -1,8 +1,9 @@
<template>
- <div class="box-container" id="echarts1"></div>
+ <!-- <img :src="require(`@/assets/images/huan.png`)" class="huan" /> -->
+ <div class="box-container quan" id="echarts1"></div>
</template>
-
- <script>
+
+<script>
let timer = null;
export default {
props: {
@@ -47,7 +48,7 @@
break;
}
});
- // console.log(val,data);
+ console.log("++++++", data);
// data = [
// { value: 2, name: "鐢熶骇" },
// { value: 3, name: "瀹屾垚" },
@@ -63,32 +64,35 @@
mounted() {
this.myChart = this.$echarts.init(document.getElementById("echarts1"));
this.option = {
- color: ["#00afb9", "#c3cbe4", "#2127ff", "#e0de00", "#c8003d"],
+ // #00ff99 #fffff0 #0a0d7f #ffcc00 #fe0000
+ color: ["#00ff99", "#fffff0", "#0a0d7f", "#ffcc00", "#fe0000"],
+
legend: {
orient: "vertical",
- top: "25%",
- right: "5%",
- itemGap: 7, //鍧椾箣闂寸殑闂磋窛
- itemHeight: 8, // 璁剧疆鍥句緥椤圭殑楂樺害
- itemWidth: 5, // 璁剧疆鍥句緥椤圭殑瀹藉害
+ top: "28%",
+ right: "12%",
+ itemGap: 12, //鍧椾箣闂寸殑闂磋窛
+ itemHeight: 9, // 璁剧疆鍥句緥椤圭殑楂樺害
+ itemWidth: 9, // 璁剧疆鍥句緥椤圭殑瀹藉害
data: ["鐢熶骇", "瀹屾垚", "寰呮満", "璀﹀憡", "鏁呴殰"],
textStyle: {
color: "#fff",
- fontSize: 8,
+ fontSize: 10,
},
- formatter: (name) =>{
- let res=this.option.series[0].data.filter(item=>item.name==name)
- return res.length>0?`${name}: ${res[0].value}鍙癭:name;
+ formatter: (name) => {
+ let res = this.option.series[0].data.filter(
+ (item) => item.name == name
+ );
+ return res.length > 0 ? `${name}: ${res[0].value}鍙癭 : name;
},
},
series: [
{
type: "pie",
- // radius: ["20%", "30%"],
- // center: ["33%", "50%"],
- radius: ["20%", "30%"],
- center: ["38%", "50%"],
- avoidLabelOverlap: false,
+ center: ["33%", "50%"],
+ radius: ["29%", "39%"],
+ padAngle: 5, //鐜笌鐜箣闂寸殑闂撮殭
+ // avoidLabelOverlap: false,
// left: "-30%",
// top: "10%",
label: {
@@ -96,6 +100,7 @@
formatter: `{d}%`,
color: "#fff",
fontSize: 11,
+ position: "outside",
},
labelLine: {
show: true,
@@ -106,15 +111,19 @@
borderRadius: 3,
borderColor: "transparent",
borderWidth: 10,
+ shadowColor: 'rgba(0, 0, 0, 0.5)', // 闃村奖棰滆壊
+ shadowBlur: 10, // 闃村奖妯＄硦绋嬪害
+ shadowOffsetX: 20, // 姘村钩闃村奖鍋忕Щ
+ shadowOffsetY: 20 // 鍨傜洿闃村奖鍋忕Щ
},
- // emphasis: {
- // label: {
- // show: false,
- // fontSize: "15",
- // color:'#fff',
- // fontWeight: "normal",
- // },
- // },
+ emphasis: {
+ label: {
+ show: false,
+ fontSize: "15",
+ color: "#fff",
+ fontWeight: "normal",
+ },
+ },
data: [],
},
],
@@ -186,14 +195,28 @@
},
};
</script>
-
- <style>
+
+<style>
#echarts1 {
width: 3.84rem;
- /* height:5.2rem; */
transform: scaleY(2);
}
-.box-container{
+.box-container {
position: relative;
}
-</style>
\ No newline at end of file
+
+.quan::after {
+ background-image: url("~@/assets/images/huan.png");
+ position: absolute;
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
+ content: "";
+ width: 56px;
+ height: 32px;
+ z-index: -1;
+ /* opacity: 0.5; */
+ top: 101px;
+ left: 73px;
+ transform: scaleY(2);
+}
+</style>
--
Gitblit v1.9.3