statisticsStyleChange

hb_client/src/views/statistics/materialStatistics.vue

@@ -9,14 +9,21 @@
               <Echart
                 :options="pieOptions"
                 id="pieChart"
-                height="45vh"
+                :height="domHeight"
               ></Echart>
             </el-card>
           </el-col>
           <el-col :span="16">
             <el-card>
               <div class="chartsTitle">废料原因统计</div>
-              <div id="barChart" style="width:100%;height: 45vh"></div>
+              <charts
+                :id="chartId0"
+                :options="barOptions1"
+                :className="chartsName"
+                :height="domHeight"
+                width="600px"
+              >
+              </charts>
             </el-card>
           </el-col>
         </el-row>
@@ -54,9 +61,9 @@
               <div class="chartsTitle">采购物料表</div>
               <charts
                 :id="chartId1"
-                :options="barOptions"
+                :options="barOptions21"
                 :className="chartsName"
-                height="45vh"
+                :height="domHeight"
                 width="600px"
               >
               </charts>
@@ -67,9 +74,9 @@
               <div class="chartsTitle">采购供应商表</div>
               <charts
                 :id="chartId2"
-                :options="barOptions"
+                :options="barOptions22"
                 :className="chartsName"
-                height="45vh"
+                :height="domHeight"
                 width="600px"
               >
               </charts>
@@ -109,9 +116,9 @@
             <div class="chartsTitle">废料来源</div>
             <charts
               :id="chartId3"
-              :options="barOptions"
+              :options="barOptions3"
               :className="chartsName"
-              height="45vh"
+              :height="domHeight"
             >
             </charts>
           </el-card>
@@ -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() {
+      handleClick() {
-        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 = '<div>';
-              htmlStr += params.seriesName + '<br/>';
-              htmlStr += '<span style="height:10px;width:10px;font-size:12px;border-radius:5px;margin-right:5px;font-family:Consolas;display:inline-block;background:' + color + ';"></span>';
-              htmlStr += params.name + '：' + params.value + '件';
-              htmlStr += '</div>';
-              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) {
         // console.log(tab);
         // debugger;
       },
     },
     mounted() {
-      this.drawChart();
+      let that = this;
-      this.barOptions = {
+      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 = '<div>';
-            htmlStr += params.name + '<br/>';
+            htmlStr += params.seriesName + '<br/>';
             htmlStr += '<span style="height:10px;width:10px;font-size:12px;border-radius:5px;margin-right:5px;font-family:Consolas;display:inline-block;background:' + color + ';"></span>';
-            htmlStr += params.seriesName + '：' + params.value + '%';
+            htmlStr += params.name + '：' + params.value + '件';
             htmlStr += '</div>';
             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 = '<div>';
+            htmlStr += '物料采购' + '<br/>';
+            htmlStr += '<span style="height:10px;width:10px;font-size:12px;border-radius:5px;margin-right:5px;font-family:Consolas;display:inline-block;background:' + color + ';"></span>';
+            htmlStr += params.name + '：' + params.value + '件';
+            htmlStr += '</div>';
+            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 = '<div>';
+            htmlStr += params.seriesName + '<br/>';
+            htmlStr += '<span style="height:10px;width:10px;font-size:12px;border-radius:5px;margin-right:5px;font-family:Consolas;display:inline-block;background:' + color + ';"></span>';
+            htmlStr += params.name + '：' + params.value + '%';
+            htmlStr += '</div>';
+            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 = '<div>';
+            htmlStr += params.seriesName  + '<br/>';
+            htmlStr += '<span style="height:10px;width:10px;font-size:12px;border-radius:5px;margin-right:5px;font-family:Consolas;display:inline-block;background:' + color + ';"></span>';
+            htmlStr += params.name + '：' + params.value + '件';
+            htmlStr += '</div>';
+            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'
+          },
+        }]
+      };
     }
   }
 </script>

hb_client/src/views/statistics/progressStatistics.vue

@@ -7,7 +7,7 @@
           <Echart
             :options="pieOptions"
             id="pieChart"
-            height="45vh"
+            :height="domHeight"
           ></Echart>
         </el-card>
       </el-col>
@@ -18,7 +18,7 @@
             :id="chartId1"
             :options="barOptions"
             :className="chartsName"
-            height="45vh"
+            :height="domHeight"
             width="100%"
           >
           </charts>
@@ -31,7 +31,7 @@
             :id="chartId2"
             :options="barOptions1"
             :className="chartsName"
-            height="45vh"
+            :height="domHeight"
             width="100%"
           >
           </charts>
@@ -54,7 +54,6 @@
             v-el-height-adaptive-table="{bottomOffset: 42}"
           >
             <el-table-column type="index" width="50" />
-
             <el-table-column label="订单编号"  width="120" show-overflow-tooltip>
               <template slot-scope="scope">{{ scope.row.number }}</template>
             </el-table-column>
@@ -64,7 +63,6 @@
             <el-table-column label="产品数量">
               <template slot-scope="scope">{{ scope.row.count }}</template>
             </el-table-column>
-
             <el-table-column label="已交货数量">
               <template slot-scope="scope">{{ scope.row.delivered_count }}</template>
             </el-table-column>
@@ -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 @@
               },
             }]
           }
+
       }
     }
 </script>