From 4981a40e2dd1ac177cdcdf29525f83f1d162f11d Mon Sep 17 00:00:00 2001
From: yangfeng <wanwan926_4@163.com>
Date: 星期六, 02 十二月 2023 14:55:59 +0800
Subject: [PATCH] 机器开机率和订单完成比率样式优化
---
src/views/cockpitPage/components/MachineStartupRate.vue | 48 ++++++++++++++++++++++++++++++------------------
1 files changed, 30 insertions(+), 18 deletions(-)
diff --git a/src/views/cockpitPage/components/MachineStartupRate.vue b/src/views/cockpitPage/components/MachineStartupRate.vue
index 9383322..5e66228 100644
--- a/src/views/cockpitPage/components/MachineStartupRate.vue
+++ b/src/views/cockpitPage/components/MachineStartupRate.vue
@@ -8,13 +8,6 @@
<span class="top-rate">{{ "60%" }}</span>
</div>
</div>
- <div class="machine-chart-bg">
- <img
- src="/cockpitPage/machine-chart-bg.png"
- alt=""
- style="width: 250px; height: 260px"
- />
- </div>
<div class="chart" ref="chart"></div>
</div>
</div>
@@ -43,12 +36,31 @@
pieChart(chartName, data) {
let chartDom = this.$refs[chartName];
let myChart = echarts.init(chartDom);
+ let img = "/cockpitPage/machine-chart-bg.png";
let option;
if (data) {
option = {
color: ["#065a6f", "#067687", "#00ffff"],
tooltip: {
trigger: "item",
+ },
+ graphic: {
+ elements: [
+ {
+ type: "image",
+ z: 5,
+ right: 25,
+ style: {
+ image: img,
+ width: 240,
+ height: 245,
+ opacity: 0.55,
+ },
+ left: "center",
+ top: "center",
+ position: [5, 5],
+ },
+ ],
},
series: [
{
@@ -60,7 +72,17 @@
color: "#01f7fd",
fontSize: 14,
formatter: function (params) {
- return params.name + params.value + "%";
+ return `{a|${params.name}} {b|${params.value + "%"}}`;
+ },
+ rich: {
+ a: {
+ color: "#00ffff",
+ fontSize: 14,
+ },
+ b: {
+ color: "#fccd1d",
+ fontSize: 14,
+ },
},
},
emphasis: {
@@ -121,16 +143,6 @@
color: #fec718;
}
}
- }
- .machine-chart-bg {
- width: 100%;
- height: 100%;
- text-align: center;
- position: absolute;
- left: 0;
- right: 0;
- margin: auto;
- opacity: 0.55;
}
.chart {
margin-top: 8px;
--
Gitblit v1.8.0