From 9484ab1d4a7cbae2b16a004b33be76f94277b772 Mon Sep 17 00:00:00 2001
From: yangfeng <wanwan926_4@163.com>
Date: 星期五, 08 十二月 2023 11:48:42 +0800
Subject: [PATCH] 优化
---
src/views/cockpitPage/components/MachineStartupRate.vue | 72 ++++++++++++++++++++++--------------
1 files changed, 44 insertions(+), 28 deletions(-)
diff --git a/src/views/cockpitPage/components/MachineStartupRate.vue b/src/views/cockpitPage/components/MachineStartupRate.vue
index e9eed89..dab4668 100644
--- a/src/views/cockpitPage/components/MachineStartupRate.vue
+++ b/src/views/cockpitPage/components/MachineStartupRate.vue
@@ -8,7 +8,7 @@
<span class="top-rate">{{ startupRate + "%" }}</span>
</div>
</div>
- <div class="chart" ref="chart"></div>
+ <div id="main" class="chart" ref="chart"></div>
</div>
</div>
</template>
@@ -16,6 +16,7 @@
<script>
//寮曞叆echart
import * as echarts from "echarts";
+let myChart;
export default {
components: {},
props: {
@@ -27,43 +28,49 @@
data() {
return {};
},
- mounted() {
- // let chartData = [
- // { value: 20, name: "闂茬疆" },
- // { value: 20, name: "缁翠慨" },
- // { value: 60, name: "宸ヤ綔" },
- // ];
- // this.pieChart("chart", chartData);
- },
+ mounted() {},
watch: {},
methods: {
//鍦ㄨ亴
pieChart(chartName, data) {
let chartDom = this.$refs[chartName];
- let myChart = echarts.init(chartDom);
+
+ if (myChart != null && myChart != "" && myChart != undefined) {
+ myChart.dispose(); //閿�姣�
+ }
+ myChart = echarts.init(chartDom);
let img = "/cockpitPage/machine-chart-bg.png";
+ let height = myChart.getHeight() / 1;
+ let width = height + 5;
let option;
if (data) {
option = {
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,
- right: 25,
+ // z: 5,
style: {
image: img,
- width: 240,
- height: 245,
+ width: width,
+ height: height,
opacity: 0.55,
},
left: "center",
top: "center",
- position: [5, 5],
+ position: [10, 10],
},
],
},
@@ -74,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,
+ },
},
},
},
--
Gitblit v1.8.0