饼图添加真实数据

src/views/lg/ProdPlan/ProdPlanList.vue

@@ -12,7 +12,7 @@
         width: '600px',
         height: '400px',
         // position: 'absolute',
-        // left: '-9999px',
+         left: '650px',
         // top: '-9999px',
         // visibility: 'hidden'
       }" />
@@ -124,6 +124,7 @@
   import { JeecgListMixin } from '@/mixins/JeecgListMixin'
   import ProdPlanModal from './modules/ProdPlanModal'
   import {  getAction,downFile,postAction} from '@/api/manage'
+  import { reactive, ref } from 'vue';
 
   export default {
     name: 'ProdPlanList',
@@ -136,6 +137,8 @@
         description: '生产计划管理页面',
         analysisLoading: false,
         emailLoading: false,
+        pieInside: [],
+        pieOutside: [],
         // 表头
         columns: [
           {
@@ -201,6 +204,7 @@
           deleteBatch: "/ProdPlan/prodPlan/deleteBatch",
           exportXlsUrl: "/ProdPlan/prodPlan/exportXls",
           importExcelUrl: "ProdPlan/prodPlan/importExcel",
+          initPieAndColumnar: "/ProdPlan/delayProduct/getDelayProductByWeek"
 
         },
         dictOptions:{},
@@ -216,7 +220,7 @@
       },
     },
     mounted() {
-      this.initPie();
+      this.initPieAndColumnar();
     },
     methods: {
       customRequest(options){
@@ -303,7 +307,24 @@
           }
         });
       },
-      initPie(){
+      initPieAndColumnar(){
+        let data;
+        let color;
+        let columnarInside;
+        let columnarOutside;
+        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);
+          }
+        });
+
+      },
+      loadingPie() {
         this.pieChart = this.$echarts.init(this.$refs.pie)
         let option = {
           color: ['#70bfe5', '#eb6a6c', '#f9c942', '#91c974', '#5a6ac0'],
@@ -333,10 +354,7 @@
               labelLine: {
                 show: false
               },
-              data: [
-                { value: 280, name: 'R&D',itemStyle: {color:'#fc8251'} },
-                { value: 494, name: '制造',itemStyle: {color:'#033E6B'}, selected: true }
-              ]
+              data: this.pieInside
             },
             {
               name: 'Access From',
@@ -377,16 +395,245 @@
                   }
                 }
               },
-              data: [
-                { value: 280, name: '开发未完' ,itemStyle: {color:'#fc8251'}},
-                { value: 376, name: '日别Capa不足',itemStyle: {color:'#25567B'} },
-                { value: 40, name: '合并生产',itemStyle: {color:'#0B61A4'} },
-                { value: 78, name: 'LOT不良',itemStyle: {color:'#66A3D2'} },
-              ]
+              data: this.pieOutside
             }
           ]
         };
         this.pieChart.setOption(option)
+      },
+      loadingShadow() {
+        this.barlineChart = this.$echarts.init(this.$refs.barline)
+        let option = {
+          "backgroundColor": "#fff",
+          "color": [
+            "#72A9FE",
+            "#FFC533",
+            "#56C994",
+            "#F6856E",
+          ],
+          "title": {
+          },
+          "legend": {
+            "orient": "horizontal",
+            "data": [
+              {
+                "name": "R&D LOSS数量"
+              },
+              {
+                "name": "制造 LOSS数量"
+              },
+
+              {
+                "name": "LOSS率"
+              },
+
+            ],
+            "left": 0,
+            "top": "4%",
+            "textStyle": {
+              "color": "#666",
+              "fontSize": 14
+            }
+          },
+          "grid": {
+            left: '2%',
+            right: '4%',
+            bottom: '6%',
+            top: '16%',
+            "containLabel": true
+          },
+          "tooltip": {
+            "trigger": "axis",
+            "axisPointer": {
+              "type": "shadow"
+            },
+            "textStyle": {
+              "align": "left"
+            }
+          },
+          "xAxis": [
+            {
+              "type": "category",
+              "data": [
+                'W10', 'W11', 'W12', 'W13', 'W14', 'W15'
+              ],
+              "axisTick": {
+                "show": false,
+
+              },
+              "axisLine": {
+                "show": true,
+                lineStyle: {
+                  color: '#cdd5e2'
+                }
+              },
+              "axisLabel": {
+                "show": true,
+                "textStyle": {
+                  "color": "#282828",
+                  "fontSize": 14
+                },
+                "formatter": "{value}"
+              },
+
+            }
+          ],
+          "yAxis": [
+            {
+              "type": "value",
+              "max": "600",
+              "axisTick": {
+                "show": false
+              },
+              "axisLine": {
+                "show": true,
+                lineStyle: {
+                  color: '#cdd5e2'
+                }
+              },
+              "axisLabel": {
+                "show": true,
+                "textStyle": {
+                  "color": "#282828",
+                  "fontSize": 14
+                }
+              },
+              "splitLine": {
+                "show": false,
+                "lineStyle": {
+                  "color": "rgba(255,255,255,0.2)"
+                }
+              }
+            },
+            {
+              type: "value",
+              name: "百分比",
+              "max": "10",
+              nameTextStyle: {
+                color: "#666666"
+              },
+              position: "right",
+              axisLine: {
+                lineStyle: {
+                  color: '#cdd5e2'
+                }
+              },
+              splitLine: {
+                show: false,
+              },
+              axisLabel: {
+                show: true,
+                formatter: "{value} %", //右侧Y轴文字显示
+                textStyle: {
+                  color: "#666666",
+                  fontSize: 14,
+                }
+              }
+            }
+          ],
+          dataZoom: [
+            {
+              show: true,
+              realtime: true,
+              "height": 12,
+              start: 0,
+              end: 70,
+              bottom: '2%',
+            },
+            {
+              type: 'inside',
+              realtime: true,
+              "height": 12,
+              start: 0,
+              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",
+              ]
+            },
+
+          ]
+        }
+        this.barlineChart.setOption(option);
       }
     }
   }