From aaee37fee2d23a57bfbca19dbd989b95a6728829 Mon Sep 17 00:00:00 2001 From: shijing Date: Mon, 21 Feb 2022 09:29:02 +0800 Subject: [PATCH] statisticsStyleChange --- .../views/statistics/materialStatistics.vue | 343 +++++++++++++----- .../views/statistics/progressStatistics.vue | 14 +- 2 files changed, 260 insertions(+), 97 deletions(-) diff --git a/hb_client/src/views/statistics/materialStatistics.vue b/hb_client/src/views/statistics/materialStatistics.vue index 80a9fc9..678a592 100644 --- a/hb_client/src/views/statistics/materialStatistics.vue +++ b/hb_client/src/views/statistics/materialStatistics.vue @@ -9,14 +9,21 @@
废料原因统计
-
+ + @@ -54,9 +61,9 @@
采购物料表
@@ -67,9 +74,9 @@
采购供应商表
@@ -109,9 +116,9 @@
废料来源
@@ -157,17 +164,21 @@ }, data() { return { + chartId0: 'chart0', chartId1: 'chart1', chartId2: 'chart2', chartId3: 'chart3', barChart: null, barChart1: null, pieOptions: {}, - barOptions: {}, + barOptions1: {}, + barOptions21: {}, + barOptions22: {}, + barOptions3: {}, activeName: '废料统计', chartsName: "chartsName", + domHeight:'300px', cdata: { - xData: ["气泡", "划痕"], seriesData: [ {value: 10, name: "气泡"}, {value: 5, name: "破点"}, @@ -175,11 +186,29 @@ {value: 6, name: "其他"}, ] }, - chartData: { + chartData1: { xAxisData: ["气泡", "破点", "划伤", "其他"], - seriesData: [10, 5, 19, 6], + seriesData: [30, 25, 35, 10], }, - xAxisbar: ["供应商1", "供应商2", "供应商3", "供应商4", "供应商5", "供应商6", "供应商7"], + chartData21: { + xAxisData: ["物料1", "物料2", "物料3", "物料4", "物料5", "物料6", "物料7"], + seriesData: [800, 950, 960, 906, 600, 800, 900], + }, + chartData22: { + xAxisData: ["供应商1", "供应商2", "供应商3", "供应商4", "供应商5", "供应商6", "供应商7"], + seriesData: [5, 20, 15, 25,10, 10,15], + }, + chartData3: { + xAxisData: ["供应商1", "供应商2", "供应商3", "供应商4", "供应商5", "供应商6", "供应商7"], + seriesData:[2, 2, 4, 5,1, 0,1], + }, + xAxisData1: ["气泡", "破点", "划伤", "其他"], + xAxisbar21: ["物料1", "物料2", "物料3", "物料4", "物料5", "物料6", "物料7"], + xAxisbar22: ["供应商1", "供应商2", "供应商3", "供应商4", "供应商5", "供应商6", "供应商7"], + xAxisbar3: ["供应商1", "供应商2", "供应商3", "供应商4", "供应商5", "供应商6", "供应商7"], + barData1: [30, 25, 35, 10], + barData21: [800, 950, 960, 906, 600, 800, 900], + barData22: [5, 20, 15, 25,10, 10,15], barData: [80, 95, 96, 96, 96, 98, 99], list: [ {id: 1, name: 'HIehd91', card: '3331', sco: 'REF-31', num: 2, reason: "气泡"}, @@ -233,87 +262,22 @@ immediate: true, deep: true }, + created(){ + let hei = document.getElementsByClassName('app-main')[0].clientHeight; + this.domHeight =( hei- 20)/2+'px'; + }, methods: { - drawChart() { - let that = this; - this.barChart = this.$echarts.init(document.getElementById('barChart')); - this.barChart.setOption({ - grid: { - top: '10%', - left: '3%', - right: '5%', - bottom: '1%', - containLabel: true - }, - tooltip: { - trigger: 'item', - formatter: function (params) { - let color = params.color;//图例颜色 - let htmlStr = '
'; - htmlStr += params.seriesName + '
'; - htmlStr += ''; - htmlStr += params.name + '：' + params.value + '件'; - htmlStr += '
'; - return htmlStr; - } - }, - xAxis: { - axisTick: { - show: false - }, - splitLine: { - show: false, //去掉X轴分割线 - }, - data: that.chartData.xAxisData, - }, - yAxis: { - axisLine: { - show: true,//y轴线 - }, - axisTick: { - show: false//Y轴刻度线 - }, - axisLabel: { - color: '#333333'//Y轴文本颜色 - }, - splitLine: { - show: true, //Y轴分割线 - lineStyle: { - color: '#dddddd'//Y轴分割线颜色 - } - }, - }, - series: [{ - name: '废料统计', - type: 'bar', - barWidth: 20, - data: that.chartData.seriesData, - label: { - show: true, //开启显示 - position: 'top', //在上方显示 - formatter: '{c}',//显示百分号 - textStyle: { //数值样式 - color: 'black',//字体颜色 - fontSize: 10//字体大小 - } - }, - itemStyle: { - color: '#409EFF' - }, - }] - }); - }, - handleClick(tab) { + handleClick() { // console.log(tab); // debugger; }, }, mounted() { - this.drawChart(); - this.barOptions = { + let that = this; + this.barOptions1 = { grid: { top: '10%', - left: '3%', + left: '5%', right: '5%', bottom: '1%', containLabel: true @@ -323,9 +287,9 @@ formatter: function (params) { let color = params.color;//图例颜色 let htmlStr = '
'; - htmlStr += params.name + '
'; + htmlStr += params.seriesName + '
'; htmlStr += ''; - htmlStr += params.seriesName + '：' + params.value + '%'; + htmlStr += params.name + '：' + params.value + '件'; htmlStr += '
'; return htmlStr; } @@ -337,7 +301,7 @@ splitLine: { show: false, //去掉X轴分割线 }, - data: this.xAxisbar, + data: that.chartData1.xAxisData, }, yAxis: { axisLine: { @@ -357,10 +321,10 @@ }, }, series: [{ - name: '成品率', + name: '废料统计', type: 'bar', barWidth: 20, - data: this.barData, + data: that.chartData1.seriesData, label: { show: true, //开启显示 position: 'top', //在上方显示 @@ -374,7 +338,202 @@ color: '#409EFF' }, }] - } + }; + this.barOptions21 = { + grid: { + top: '10%', + left: '5%', + right: '5%', + bottom: '1%', + containLabel: true + }, + tooltip: { + trigger: 'item', + formatter: function (params) { + let color = params.color;//图例颜色 + let htmlStr = '
'; + htmlStr += '物料采购' + '
'; + htmlStr += ''; + htmlStr += params.name + '：' + params.value + '件'; + htmlStr += '
'; + return htmlStr; + } + }, + xAxis: { + axisTick: { + show: false + }, + splitLine: { + show: false, //去掉X轴分割线 + }, + data: this.chartData21.xAxisData, + }, + yAxis: { + axisLine: { + show: true,//y轴线 + }, + axisTick: { + show: false//Y轴刻度线 + }, + axisLabel: { + color: '#333333'//Y轴文本颜色 + }, + splitLine: { + show: true, //Y轴分割线 + lineStyle: { + color: '#dddddd'//Y轴分割线颜色 + } + }, + }, + series: [{ + name: '物料', + type: 'bar', + barWidth: 20, + data: this.chartData21.seriesData, + label: { + show: true, //开启显示 + position: 'top', //在上方显示 + formatter: '{c}',//显示百分号 + textStyle: { //数值样式 + color: 'black',//字体颜色 + fontSize: 10//字体大小 + } + }, + itemStyle: { + color: '#409EFF' + }, + }] + }; + this.barOptions22 = { + grid: { + top: '10%', + left: '5%', + right: '5%', + bottom: '1%', + containLabel: true + }, + tooltip: { + trigger: 'item', + formatter: function (params) { + let color = params.color;//图例颜色 + let htmlStr = '
'; + htmlStr += params.seriesName + '
'; + htmlStr += ''; + htmlStr += params.name + '：' + params.value + '%'; + htmlStr += '
'; + return htmlStr; + } + }, + xAxis: { + axisTick: { + show: false + }, + splitLine: { + show: false, //去掉X轴分割线 + }, + data: this.chartData22.xAxisData, + }, + yAxis: { + axisLine: { + show: true,//y轴线 + }, + axisTick: { + show: false//Y轴刻度线 + }, + axisLabel: { + color: '#333333'//Y轴文本颜色 + }, + splitLine: { + show: true, //Y轴分割线 + lineStyle: { + color: '#dddddd'//Y轴分割线颜色 + } + }, + }, + series: [{ + name: '采购占比', + type: 'bar', + barWidth: 20, + data: this.chartData22.seriesData, + label: { + show: true, //开启显示 + position: 'top', //在上方显示 + formatter: '{c}',//显示百分号 + textStyle: { //数值样式 + color: 'black',//字体颜色 + fontSize: 10//字体大小 + } + }, + itemStyle: { + color: '#409EFF' + }, + }] + }; + this.barOptions3 = { + grid: { + top: '10%', + left: '5%', + right: '5%', + bottom: '1%', + containLabel: true + }, + tooltip: { + trigger: 'item', + formatter: function (params) { + let color = params.color;//图例颜色 + let htmlStr = '
'; + htmlStr += params.seriesName + '
'; + htmlStr += ''; + htmlStr += params.name + '：' + params.value + '件'; + htmlStr += '
'; + return htmlStr; + } + }, + xAxis: { + axisTick: { + show: false + }, + splitLine: { + show: false, //去掉X轴分割线 + }, + data: this.chartData3.xAxisData, + }, + yAxis: { + axisLine: { + show: true,//y轴线 + }, + axisTick: { + show: false//Y轴刻度线 + }, + axisLabel: { + color: '#333333'//Y轴文本颜色 + }, + splitLine: { + show: true, //Y轴分割线 + lineStyle: { + color: '#dddddd'//Y轴分割线颜色 + } + }, + }, + series: [{ + name: '废料来源', + type: 'bar', + barWidth: 20, + data: this.chartData3.seriesData, + label: { + show: true, //开启显示 + position: 'top', //在上方显示 + formatter: '{c}',//显示百分号 + textStyle: { //数值样式 + color: 'black',//字体颜色 + fontSize: 10//字体大小 + } + }, + itemStyle: { + color: '#409EFF' + }, + }] + }; } } diff --git a/hb_client/src/views/statistics/progressStatistics.vue b/hb_client/src/views/statistics/progressStatistics.vue index 0e5ee33..8afeeb4 100644 --- a/hb_client/src/views/statistics/progressStatistics.vue +++ b/hb_client/src/views/statistics/progressStatistics.vue @@ -7,7 +7,7 @@ @@ -18,7 +18,7 @@ :id="chartId1" :options="barOptions" :className="chartsName" - height="45vh" + :height="domHeight" width="100%" > @@ -31,7 +31,7 @@ :id="chartId2" :options="barOptions1" :className="chartsName" - height="45vh" + :height="domHeight" width="100%" > @@ -54,7 +54,6 @@ v-el-height-adaptive-table="{bottomOffset: 42}" > - @@ -64,7 +63,6 @@ - @@ -168,6 +166,7 @@ {value: 1, name: "逾期率"}, ] }, + domHeight:'300px', xAxisbar:["冷加工", "热弯", "钢化", "镀膜", "夹层", "包边", "装框"], barData: [80, 95, 96, 96, 96, 98, 99], xAxisbar1:[ "2021/09", "2021/10", "2021/11", "2021/12", "2022/01", "2022/02"], @@ -217,6 +216,10 @@ immediate: true, deep: true }, + created(){ + let hei = document.getElementsByClassName('app-main')[0].clientHeight; + this.domHeight =( hei- 60)/2+'px'; + }, methods: { getList() { this.orderLoading = true; @@ -378,6 +381,7 @@ }, }] } + } }