From 3fc7f383b437b6c579b625f83639c864b33b97fa Mon Sep 17 00:00:00 2001
From: cloudroam <cloudroam>
Date: 星期五, 15 十一月 2024 14:35:33 +0800
Subject: [PATCH] add:1版本
---
src/views/screen1/components/chart-itm.vue | 89 ++++++++++++++++++++++++++++++++++++++------
1 files changed, 76 insertions(+), 13 deletions(-)
diff --git a/src/views/screen1/components/chart-itm.vue b/src/views/screen1/components/chart-itm.vue
index b2509d5..b369457 100644
--- a/src/views/screen1/components/chart-itm.vue
+++ b/src/views/screen1/components/chart-itm.vue
@@ -7,11 +7,19 @@
</div>
<div class="flex1 flex tooltip">
<div class="chart-status-dot yellow"></div>
- <div class="chart-status-desc">>警告设备</div>
+ <div class="chart-status-desc">警告设备</div>
</div>
<div class="flex1 flex tooltip">
<div class="chart-status-dot red"></div>
<div class="chart-status-desc">异常设备</div>
+ </div>
+ <div class="flex1 flex tooltip">
+ <div class="chart-status-dot blue"></div>
+ <div class="chart-status-desc">从有到无</div>
+ </div>
+ <div class="flex1 flex tooltip">
+ <div class="chart-status-dot purple"></div>
+ <div class="chart-status-desc">从无到有</div>
</div>
</div>
<div class="sub-div"></div>
@@ -45,14 +53,16 @@
methods: {
initChart() {
var value = 0.56;
- var v1 = 0, v2 = 0, v3 = 0;
+ var v1 = 0, v2 = 0, v3 = 0,v4 = 0,v5 = 0;
for (var item of this.areas) {
- v1 += parseInt(item.areaStatic.normal || 0)
- v2 += parseInt(item.areaStatic.warn || 0)
- v3 += parseInt(item.areaStatic.alarm || 0)
+ v1 += parseInt(item.areaStatic.normal || 0);
+ v2 += parseInt(item.areaStatic.warn || 0);
+ v3 += parseInt(item.areaStatic.alarm || 0);
+ v4 += parseInt(item.areaStatic.beSomething || 0);
+ v5 += parseInt(item.areaStatic.beNothing || 0);
}
- this.total = v1 + v2 + v3
- // console.log('v1', v1, v2, v3)
+ this.total = v1 + v2 + v3 + v4 + v5
+ console.log('v1', v1, 'v2', v2, 'v3', v3, 'v4', v4, 'v5', v5);
this.option = {
tooltip: {
@@ -63,11 +73,12 @@
{
// name: 'Access From',
type: "pie",
- silent: "ture",
+ minAngle: 0, // 最小角度设置为0.01度
+ silent: true,
radius: ["55%", "68%"],
center: ["50%", "55%"],
// radius: "75%",
- avoidLabelOverlap: false,
+ avoidLabelOverlap: true,
itemStyle: {
borderRadius: 10,
borderColor: "#fff",
@@ -79,6 +90,11 @@
align: "left",
color: "rgba(108, 153, 190, 1)",
+ labelLine: {
+ show: true,
+ length: 5, // 引导线长度
+ length2: 10 // 第二段引导线长度
+ },
// rich: {
// time: {
// fontSize: 10,
@@ -95,7 +111,13 @@
fontWeight: "bold",
},
},
-
+ // data: [
+ // { value: v1, itemStyle: { normal: this.getGradient("rgba(150, 222, 194, 1)", "rgba(6, 188, 117, 1)") } },
+ // { value: v2, itemStyle: { normal: this.getGradient("rgba(236, 197, 13, 1)", "rgba(221, 175, 1, 1)") } },
+ // { value: v3, itemStyle: { normal: this.getGradient("rgba(249, 109, 0, 1)", "rgba(241, 76, 3, 1)") } },
+ // { value: v4, itemStyle: { normal: this.getGradient("rgba(249, 109, 0, 1)", "rgba(241, 76, 3, 1)") } },
+ // { value: v5, itemStyle: { normal: this.getGradient("rgba(128, 0, 128, 1)", "rgba(241, 76, 3, 1)") } }
+ // ]
data: [
{
value: v1,
@@ -134,7 +156,7 @@
},
},
{
- value: v3,
+ value: parseInt(v3),
// name: "异常连接数",
itemStyle: {
normal: {
@@ -142,6 +164,40 @@
{
offset: 1,
color: "rgba(249, 109, 0, 1)",
+ },
+ {
+ offset: 0,
+ color: "rgba(241, 76, 3, 1)",
+ },
+ ]),
+ },
+ },
+ },
+ {
+ value: parseInt(v4),
+ itemStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0.2, 1, 0.3, 0, [
+ {
+ offset: 1,
+ color: "rgba(52, 90, 255, 1)",
+ },
+ {
+ offset: 0,
+ color: "rgba(241, 76, 3, 1)",
+ },
+ ]),
+ },
+ },
+ },
+ {
+ value: parseInt(v5),
+ itemStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0.2, 1, 0.3, 0, [
+ {
+ offset: 1,
+ color: "rgba(128, 0, 128, 1)",
},
{
offset: 0,
@@ -175,13 +231,13 @@
position: relative;
.tooltips {
- width: 21rem;
+ width: 100%;
height: 2.25rem;
background: #e3edf8;
border-radius: 1.42rem;
position: absolute;
bottom: -3rem;
- left: calc((100% - 21rem) / 2);
+ //left: calc((100% - 21rem) / 2);
.tooltip {
margin: 0 auto;
@@ -208,6 +264,13 @@
background: rgba(223, 177, 2, 1);
}
+ .chart-status-dot.blue {
+ background: rgba(52, 90, 255, 1);
+ }
+
+ .chart-status-dot.purple {
+ background: rgba(128, 0, 128, 1);
+ }
.chart-status-desc {
font-size: 1rem;
font-family: PingFangSC-Regular, PingFang SC;
--
Gitblit v1.9.3