manage-client 3.1.39 → 3.1.40

package/src/components/daping/SafecheckBarChart.vue

@@ -1,233 +1,233 @@
-<template>
-  <div id="safecheck-barchart" style="height: 100%;width:100%">
-  </div>
-</template>
-
-<script>
-  import {HttpResetClass} from "vue-client";
-
-  export default {
-    title: '收费',
-    data() {
-      return{
-        xData: [],
-        yData1: [],
-        yData2: []
-      }
-    },
-    methods: {
-      async resize(){
-        let http = new HttpResetClass()
-        // 收费
-        await http.load('post', '/rs/sql/getSafecheckSumByMonth', {data:{}}, {rejectMsg: null, resolveMsg: null}).then((res)=>{
-          this.xData = res.data.map(item => item.time)
-          this.yData1 = res.data.map(item => item.allnum)
-          this.yData2 = res.data.map(item => item.sucnum)
-          this.init()
-        })
-      },
-      init() {
-        var xData = this.xData,
-            // ['1', '2', '3', '4', '5', '6', '7', '8', '9'],
-          yData1 = this.yData1,
-            // [60871, 0, 2, 26946, 108042, 136004, 156401, 164792, 83286],
-          yData2 = this.yData2,
-            // [35337, 0, 2, 15514, 72138, 78966, 101071, 110397, 58137],
-          borderData = [],
-          legend = ['计划安检量', '正常入户量'],
-          colorArr = [{
-            start: 'rgba(242,153,97)',
-            mid: 'rgba(242,153,97,0.7)',
-            end: 'rgba(0, 0, 0,0.5)'
-          },
-            {
-              end: 'rgba(0, 0, 0,0.5)',
-              mid: 'rgba(111,217,208,0.7)',
-              start: 'rgba(111,217,208)'
-            },
-            {
-              color: '#00EAFF'
-            }
-          ]
-        let normalColor = 'rgba(8,115,142)'
-        let seriesData = []
-        var borderHeight = 4
-        xData.forEach(element => {
-          borderData.push(borderHeight)
-        });
-        [yData1, yData2].forEach((item, index) => {
-          var obj1 = {}
-          obj1 = {
-            name: legend[index],
-            type: 'bar',
-            stack: legend[index],
-            data: item,
-            barWidth: '10%',
-            itemStyle: {
-              normal: {
-                barBorderRadius: [30, 30, 30, 30],
-                color: {
-                  type: 'linear',
-                  x: 0,
-                  y: 0,
-                  x2: 0,
-                  y2: 1,
-                  colorStops: [{
-                    offset: 0,
-                    color: colorArr[index].start
-                  },
-                  {
-                    offset: 0.5,
-                    color: colorArr[index].mid
-                  },
-                  {
-                    offset: 1,
-                    color: colorArr[index].end
-                  }
-                  ],
-                  globalCoord: false
-                }
-              }
-            }
-          }
-          seriesData.push(obj1)
-        })
-        console.log(seriesData)
-        // 更改柱状图位置
-        let option = {
-          backgroundColor: '#ffffff00',
-          grid: {
-            left: '2%',
-            top: '2%',
-            right: '7%',
-            bottom: '20%',
-            containLabel: true
-          },
-          legend: {
-            show: true,
-            icon: 'rect',
-            itemWidth: 30,
-            itemHeight: 20,
-            right: 'center',
-            bottom: '7%',
-            textStyle: {
-              color: '#fff'
-            },
-            data: legend
-          },
-          tooltip: {
-            position: function (pos, params, dom, rect, size) {
-              let yPos = '20%'
-              let xPos = 0
-              if (pos[0] < size.viewSize[0] / 2) {
-                xPos = pos[0] + 10
-              } else {
-                xPos = pos[0] - dom.offsetWidth - 10
-              }
-              return [xPos, yPos]
-            },
-            trigger: 'axis',
-            extraCssText: 'width: auto;height: auto;',
-            formatter: function (params) {
-              var str = ''
-              for (var i = 0; i < params.length; i++) {
-                if (params[i].seriesName !== '') {
-                  str += `<span>${params[i].name}月${params[i].seriesName}</span><span style="color:gold">${params[i].value}</span> <br />`
-                }
-              }
-              return str
-            }
-          },
-          xAxis: [{
-            name: '近6月',
-            type: 'category',
-            data: xData,
-            nameTextStyle: {
-              color: '#95bad7',
-              fontSize: 12
-            },
-            interval: 0,
-            axisPointer: {
-              type: 'shadow'
-            },
-            axisLabel: {
-              textStyle: {
-                color: normalColor,
-                fontSize: '1vw'
-              }
-            },
-            axisLine: {
-              lineStyle: {
-                color: normalColor
-              }
-            },
-            axisTick: {
-              show: false
-            },
-            splitLine: {
-              show: false
-            }
-          }],
-          yAxis: [{
-            type: 'value',
-            nameTextStyle: {
-              color: normalColor,
-              fontSize: 12
-            },
-            // 'min': 0,
-            // 'max': 50,
-            axisLabel: {
-              formatter: '{value}',
-              textStyle: {
-                color: normalColor,
-                fontSize: 12
-              }
-            },
-            axisLine: {
-              lineStyle: {
-                color: normalColor
-              }
-            },
-            axisTick: {
-              show: false
-            },
-            splitLine: {
-              show: true,
-              lineStyle: {
-                type: 'dashed',
-                color: normalColor
-              }
-            }
-          }],
-          series: seriesData
-        }
-        console.log(option)
-        let barchart = this.$echarts.init(document.getElementById('safecheck-barchart'))
-        console.log(option)
-        barchart.setOption(option)
-        var index = 0
-        // var mTime = setInterval(function () {
-        //   barchart.dispatchAction({
-        //     type: 'showTip',
-        //     seriesIndex: 0,
-        //     dataIndex: index
-        //   })
-        //   index++
-        //   if (index > xData.length) {
-        //     index = 0
-        //   }
-        // }, 1000)
-      }
-    },
-    ready() {
-      this.resize()
-    },
-    props: {}
-  }
-</script>
-<style scoped>
-  /*div{*/
-  /*height: auto;*/
-  /*}*/
-</style>
-
+<template>
+  <div id="safecheck-barchart" style="height: 100%;width:100%">
+  </div>
+</template>
+
+<script>
+  import {HttpResetClass} from "vue-client";
+
+  export default {
+    title: '收费',
+    data() {
+      return{
+        xData: [],
+        yData1: [],
+        yData2: []
+      }
+    },
+    methods: {
+      async resize(){
+        let http = new HttpResetClass()
+        // 收费
+        await http.load('post', '/rs/sql/getSafecheckSumByMonth', {data:{}}, {rejectMsg: null, resolveMsg: null}).then((res)=>{
+          this.xData = res.data.map(item => item.time)
+          this.yData1 = res.data.map(item => item.allnum)
+          this.yData2 = res.data.map(item => item.sucnum)
+          this.init()
+        })
+      },
+      init() {
+        var xData = this.xData,
+            // ['1', '2', '3', '4', '5', '6', '7', '8', '9'],
+          yData1 = this.yData1,
+            // [60871, 0, 2, 26946, 108042, 136004, 156401, 164792, 83286],
+          yData2 = this.yData2,
+            // [35337, 0, 2, 15514, 72138, 78966, 101071, 110397, 58137],
+          borderData = [],
+          legend = ['计划安检量', '正常入户量'],
+          colorArr = [{
+            start: 'rgba(242,153,97)',
+            mid: 'rgba(242,153,97,0.7)',
+            end: 'rgba(0, 0, 0,0.5)'
+          },
+            {
+              end: 'rgba(0, 0, 0,0.5)',
+              mid: 'rgba(111,217,208,0.7)',
+              start: 'rgba(111,217,208)'
+            },
+            {
+              color: '#00EAFF'
+            }
+          ]
+        let normalColor = 'rgba(8,115,142)'
+        let seriesData = []
+        var borderHeight = 4
+        xData.forEach(element => {
+          borderData.push(borderHeight)
+        });
+        [yData1, yData2].forEach((item, index) => {
+          var obj1 = {}
+          obj1 = {
+            name: legend[index],
+            type: 'bar',
+            stack: legend[index],
+            data: item,
+            barWidth: '10%',
+            itemStyle: {
+              normal: {
+                barBorderRadius: [30, 30, 30, 30],
+                color: {
+                  type: 'linear',
+                  x: 0,
+                  y: 0,
+                  x2: 0,
+                  y2: 1,
+                  colorStops: [{
+                    offset: 0,
+                    color: colorArr[index].start
+                  },
+                  {
+                    offset: 0.5,
+                    color: colorArr[index].mid
+                  },
+                  {
+                    offset: 1,
+                    color: colorArr[index].end
+                  }
+                  ],
+                  globalCoord: false
+                }
+              }
+            }
+          }
+          seriesData.push(obj1)
+        })
+        console.log(seriesData)
+        // 更改柱状图位置
+        let option = {
+          backgroundColor: '#ffffff00',
+          grid: {
+            left: '2%',
+            top: '2%',
+            right: '7%',
+            bottom: '20%',
+            containLabel: true
+          },
+          legend: {
+            show: true,
+            icon: 'rect',
+            itemWidth: 30,
+            itemHeight: 20,
+            right: 'center',
+            bottom: '7%',
+            textStyle: {
+              color: '#fff'
+            },
+            data: legend
+          },
+          tooltip: {
+            position: function (pos, params, dom, rect, size) {
+              let yPos = '20%'
+              let xPos = 0
+              if (pos[0] < size.viewSize[0] / 2) {
+                xPos = pos[0] + 10
+              } else {
+                xPos = pos[0] - dom.offsetWidth - 10
+              }
+              return [xPos, yPos]
+            },
+            trigger: 'axis',
+            extraCssText: 'width: auto;height: auto;',
+            formatter: function (params) {
+              var str = ''
+              for (var i = 0; i < params.length; i++) {
+                if (params[i].seriesName !== '') {
+                  str += `<span>${params[i].name}月${params[i].seriesName}</span><span style="color:gold">${params[i].value}</span> <br />`
+                }
+              }
+              return str
+            }
+          },
+          xAxis: [{
+            name: '近6月',
+            type: 'category',
+            data: xData,
+            nameTextStyle: {
+              color: '#95bad7',
+              fontSize: 12
+            },
+            interval: 0,
+            axisPointer: {
+              type: 'shadow'
+            },
+            axisLabel: {
+              textStyle: {
+                color: normalColor,
+                fontSize: '1vw'
+              }
+            },
+            axisLine: {
+              lineStyle: {
+                color: normalColor
+              }
+            },
+            axisTick: {
+              show: false
+            },
+            splitLine: {
+              show: false
+            }
+          }],
+          yAxis: [{
+            type: 'value',
+            nameTextStyle: {
+              color: normalColor,
+              fontSize: 12
+            },
+            // 'min': 0,
+            // 'max': 50,
+            axisLabel: {
+              formatter: '{value}',
+              textStyle: {
+                color: normalColor,
+                fontSize: 12
+              }
+            },
+            axisLine: {
+              lineStyle: {
+                color: normalColor
+              }
+            },
+            axisTick: {
+              show: false
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                type: 'dashed',
+                color: normalColor
+              }
+            }
+          }],
+          series: seriesData
+        }
+        console.log(option)
+        let barchart = this.$echarts.init(document.getElementById('safecheck-barchart'))
+        console.log(option)
+        barchart.setOption(option)
+        var index = 0
+        // var mTime = setInterval(function () {
+        //   barchart.dispatchAction({
+        //     type: 'showTip',
+        //     seriesIndex: 0,
+        //     dataIndex: index
+        //   })
+        //   index++
+        //   if (index > xData.length) {
+        //     index = 0
+        //   }
+        // }, 1000)
+      }
+    },
+    ready() {
+      this.resize()
+    },
+    props: {}
+  }
+</script>
+<style scoped>
+  /*div{*/
+  /*height: auto;*/
+  /*}*/
+</style>
+