From d372f82db7bf15ed38f8faf2e6b90080f9343c04 Mon Sep 17 00:00:00 2001 From: yangfeng <wanwan926_4@163.com> Date: 星期三, 06 十二月 2023 09:48:18 +0800 Subject: [PATCH] 显示字数修改 --- src/views/cockpitPage/components/MachineStartupRate.vue | 33 +++++++++++++++++++++------------ 1 files changed, 21 insertions(+), 12 deletions(-) diff --git a/src/views/cockpitPage/components/MachineStartupRate.vue b/src/views/cockpitPage/components/MachineStartupRate.vue index 5e66228..0daa82e 100644 --- a/src/views/cockpitPage/components/MachineStartupRate.vue +++ b/src/views/cockpitPage/components/MachineStartupRate.vue @@ -5,7 +5,7 @@ <img src="/cockpitPage/machine-top.png" alt="" /> <div class="top-title"> <span>鏈哄櫒寮�鏈虹巼</span> - <span class="top-rate">{{ "60%" }}</span> + <span class="top-rate">{{ startupRate + "%" }}</span> </div> </div> <div class="chart" ref="chart"></div> @@ -16,26 +16,29 @@ <script> //寮曞叆echart import * as echarts from "echarts"; +let myChart; export default { components: {}, - props: {}, + props: { + startupRate: { + type: String, + default: "", + }, + }, 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 option; if (data) { @@ -71,6 +74,7 @@ label: { color: "#01f7fd", fontSize: 14, + padding: [0, -60], formatter: function (params) { return `{a|${params.name}} {b|${params.value + "%"}}`; }, @@ -94,8 +98,13 @@ }, labelLine: { show: true, - length: 50, + length: 40, color: "blue", + length2: 70, + }, + labelLayout: { + verticalAlign: "bottom", + dy: -5, }, data: data, }, -- Gitblit v1.8.0