柱状图优化

src/views/lg/ProdPlan/ProdPlanList.vue

@@ -315,31 +315,31 @@
         getAction(this.url.initPieAndColumnar,  'get').then((res) => {
           if(res.success) {
             data = res.result;
-            this.pieInside = res.result.pieInside;
-            this.pieOutside = res.result.pieOutside;
-            this.loadingPie();
-            this.loadingShadow();
-            console.log(res);
+            this.loadingPie(res.result);
+            this.loadingShadow(res.result);
           }
         });
 
       },
-      loadingPie() {
+      loadingPie(data) {
         this.pieChart = this.$echarts.init(this.$refs.pie)
+        let legendData = [];
+        let color = []
+        data.pieInside.forEach(res => {
+          legendData.push("name", res.name);
+          color.push(res.itemStyle.color);
+        })
+
+        console.log(data);
         let option = {
-          color: ['#70bfe5', '#eb6a6c', '#f9c942', '#91c974', '#5a6ac0'],
+          color: color,
           tooltip: {
             trigger: 'item',
             formatter: '{a} <br/>{b}: {c} ({d}%)'
           },
           backgroundColor: '#fff',
           legend: {
-            data: [
-              '开发未完',
-              '日别Capa不足',
-              '合并生产',
-              'LOT不良'
-            ]
+            data: legendData
           },
           series: [
             {
@@ -354,7 +354,7 @@
               labelLine: {
                 show: false
               },
-              data: this.pieInside
+              data: data.pieInside
             },
             {
               name: 'Access From',
@@ -395,14 +395,58 @@
                   }
                 }
               },
-              data: this.pieOutside
+              data: data.pieOutside
             }
           ]
         };
         this.pieChart.setOption(option)
       },
-      loadingShadow() {
+      loadingShadow(data) {
         this.barlineChart = this.$echarts.init(this.$refs.barline)
+        let seriesData = [];
+        let legendData = [];
+        let lossData = {
+          name: "LOSS",
+          type: "line",
+          yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
+          smooth: false, //平滑曲线显示
+          symbol: "circle", //标记的图形为实心圆
+          symbolSize: 8, //标记的大小
+          itemStyle: {
+            normal: {
+              color: '#72A9FE',
+              borderColor: 'rgba(114, 169, 254, 0.5)',  //圆点透明 边框
+              borderWidth: 7
+            },
+
+          },
+          lineStyle: {
+            color: "#72A9FE"
+          },
+          data: data.lossData
+        }
+        let itemStyle = {
+          normal: {
+            label: {
+              show: false,
+                textStyle: {
+                color: '#333',
+                  fontSize: 14
+              }
+            }
+          }
+        }
+        for (let key in data.columnarData) {
+          legendData.push("name", key);
+          seriesData.push({
+            "name": key,
+            "type": "bar",
+            "data": data.columnarData[key],
+            "stack": "总量",
+            "barWidth": "40%",
+            "itemStyle": itemStyle});
+        }
+        seriesData.push(lossData);
         let option = {
           "backgroundColor": "#fff",
           "color": [
@@ -410,24 +454,14 @@
             "#FFC533",
             "#56C994",
             "#F6856E",
+            "#CC66FF",
+            "#CCCC66"
           ],
           "title": {
           },
           "legend": {
             "orient": "horizontal",
-            "data": [
-              {
-                "name": "R&D LOSS数量"
-              },
-              {
-                "name": "制造 LOSS数量"
-              },
-
-              {
-                "name": "LOSS率"
-              },
-
-            ],
+            "data": legendData,
             "left": 0,
             "top": "4%",
             "textStyle": {
@@ -454,9 +488,7 @@
           "xAxis": [
             {
               "type": "category",
-              "data": [
-                'W10', 'W11', 'W12', 'W13', 'W14', 'W15'
-              ],
+              "data": data.columnarWeeks,
               "axisTick": {
                 "show": false,
 
@@ -481,7 +513,7 @@
           "yAxis": [
             {
               "type": "value",
-              "max": "600",
+              "max": data.weekMax,
               "axisTick": {
                 "show": false
               },
@@ -548,95 +580,15 @@
               end: 70
             }
           ],
-          "series": [
-            // {symbol: 'circle'},
-            {
-              "name": "R&D",
-              "type": "bar",
-              "stack": "总量",
-              "barWidth": "40%",
-              "data": [
-                "42",
-                "44",
-                "40",
-                "78",
-                "101",
-                "376",
-              ],
-              itemStyle: {
-                normal: {
-                  label: {
-                    show: true, //开启显示
-                    //
-                    textStyle: { //数值样式
-                      color: '#333',
-                      fontSize: 14
-                    }
-                  }
-                }
-              }
-
-            },
-            {
-              "name": "制造",
-              "type": "bar",
-              "stack": "总量",
-              "barWidth": "40%",
-              "data": [
-                "12",
-                "14",
-                "10",
-                "92",
-                "24",
-                "208",
-              ],
-              itemStyle: {
-                normal: {
-                  label: {
-                    show: true, //开启显示
-                    textStyle: { //数值样式
-                      color: '#333',
-                      fontSize: 14
-                    }
-                  }
-                }
-              }
-
-            },
-            {
-              name: "LOSS",
-              type: "line",
-              yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
-              smooth: false, //平滑曲线显示
-              symbol: "circle", //标记的图形为实心圆
-              symbolSize: 8, //标记的大小
-              itemStyle: {
-                normal: {
-                  color: '#72A9FE',
-                  borderColor: 'rgba(114, 169, 254, 0.5)',  //圆点透明 边框
-                  borderWidth: 7
-                },
-
-              },
-              lineStyle: {
-                color: "#72A9FE"
-              },
-              data: [
-                "0.35",
-                "0.4",
-                "0.3",
-                "0.3",
-                "0.9",
-                "4.0",
-              ]
-            },
-
-          ]
+          "series": seriesData,
         }
+
         this.barlineChart.setOption(option);
       }
     }
   }
+
+
 </script>
 <style scoped>
   @import '~@assets/less/common.less';