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/ProdlineHealthy.vue | 118 +++++++++++++++++++++++++++++++++++-----------------------
1 files changed, 71 insertions(+), 47 deletions(-)
diff --git a/yiqi_screen/src/components/ProdlineHealthy.vue b/yiqi_screen/src/components/ProdlineHealthy.vue
index f40bab0..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,32 +17,38 @@
this.option = {
legend: {
orient: "vertical",
- bottom: '10%',
- 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%'],
- radius:'65%',
+ center: ["40%", "55%"], // 鏇存敼涓烘洿灏忕殑鐧惧垎姣斾互寰�涓棿绉诲姩
+ radius: "40%",
indicator: [
{ name: "浜�", max: 100, color: "#fff" },
{ name: "鐜�", max: 100, color: "#fff" },
@@ -50,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: [
{
@@ -70,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,
},
},
],
@@ -97,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);
@@ -128,7 +139,7 @@
type: "highlight",
seriesIndex: 0,
dataIndex: this.currentIndex,
- })
+ });
},
// 榧犳爣瑙︽懜杞挱鎮仠浜嬩欢
@@ -163,6 +174,19 @@
},
};
</script>
-
- <style>
-</style>
\ No newline at end of file
+
+<style>
+#echarts2 {
+ margin-top: 0.1rem;
+ width: 100%;
+ height: 2.5rem;
+ transform: scaleY(2);
+
+ /*
+ margin-top: .4rem;
+ width: 2.89rem;
+ height: 2.0rem;
+ transform: scaleY(2); */
+ /* border: 1px solid red; */
+}
+</style>
--
Gitblit v1.9.3