代码提交

src/components/chart/barChart.vue

@@ -8,7 +8,7 @@ export default {
     props: {
         list: Array,
         default() {
-            return [];
+            return []
         },
         pageType: {
             type: String
@@ -33,15 +33,16 @@ export default {
         return {
             xData: [],
             yData: []
-        };
+        }
+    },
+    created() {
     },
-    created() {},
     methods: {
         drawBar() {
-            console.log(this.yData, 222);
+
-            let myChart = this.$echarts.getInstanceByDom(this.$refs.barChart);
+            let myChart = this.$echarts.getInstanceByDom(this.$refs.barChart)
             if (myChart == null) {
-                myChart = this.$echarts.init(this.$refs.barChart);
+                myChart = this.$echarts.init(this.$refs.barChart)
             }
             let option = {
                 color: ['#7262FD', '#FC5A5A'],
@@ -49,34 +50,34 @@ export default {
                     show: true,
                     text: this.componentName + '-' + this.chartName + '-' + '柱状图',
                     textStyle: {
-                        lineHeight: '30'
+                        lineHeight: '30',
                     }
                 },
                 tooltip: {
-                    confine: true
+                    confine: true,
                 },
                 grid: {
                     left: '2%',
                     right: '4%',
                     bottom: '10%',
                     top: '20%',
-                    containLabel: true
+                    containLabel: true,
                 },
                 xAxis: {
                     type: 'category',
                     data: this.xData,
                     axisLine: {
                         lineStyle: {
-                            color: '#000'
+                            color: '#000',
-                        }
+                        },
                     },
                     axisLabel: {
                         fontSize: 12,
-                        color: '#000'
+                        color: '#000',
                     },
                     axisTick: {
-                        show: false
+                        show: false,
-                    }
+                    },
                 },
                 yAxis: [
                     {
@@ -84,64 +85,70 @@ export default {
                         min: 0,
                         minInterval: 1,
                         splitArea: {
-                            show: false
+                            show: false,
                         },
 
                         axisLine: {
-                            show: true
+                            show: true,
                         },
                         axisTick: {
-                            show: false
+                            show: false,
                         },
                         splitLine: {
                             lineStyle: {
                                 color: '#eeebeb',
-                                type: 'dashed' // dotted 虚线
+                                type: 'dashed', // dotted 虚线
-                            }
+                            },
                         },
                         axisLabel: {
                             fontSize: 12,
                             color: '#000',
-                            fontFamily: 'Bebas'
+                            fontFamily: 'Bebas',
-                        }
+                        },
-                    }
+                    }],
-                ],
+                series: [{
-                series: [
-                    {
                     type: 'bar',
                     barWidth: 20,
-                        itemStyle: { barBorderRadius: [5, 5, 0, 0] },
+                    itemStyle: { barBorderRadius: [5, 5, 0, 0], },
                     name: '时间',
                     data: this.yData
-                    }
+                },
-                ]
+                ],
             };
-            myChart.setOption(option);
+            myChart.setOption(option)
             // window.onresize = () => {  // 根据窗口大小变化图表自适应
             //     myChart.resize();
             // };
             window.addEventListener('resize', function () {
-                myChart.resize();
+                myChart.resize()
-            });
             }
+            )
+        },
     },
     mounted() {
-        this.drawBar();
+        this.xData = this.typeValue.type_data.map(ele => {
+            return ele.name
+        })
+        this.yData = this.typeValue.type_data.map(ele => {
+            return ele.quantity
+        })
+        this.drawBar()
     },
     watch: {
         typeValue: {
             handler(newVal) {
                 if (newVal) {
                     this.xData = newVal.type_data.map(ele => {
-                        return ele.name;
+                        return ele.name
-                    });
+                    })
                     this.yData = newVal.type_data.map(ele => {
-                        return ele.quantity;
+                        return ele.quantity
-                    });
+                    })
-                    this.drawBar();
+                    this.drawBar()
+                }
+            }
+
         }
     }
 }
-    }
-};
 </script>

src/components/chart/pieChart.vue

@@ -111,9 +111,18 @@ export default {
         }
     },
     mounted() {
+        // if (this.typeValue) {
+        //     this.typeValue.type_data.forEach(ele => {
+        //         this.seriesData.push({
+        //             name: ele.name,
+        //             value: ele.quantity
+        //         });
+        //     });
+        // }
         this.drawPie();
     },
     watch: {
+        // 监听单个的数据
         typeValue: {
             handler(newVal) {
                 if (newVal) {

src/components/target/typeChart.vue

@@ -71,10 +71,11 @@
         <div v-show="echartArr.includes('表格')">
             <div class="tableTitle">
                 <div class="">
-                    
+                    <span style="width: 10px;height:10px;border-radius: 50%;background-color: #3297ff;display: inline-block;vertical-align: middle;"></span>
+                    <span>{{ this.chartName+ '-' + this.componentName + '-' + '表格'}}</span>
                 </div>
                 <div class="tableTime">
-
+                    {{ typeValue.time }}
                 </div>
             </div>
             <div v-if="pageType == '断面'" style="margin-bottom: 20px; border: 1px solid #e4e7ed">
@@ -146,9 +147,6 @@ export default {
     },
     methods: {
         // 计算类型的数值
-
-        
-
     },
 
     computed: {