图表全部加上

fhKeeper/formulahousekeeper/timesheet/src/views/project/detail.vue

@@ -22,8 +22,9 @@
                 <el-radio-button label="阶段" v-if="user.company.packageProject != 0"></el-radio-button>
             </el-radio-group>
         </el-col>
-        
-        <div id="container" :style="'height:' + tableHeight + 'px'"></div> 
+        <div id="clearfix" :style="'overflow-x: auto;width:100%;padding-bottom: 0px; position: relative; height:'+containerHeight+'px;'">
+            <div id="container" :style="'height:' + tableHeight + 'px'"></div> 
+        </div>
     </section>
 </template>
 
@@ -75,6 +76,15 @@
                     endDate: this.endDate,
                 },
                 res => {
+                    // 
+                        for(var i in res.data.costList) {
+                            if(i>20) {
+                                this.widthHtval = +this.widthHtval + 40
+                            } else {
+                                this.widthHtval = document.body.clientWidth - 230
+                            }
+                        }
+                    // 
                     this.listLoading = false;
                     var _this = this;
                     if (res.code == "ok") {
@@ -90,6 +100,10 @@
                         }
 
                         var myChart = echarts.init(document.getElementById("container"));
+                        // 设置宽度
+                        myChart.resize({
+                            width: this.widthHtval
+                        })
                         _this.myChart = myChart;
                         var option = {
                             // 工具箱
@@ -113,6 +127,12 @@
                                     }
                                 }
                             },
+                            grid : {
+                                top : 80,    //距离容器上边界40像素
+                                bottom: 100,   //距离容器下边界30像素
+                                left: 150,
+                                right: 150
+                            },
                             tooltip:{
                                 trigger:'axis',
                                 formatter: function (params,ticket,callback) {
@@ -156,6 +176,26 @@
                     });
                 });
             },
+             // 左右滚动
+            scrollFunction () {
+                this.domObj = document.getElementById('clearfix') // 通过id获取要设置的div
+                if (this.domObj.attachEvent) { // IE
+                this.domObj.attachEvent('onmousewheel', this.mouseScroll)
+                } else if (this.domObj.addEventListener) {
+                this.domObj.addEventListener('DOMMouseScroll', this.mouseScroll, false)
+                }
+                this.domObj.onmousewheel = this.domObj.onmousewheel = this.mouseScroll
+            },
+
+            mouseScroll(event) { // google 浏览器下
+                let detail = event.wheelDelta || event.detail
+                let moveForwardStep = -1
+                let moveBackStep = 1
+                let step = 0
+                step = detail > 0 ? moveForwardStep * 100 : moveBackStep * 100
+                event.preventDefault() // 阻止浏览器默认事件
+                this.domObj.scrollLeft = this.domObj.scrollLeft + step
+            },
         },
         created() {
             let height = window.innerHeight;
@@ -173,6 +213,7 @@
             window.addEventListener("resize", function() {
                 _this.myChart.resize();
             });
+            this.scrollFunction()
         }
     };
 </script>

fhKeeper/formulahousekeeper/timesheet/src/views/project/detailDep.vue

@@ -19,8 +19,9 @@
                 </el-form-item>
             </el-form>
         </el-col> 
-
-        <div id="container" :style="'height:' + tableHeight + 'px'"></div> 
+        <div id="clearfix" :style="'overflow-x: auto;width:100%;padding-bottom: 100px; position: relative; height:'+containerHeight+'px;'">
+            <div id="container" :style="'height:' + tableHeight + 'px'"></div> 
+        </div>
     </section>
 </template>
 
@@ -117,6 +118,15 @@
                     this.listLoading = false;
                     var _this = this;
                     if (res.code == "ok") {
+                        // 
+                            for(var i in res.data.list) {
+                                if(i>20) {
+                                    this.widthHtval = +this.widthHtval + 40
+                                } else {
+                                    this.widthHtval = document.body.clientWidth - 230
+                                }
+                            }
+                        // 
                         var xList = [] , yList = [] , list = res.data.list, array = [] , series = [];
                         if (list.length > 0) {
                             this.cost = res.data.totalCostMoney;
@@ -171,6 +181,10 @@
                             }
 
                             var myChart = echarts.init(document.getElementById("container"));
+                            // 设置宽度
+                            myChart.resize({
+                                width: this.widthHtval
+                            })
                             _this.myChart = myChart;
                             var option = {
                                 // 工具箱
@@ -181,7 +195,9 @@
                                 },
                                 grid : {
                                     top : 80,    //距离容器上边界40像素
-                                    bottom: 35   //距离容器下边界30像素
+                                    bottom: 35,   //距离容器下边界30像素
+                                    left: 150,
+                                    right: 150
                                 },
                                 toolbox: {
                                     show: true,
@@ -258,6 +274,26 @@
                     });
                 });
             },
+            // 左右滚动
+            scrollFunction () {
+                this.domObj = document.getElementById('clearfix') // 通过id获取要设置的div
+                if (this.domObj.attachEvent) { // IE
+                this.domObj.attachEvent('onmousewheel', this.mouseScroll)
+                } else if (this.domObj.addEventListener) {
+                this.domObj.addEventListener('DOMMouseScroll', this.mouseScroll, false)
+                }
+                this.domObj.onmousewheel = this.domObj.onmousewheel = this.mouseScroll
+            },
+
+            mouseScroll(event) { // google 浏览器下
+                let detail = event.wheelDelta || event.detail
+                let moveForwardStep = -1
+                let moveBackStep = 1
+                let step = 0
+                step = detail > 0 ? moveForwardStep * 100 : moveBackStep * 100
+                event.preventDefault() // 阻止浏览器默认事件
+                this.domObj.scrollLeft = this.domObj.scrollLeft + step
+            },
         },
         created() {
             let height = window.innerHeight;
@@ -276,6 +312,7 @@
             window.addEventListener("resize", function() {
                 _this.myChart.resize();
             });
+            this.scrollFunction()
         }
     };
 </script>