From d89eb46f58be6be58df1bd60484355c7fe54ebaf Mon Sep 17 00:00:00 2001 From: lb Date: Fri, 18 Nov 2022 10:05:57 +0800 Subject: [PATCH] =?UTF-8?q?update=20=E8=B4=A8=E9=87=8F=E7=AE=A1=E7=90=86?= =?UTF-8?q?=EF=BC=8C=E4=BA=A7=E7=BA=BF=E7=BC=BA=E9=99=B7=E6=97=A5=E5=AF=B9?= =?UTF-8?q?=E6=AF=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/QualityManager/HomePage.vue | 54 ++-- .../components/charts/newBar.vue | 242 ++++++++++++------ .../components/charts/newLineStack.vue | 2 +- 3 files changed, 195 insertions(+), 103 deletions(-) diff --git a/src/views/QualityManager/HomePage.vue b/src/views/QualityManager/HomePage.vue index baee30f..36a858e 100644 --- a/src/views/QualityManager/HomePage.vue +++ b/src/views/QualityManager/HomePage.vue @@ -41,39 +41,35 @@
- 缺陷分类分析 - + 产线缺陷日对比 +
+ +
- 工序缺陷分析 + 产线缺陷月对比 @@ -46,19 +46,19 @@ export default { bindClass() { return { 'fault-category-chart': this.chartName === 'fault-category', - 'process-fault-chart': this.chartName === 'process-fault' + 'process-fault-chart': this.chartName === 'process-fault', + 'realtime-production-cost-chart': this.chartName === 'realtime-cost-production' } } }, mounted() { if (this.dataList.length > 1) { - const barWidth = 400 / 2 / this.dataList[0].data.length this.series = [ { // 柱体 name: this.dataList[0].name, type: 'bar', - barWidth, + barWidth: 20, itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: this.dataList[0].topColor }, @@ -71,23 +71,40 @@ export default { // 柱顶 name: this.dataList[0].name, type: 'pictorialBar', - barWidth, - symbol: 'diamond', + barWidth: 20, + symbol: 'circle', symbolPosition: 'end', - symbolOffset: [0, '-50%'], - symbolSize: [30, 12], + symbolOffset: ['-70%', '-50%'], + symbolSize: [20, 6], zlevel: 2, - itemStyle: { color: this.dataList[0].topColor }, - data: this.dataList[0].data + itemStyle: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { offset: 0, color: 'rgba(59, 76, 118, 0)' }, + { offset: 1, color: '#2c6e7d' } + ]) + }, + data: this.dataList[0].data, + label: { + color: + this.chartName === 'process-fault' + ? 'rgba(119, 255, 242, 1)' + : this.chartName === 'fault-category' + ? '#31a2ff' + : '#fff9', + show: true, + offset: [-12, 10], + position: 'top', + vertialAlign: 'bottom' + } }, { // 柱底 name: this.dataList[0].name, type: 'pictorialBar', - barWidth, - symbol: 'diamond', - symbolOffset: [0, '50%'], - symbolSize: [30, 15], + barWidth: 20, + symbol: 'circle', + symbolOffset: ['-62%', '50%'], + symbolSize: [20, 6], itemStyle: { color: this.dataList[0].bottomColor }, data: this.dataList[0].data }, @@ -95,7 +112,7 @@ export default { // 柱体 name: this.dataList[1].name, type: 'bar', - barWidth, + barWidth: 20, itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: this.dataList[1].topColor }, @@ -108,35 +125,51 @@ export default { // 柱顶 name: this.dataList[1].name, type: 'pictorialBar', - barWidth, - symbol: 'diamond', + barWidth: 20, + symbol: 'circle', symbolPosition: 'end', - symbolOffset: [0, '-50%'], - symbolSize: [30, 12], + symbolOffset: ['66%', '-50%'], + symbolSize: [20, 6], zlevel: 2, - itemStyle: { color: this.dataList[1].topColor }, - data: this.dataList[1].data + itemStyle: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { offset: 0, color: this.dataList[1].topColor }, + { offset: 1, color: this.dataList[1].bottomColor } + ]) + }, + data: this.dataList[1].data, + label: { + color: + this.chartName === 'process-fault' + ? 'rgba(119, 255, 242, 1)' + : this.chartName === 'fault-category' + ? '#31a2ff' + : '#fff9', + show: true, + offset: [12, 10], + position: 'top', + vertialAlign: 'bottom' + } }, { // 柱底 name: this.dataList[1].name, type: 'pictorialBar', - barWidth, - symbol: 'diamond', - symbolOffset: [0, '50%'], - symbolSize: [30, 15], - itemStyle: { color: this.dataList[1].topColor }, + barWidth: 20, + symbol: 'circle', + symbolOffset: ['66%', '50%'], + symbolSize: [20, 6], + itemStyle: { color: this.dataList[1].bottomColor }, data: this.dataList[1].data } ] } else { - const barWidth = 320 / 2 / this.dataList[0].data.length + const barWidth = 400 / 2 / this.dataList[0].data.length this.series = [ { // 柱体 name: this.dataList[0].name, type: 'bar', - // barWidth: 26, barWidth: barWidth, itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ @@ -157,7 +190,6 @@ export default { // 柱顶 name: this.dataList[0].name, type: 'pictorialBar', - // barWidth: 26, barWidth: barWidth, symbol: 'circle', symbolPosition: 'end', @@ -167,11 +199,16 @@ export default { itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: 'rgba(59, 76, 118, 0)' }, - { offset: 1, color: this.dataList[0].bottomColor } + { offset: 1, color: '#2c6e7d' } ]) }, label: { - color: this.chartName === 'process-fault' ? 'rgba(119, 255, 242, 1)' : '#31a2ff', + color: + this.chartName === 'process-fault' + ? 'rgba(119, 255, 242, 1)' + : this.chartName === 'fault-category' + ? '#31a2ff' + : '#fff9', show: true, offset: [0, 10], position: 'top', @@ -183,12 +220,11 @@ export default { // 柱底 name: this.dataList[0].name, type: 'pictorialBar', - // barWidth: 26, barWidth: barWidth, symbol: 'circle', symbolOffset: [0, '50%'], symbolSize: [barWidth, 6], - itemStyle: { color: this.dataList[0].bottomColor + '9f' }, + itemStyle: { color: '#2c6e7d' }, data: this.dataList[0].data } ] @@ -210,12 +246,22 @@ export default { this.chart = echarts.init(this.$refs.chartContainer) this.chart.setOption({ grid: { - top: 10, - left: '2%', - right: '2%', - bottom: '3%', + top: '24%', + left: '8%', + right: '5%', + bottom: '5%', containLabel: true }, + legend: { + itemWidth: 8, + itemHeight: 8, + top: '7%', + right: '2%', + textStyle: { + color: '#fff9', + fontSize: 10 + } + }, xAxis: { type: 'category', axisLine: { @@ -225,40 +271,77 @@ export default { show: false }, axisLabel: { + margin: 16, textStyle: { fontSize: this.xlabelFontSize, color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色 }, - margin: 20, rotate: this.xlabelRotate }, data: this.nameList }, - yAxis: { - axisLine: { - lineStyle: { - type: 'solid', - color: this.dataList[0].bottomColor, - // color: 'rgba(119, 255, 242, 0.6)', // 左边线的颜色 - width: '1' // 坐标线的宽度 - } - }, - axisTick: { - show: false - }, - axisLabel: { - textStyle: { - color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色 - } - }, - splitLine: { - lineStyle: { - type: 'dotted', - color: 'rgba(119, 255, 242, 0.2)' - } - }, - type: 'value' - }, + yAxis: [ + { + name: '单位:片', + nameTextStyle: { align: 'right', fontSize: 9, color: '#fff9' }, + type: 'value', + splitNumber: 3, + axisTick: { show: false }, + onZero: true, + position: 'left', + offset: 10, + axisLine: { + lineStyle: { + type: 'solid', + color: this.dataList[0].bottomColor, + // color: 'rgba(119, 255, 242, 0.6)', // 左边线的颜色 + width: '1' // 坐标线的宽度 + } + }, + axisLabel: { + textStyle: { + color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色 + } + }, + splitLine: { + lineStyle: { + type: 'dotted', + color: 'rgba(119, 255, 242, 0.2)' + } + }, + type: 'value' + } + // { + // name: '能耗kw/h', + // nameTextStyle: { align: 'right', fontSize: 9, color: '#fff9' }, + // type: 'value', + // splitNumber: 3, + // axisTick: { show: false }, + // onZero: true, + // position: 'left', + // offset: 48, + // axisLine: { + // lineStyle: { + // type: 'solid', + // color: this.dataList[1].bottomColor, + // width: '1' // 坐标线的宽度 + // } + // }, + // axisLabel: { + // textStyle: { + // color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色 + // } + // }, + // splitLine: { + // show: false + // // lineStyle: { + // // type: 'dotted', + // // color: 'rgba(119, 255, 242, 0.2)' + // // } + // }, + // type: 'value' + // } + ], series: this.series }) } @@ -276,27 +359,40 @@ export default { /* .fault-category-chart::before { */ content: ''; position: absolute; - bottom: calc(36px * var(--beilv)); - /* top: 63%; */ + /* bottom: calc(100vh/1920 * 80); + left: calc(100vw/1920 * 48); */ + /* bottom: calc(10% + 100vh/1920 * 28); */ + bottom: 25px; left: 9%; - height: calc(32px * var(--beilv)); + height: 52px; width: 90%; background: linear-gradient(to top, #31a2ff6d, transparent); - transform: skew(-35deg); + transform: skew(-45deg); z-index: 0; } .process-fault-chart >>> div::before { /* .process-fault-chart::before { */ content: ''; position: absolute; - top: 65%; - left: 8%; - height: calc(32px * var(--beilv)); - /* bottom: calc(20px * var(--beilv)); - left: calc(36px * var(--beilv)); - height: calc(32px * var(--beilv)); */ + bottom: 26px; + left: 10%; + height: 48px; width: 90%; background: linear-gradient(to top, #49fbd789, transparent); + transform: skew(-45deg); + z-index: 0; +} +.realtime-production-cost-chart >>> div::before { + /* .fault-category-chart::before { */ + content: ''; + position: absolute; + bottom: 12%; + left: 6%; + height: 30px; + width: 90%; + border-radius: 3px; + /* border: 1px solid #49fbd7; */ + background: linear-gradient(to top, #49fbd789 5%, transparent); transform: skew(-35deg); z-index: 0; } diff --git a/src/views/QualityManager/components/charts/newLineStack.vue b/src/views/QualityManager/components/charts/newLineStack.vue index aecb704..6bc8865 100644 --- a/src/views/QualityManager/components/charts/newLineStack.vue +++ b/src/views/QualityManager/components/charts/newLineStack.vue @@ -31,7 +31,7 @@ export default { } }, grid: { - top: '15%', + top: '18%', left: '2%', right: '2%', bottom: '2%',