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/ProdlineHealthy.vue | 124 +++++++++++++++++++++++------------------
1 files changed, 70 insertions(+), 54 deletions(-)
diff --git a/yiqi_screen/src/components/ProdlineHealthy.vue b/yiqi_screen/src/components/ProdlineHealthy.vue
index 5459b18..a1768fe 100644
--- a/yiqi_screen/src/components/ProdlineHealthy.vue
+++ b/yiqi_screen/src/components/ProdlineHealthy.vue
@@ -1,8 +1,8 @@
<template>
<div class="box-container" id="echarts2"></div>
</template>
-
- <script>
+
+<script>
let timer = null;
export default {
data() {
@@ -17,34 +17,38 @@
this.option = {
legend: {
orient: "vertical",
- bottom: '30%',
- right: '6%',
- textStyle:{
- color:'#fff'
- },
- itemHeight: 5, // 璁剧疆鍥句緥椤圭殑楂樺害
- itemWidth: 5, // 璁剧疆鍥句緥椤圭殑瀹藉害
+ bottom: "20%",
+ right: "6%",
+
+ itemGap: 8, //鍧椾箣闂寸殑闂磋窛
+ itemHeight: 9, // 璁剧疆鍥句緥椤圭殑楂樺害
+ itemWidth: 9, // 璁剧疆鍥句緥椤圭殑瀹藉害
data: [
- {
- name: "瀹為檯",
- itemStyle: {
- color: "#fff",
- },
- },
{
name: "鐩爣",
itemStyle: {
- color: "#01afba",
+ color: "#f2f45b",
+ },
+ textStyle: {
+ color: "#f2f45b", //榛勮壊
+ fontSize: 10,
},
},
-
+ {
+ name: "瀹為檯",
+ itemStyle: {
+ color: "#1fe9dc",
+ },
+ textStyle: {
+ color: "#1fe9dc",
+ fontSize: 10,
+ },
+ },
],
},
radar: {
- // center:['43%','55%'],
- center: ["33%", "50%"],
- // radius:'65%',
- radius:'30%',
+ center: ["40%", "55%"], // 鏇存敼涓烘洿灏忕殑鐧惧垎姣斾互寰�涓棿绉诲姩
+ radius: "40%",
indicator: [
{ name: "浜�", max: 100, color: "#fff" },
{ name: "鐜�", max: 100, color: "#fff" },
@@ -52,19 +56,20 @@
{ name: "鏂�", max: 100, color: "#fff" },
{ name: "鏈�", max: 100, color: "#fff" },
],
- splitNumber: 0,
+
+ // splitNumber: 0,
axisLine: {
show: false,
},
- axisName:{
- padding:-10
- }
+ axisName: {
+ padding: -10,
+ },
- // splitArea:{
- // areaStyle:{
- // color:'#fff'
- // }
- // }
+ splitArea: {
+ areaStyle: {
+ color: "rgba(131, 163, 178, 0.8)",
+ },
+ },
},
series: [
{
@@ -72,25 +77,29 @@
type: "radar",
data: [
{
- value: [90, 90, 90, 90, 90],
name: "瀹為檯",
- lineStyle: {
- color: "#fff",
- opacity: 0,
- },
+ value: [90, 80, 80, 80, 80],
areaStyle: {
- color: "#fff",
+ color: {
+ type: "linear-gradient",
+ x: 0,
+ y: 0,
+ x2: 1,
+ y2: 1,
+ colorStops: [
+ { offset: 0, color: "#b2f2bb" }, // 娓愬彉寮�濮嬮鑹�
+ { offset: 1, color: "#a0e6a0" }, // 娓愬彉缁撴潫棰滆壊
+ ],
+ },
+ opacity: 0.9,
},
},
{
- value: [100, 100, 100, 100, 100],
name: "鐩爣",
- lineStyle: {
- color: "#01afba",
- opacity: 0,
- },
+ value: [90, 80, 80, 80, 80],
areaStyle: {
- color: "#01afba",
+ color: "#6ee6db",
+ opacity: 0.3,
},
},
],
@@ -99,10 +108,10 @@
],
};
this.myChart.setOption(this.option);
- const that=this
- window.addEventListener('resize',()=>{
+ const that = this;
+ window.addEventListener("resize", () => {
that.myChart.resize();
- })
+ });
// this.defineEvent();
// this.selectPie();
// timer = setInterval(this.selectPie, 1500);
@@ -130,7 +139,7 @@
type: "highlight",
seriesIndex: 0,
dataIndex: this.currentIndex,
- })
+ });
},
// 榧犳爣瑙︽懜杞挱鎮仠浜嬩欢
@@ -165,12 +174,19 @@
},
};
</script>
-
- <style>
- #echarts2 {
+
+<style>
+#echarts2 {
+ margin-top: 0.1rem;
+ width: 100%;
+ height: 2.5rem;
+ transform: scaleY(2);
+
+ /*
+ margin-top: .4rem;
width: 2.89rem;
- height: 2.6rem;
- transform: scaleY(2);
- /* border: 1px solid red; */
- }
-</style>
\ No newline at end of file
+ height: 2.0rem;
+ transform: scaleY(2); */
+ /* border: 1px solid red; */
+}
+</style>
--
Gitblit v1.9.3