From a14cc655ca8e97b8bfe1ffd4b26e73780fccbc4a Mon Sep 17 00:00:00 2001
From: yangfeng <wanwan926_4@163.com>
Date: 星期四, 07 十二月 2023 19:29:37 +0800
Subject: [PATCH] 样式优化
---
src/views/cockpitPage/components/MachineStartupRate.vue | 61 ++++++++++++++++--------------
1 files changed, 32 insertions(+), 29 deletions(-)
diff --git a/src/views/cockpitPage/components/MachineStartupRate.vue b/src/views/cockpitPage/components/MachineStartupRate.vue
index 8af3e2f..dab4668 100644
--- a/src/views/cockpitPage/components/MachineStartupRate.vue
+++ b/src/views/cockpitPage/components/MachineStartupRate.vue
@@ -48,12 +48,20 @@
color: ["#065a6f", "#067687", "#00ffff"],
tooltip: {
trigger: "item",
+ textStyle: {
+ color: "#00FFFF",
+ },
+ borderColor: "#00FFFF",
+ backgroundColor: "#238d8d6b",
+ valueFormatter: function (value) {
+ return value + "%";
+ },
},
graphic: {
elements: [
{
type: "image",
- z: 5,
+ // z: 5,
style: {
image: img,
width: width,
@@ -62,7 +70,7 @@
},
left: "center",
top: "center",
- position: [5, 5],
+ position: [10, 10],
},
],
},
@@ -73,20 +81,29 @@
radius: ["58%", "70%"],
avoidLabelOverlap: false,
label: {
- color: "#01f7fd",
- fontSize: 14,
- padding: [0, -60],
- formatter: function (params) {
- return `{a|${params.name}} {b|${params.value + "%"}}`;
- },
- rich: {
- a: {
- color: "#00ffff",
- fontSize: 14,
+ normal: {
+ position: "outer",
+ padding: [0, -62],
+ color: "#01f7fd",
+ fontSize: 12,
+ borderWidth: 5,
+ borderRadius: 4,
+ formatter: function (params) {
+ let label =
+ params.name.length > 4
+ ? `${params.name.slice(0, 3)}...`
+ : params.name;
+ return `{a|${label}} {b|${params.value + "%"}}`;
},
- b: {
- color: "#fccd1d",
- fontSize: 14,
+ rich: {
+ a: {
+ color: "#00ffff",
+ fontSize: 14,
+ },
+ b: {
+ color: "#fccd1d",
+ fontSize: 14,
+ },
},
},
},
@@ -113,20 +130,6 @@
};
option && myChart.setOption(option);
- // window.addEventListener("resize", function () {
- // // var chart = echarts.getInstanceByDom(document.getElementById("main"));
- // let width = myChart.getWidth();
- // let height = myChart.getHeight();
- // console.log(width, height, "sssssssssss");
- // let logo = myChart.getOption().graphic[0].elements[0];
- // console.log(logo, "fffff");
- // logo.style.width = width / 2;
- // logo.style.height = height / 2;
- // myChart.setOption({
- // graphic: [logo],
- // });
- // myChart.resize();
- // });
} else {
option = {};
myChart.setOption(option, true);
--
Gitblit v1.8.0