From 14101bd42ce17dfb9d951d0738abe9d303fb3fe5 Mon Sep 17 00:00:00 2001 From: yangfeng <wanwan926_4@163.com> Date: 星期一, 11 十二月 2023 10:41:39 +0800 Subject: [PATCH] 机器开机率、人员技能比饼图优化 --- src/views/cockpitPage/components/DeviceChart.vue | 53 +++++++++++++++++++++++++++++++++++++++++++---------- 1 files changed, 43 insertions(+), 10 deletions(-) diff --git a/src/views/cockpitPage/components/DeviceChart.vue b/src/views/cockpitPage/components/DeviceChart.vue index f4ea752..a39f3d6 100644 --- a/src/views/cockpitPage/components/DeviceChart.vue +++ b/src/views/cockpitPage/components/DeviceChart.vue @@ -57,19 +57,28 @@ myChart = echarts.init(chartDom); let option; let lineColor = "#35ddc74d"; + let spirit = "/cockpitPage/order-bg.png"; if (data) { option = { - color: ["#00FFFF", "#dcb018"], + color: ["#00FFFF", "#fccd1d"], tooltip: { trigger: "axis", axisPointer: { type: "none", }, + textStyle: { + color: "#00FFFF", + }, + borderColor: "#00FFFF", + backgroundColor: "#238d8d6b", + valueFormatter: function (value) { + return value + "%"; + }, }, grid: { right: "80px", bottom: "60px", - left: "60px", + left: "70px", top: "30px", }, dataZoom: [ @@ -79,6 +88,9 @@ show: false, startValue: that.startValue, // 浠庡ご寮�濮� endValue: that.endValue, // 涓�娆℃�у睍绀哄嚑涓� + zoomOnMouseWheel: false, + moveOnMouseWheel: true, + moveOnMouseMove: true, }, ], legend: { @@ -104,9 +116,10 @@ // rotate:45, margin: 10, show: true, + fontSize: 12, textStyle: { color: function (params, index) { - let colorList = ["#dcb018", "#00FFFF"]; + let colorList = ["#fccd1d", "#00FFFF"]; if (index % 2 == 0) { return colorList[0]; } else { @@ -115,7 +128,7 @@ }, }, formatter: function (value) { - if (value.length > 6) { + if (value.length > 5) { return `${value.slice(0, 4)}...`; } return value; @@ -153,31 +166,51 @@ axisTick: { show: false, }, - axisLabel: { textStyle: { color: "#00FFFF", }, - formatter: "{value}%", + formatter: function (value) { + return `${value}%`; + }, }, }, ], series: [ { - type: "bar", + type: "pictorialBar", name: "", - barWidth: "15", + symbol: spirit, + symbolRepeat: true, + symbolMargin: "25%", + symbolClip: true, + symbolSize: [4, 11], + barCategoryGap: "40%", label: { show: true, position: "right", - color: "#00FFFF", + formatter: function (params) { + if (params.dataIndex % 2 == 0) { + return `{a|${params.value}%}`; + } else { + return `{b|${params.value}%}`; + } + }, + rich: { + a: { + color: "#00FFFF", + }, + b: { + color: "#fccd1d", + }, + }, }, itemStyle: { normal: { //鏌卞舰鍥惧渾瑙掞紝鍒濆鍖栨晥鏋� barBorderRadius: [4, 4, 0, 0], color: function (params) { - let colorList = ["#dcb018", "#00FFFF"]; + let colorList = ["#fccd1d", "#00FFFF"]; if (params.dataIndex % 2 == 0) { return colorList[0]; } else { -- Gitblit v1.8.0