From d2e39751340a765f9f9cf06d655fde85d2eb989f Mon Sep 17 00:00:00 2001 From: "LAPTOP-R6EHHS26\\86155" <2217640373@qq.com> Date: Fri, 19 Apr 2024 16:38:59 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=8C=85=E8=A3=85=E7=BA=BF?= =?UTF-8?q?=E6=9D=A1=E7=9C=8B=E6=9D=BF=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/kanban/Packagingline/index2.vue | 140 +++++++++++++++++++++- 1 file changed, 139 insertions(+), 1 deletion(-) diff --git a/src/views/kanban/Packagingline/index2.vue b/src/views/kanban/Packagingline/index2.vue index 9a4f90b..0402e0f 100644 --- a/src/views/kanban/Packagingline/index2.vue +++ b/src/views/kanban/Packagingline/index2.vue @@ -463,7 +463,7 @@ export default { }); _this.initChart2(); }else{ - _this.initChart2(); + _this.initChart3(); } } @@ -839,6 +839,144 @@ export default { }; myChart5.setOption(option5); }, + initChart3() { + const _this = this; + var data5 = this.piedata; + console.log(data5); + var myChart5 = echarts.init(document.querySelector("#echart5")); + + var option5 = { + tooltip: { + trigger: "item", + formatter: "{a}
{b}: {c} ({d}%)", + }, + color: ["#00E7E5", "#1DBEFF"], + legend: { + left: "left", + orient: "vertical", + bottom: 10, + textStyle: { + color: "black", + padding: [5, 5, 5, -50], + fontWeight: 600, + }, + itemWidth: 50, + itemHeight: 22, + }, + series: [ + { + radius: 120, + name: "巡检", + type: "pie", + labelLine: { + length: 40, + length2: 85, + }, + itemStyle: { + borderWidth: 1, + shadowBlur: 20, + shadowOffsetY: 5, + }, + center: ["50%", "55%"], + avoidLabelOverlap: true, + + data: [ + { + value: + data5[0] && data5[0].name == "合格" ? data5[0].value : 0, + name: + data5[0] && data5[0].name == "合格" ? data5[0].name : "合格", + selected: true, + itemStyle: { + color: "#129E92", + borderColor: "#3FFFE2", + shadowColor: "rgba(63, 255, 226, 0.5)", + }, + labelLine: { + lineStyle: { + color: "#00EAE8", + }, + }, + label: { + formatter: "{e|}\n{a|}{b|{c}%}{c|}", + rich: { + a: { + padding: -33, + }, + c: { + padding: [5, 0], + lineHeight: 60, + verticalAlign: "top", + backgroundColor: "#00EAE8", + }, + b: { + color: "#00E7E5", + backgroundColor: "rgba(63, 255, 226, 0.2)", + height: 19, + width: 40, + borderRadius: 0, + padding: [5, 25], + verticalAlign: "top", + }, + e: { + padding: -10, + }, + }, + }, + }, + { + value: + data5[1] && data5[1].name == "不合格" ? data5[1].value : 0, + name: + data5[1] && data5[1].name == "不合格" + ? data5[1].name + : "不合格", + itemStyle: { + color: "#105BA4", + borderColor: "#31B4FF", + shadowColor: "rgba(49, 180, 255, 0.8)", + }, + labelLine: { + lineStyle: { + color: "#07D2FF", + }, + }, + label: { + + formatter: "{e|}\n{c|}{b|{c}%}{a|}", + rich: { + c: { + + padding: [5, 0], + lineHeight: 60, + verticalAlign: "top", + backgroundColor: "#07D2FF", + }, + a: { + padding: -33, + }, + b: { + color: "#1DBEFF", + backgroundColor: "rgba(49, 180, 255, 0.2)", + height: 19, + width: 20, + borderRadius: 0, + padding: [5, 25], + align: "right", + verticalAlign: "top", + }, + e: { + padding: -10, + }, + }, + }, + }, + ], + }, + ], + }; + myChart5.setOption(option5); + }, //左侧第一个选择类型下拉框 回调函数 }, };