From 62ec1f19c3444695e21f1fe97472261ce3082075 Mon Sep 17 00:00:00 2001
From: liuying <1427574514@qq.com>
Date: 周一, 11 11月 2024 13:39:59 +0800
Subject: [PATCH] 大屏
---
yiqi_screen/src/components/EquipmentRunStatus.vue | 88 +++++++++++++++++++++++++++-----------------
1 files changed, 54 insertions(+), 34 deletions(-)
diff --git a/yiqi_screen/src/components/EquipmentRunStatus.vue b/yiqi_screen/src/components/EquipmentRunStatus.vue
index 96504ee..1feb910 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,39 +64,40 @@
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: 5, //鍧椾箣闂寸殑闂磋窛
- itemHeight: 5, // 璁剧疆鍥句緥椤圭殑楂樺害
- 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: ["33%", "50%"],
- avoidLabelOverlap: false,
- // left: "-30%",
- // top: "10%",
+ radius: ["30%", "37%"],
+ padAngle: 5, //鐜笌鐜箣闂寸殑闂撮殭
label: {
show: true,
formatter: `{d}%`,
- color: "#fff",
+ // color: "#fff",
fontSize: 11,
+ position: "outside",
+ color: "inherit", //缁ф壙涓婇潰鐨勯鑹�
},
labelLine: {
show: true,
@@ -106,15 +108,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 +192,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: 29px;
+ z-index: -1;
+ /* opacity: 0.5; */
+ top: 103px;
+ left: 73px;
+ transform: scaleY(2);
+}
+</style>
--
Gitblit v1.9.3