图表footer修改

src/components/common/Home.vue

@@ -26,7 +26,7 @@
       <router-view/>
     </a-layout-content>
     <a-layout-footer style="text-align: center">
-      mingwork后台管理系统
+      design by mingwork
     </a-layout-footer>
   </a-layout>
 </template>

src/components/pages/PaymentManagement/SystemReconciliation.vue

@@ -15,7 +15,7 @@
     </div>
     <div style="width: 100%;scroll;position: relative;">
       <div id="subsidyList" :style="{width: '100%', height: '300px'}"></div>
-      <a-select placeholder="津贴类型" v-model="sceneType" style="width: 120px;position: absolute;right: 5px;top: 0;" @change="changeSceneType">
+      <a-select placeholder="津贴类型" v-model="sceneType" style="width: 120px;position: absolute;right: 10%;top: 0;" @change="changeSceneType">
         <a-select-option value="MEAL">餐补</a-select-option>
         <a-select-option value="TRAVEL">交通补贴</a-select-option>
       </a-select>
@@ -53,6 +53,11 @@ export default {
   },
   mounted () {
     // this.drawLine()
+    window.addEventListener('resize', () => {
+      this.$echarts.init(document.getElementById('subsidyList')).resize()
+      this.$echarts.init(document.getElementById('rechargeLine')).resize()
+      this.$echarts.init(document.getElementById('consumeLine')).resize()
+    })
   },
   methods: {
     init () {
@@ -70,25 +75,58 @@ export default {
       // 绘制图表
       let xAxisData = []
       let data = []
+      let dataAmount = 0
       this.SubsidyListDataList.map(item => {
         xAxisData.push(parseInt(item.abscissaKey))
-        data.push(item.subsidyTotalAmount)
+        data.push(item.subsidyTotalAmount ? item.subsidyTotalAmount : 0)
+        dataAmount = dataAmount + item.subsidyTotalAmount
       })
+      let unit = this.month === undefined ? '月' : '日'
+      let color = this.sceneType === 'MEAL' ? ['#3F9EFE'] : [`#FF4A7A`]
       myChart.setOption({
-        title: { text: '发放津贴金额' },
+        color: color,
+        title: {
+          text: '发放津贴金额',
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 'normal'
+          }
+        },
         tooltip: {
           trigger: 'axis',
           axisPointer: {
             type: 'shadow'
+          },
+          formatter: function (params) {
+            var res = `<div><p>时间：${params[0].name}${unit}</p></div>`
+            for (var i = 0; i < params.length; i++) {
+              res += '<p>' + params[i].seriesName + '：¥ ' + params[i].data.toFixed(2) + '</p>'
+            }
+            return res
           }
         },
         legend: {
-          data: [`${this.sceneType === 'MEAL' ? '餐补' : '交通补贴'}`]
+          data: [`${this.sceneType === 'MEAL' ? '餐补' : '交通补贴'}`],
+          formatter: function (name) {
+            return `${name} ${dataAmount}元`
           },
-        xAxis: {
-          data: xAxisData
+          itemGap: 40
+        },
+        xAxis: [
+          {
+            name: `(${this.month === undefined ? '月' : '日'})`, // 给X轴加单位
+            // nameLocation: 'middle',
+            type: 'category',
+            data: xAxisData,
+            axisTick: {
+              show: false
+            }
+          }
+        ],
+        yAxis: {
+          name: '(元)',
+          type: 'value'
         },
-        yAxis: {},
         series: [{
           name: `${this.sceneType === 'MEAL' ? '餐补' : '交通补贴'}`,
           type: 'bar',
@@ -103,29 +141,62 @@ export default {
       let xAxisData = []
       let data1 = []
       let data2 = []
+      let data1Amount = 0
+      let data2Amount = 0
       this.RechargeDataList.map(item => {
         xAxisData.push(parseInt(item.abscissaKey))
         data1.push(item.externalRechargeAmount ? item.externalRechargeAmount : 0)
+        data1Amount += item.externalRechargeAmount
         data2.push(item.internalRechargeAmount ? item.internalRechargeAmount : 0)
+        data2Amount += item.internalRechargeAmount
       })
+      let unit = this.month === undefined ? '月' : '日'
       myChart.setOption({
+        color: ['#3F9EFE', '#FF4A7A'],
         title: { text: '充值金额' },
         legend: {
-          data: ['支付宝充值', '现金充值']
+          data: ['支付宝充值', '现金充值'],
+          formatter: function (name) {
+            if (name === '支付宝充值') {
+              return `${name} ${data1Amount}元`
+            } else {
+              return `${name} ${data2Amount}元`
+            }
+          },
+          itemGap: 40
         },
         grid: {
-          left: '10%'
+          left: '10%',
+          right: '10%'
         },
         tooltip: {
           trigger: 'axis',
           axisPointer: {
             type: 'shadow'
+          },
+          formatter: function (params) {
+            var res = `<div><p>时间：${params[0].name}${unit}</p></div>`
+            for (var i = 0; i < params.length; i++) {
+              res += '<p>' + params[i].seriesName + '：¥ ' + params[i].data.toFixed(2) + '</p>'
+            }
+            return res
           }
         },
-        xAxis: {
-          data: xAxisData
+        xAxis: [
+          {
+            name: `(${unit})`, // 给X轴加单位
+            // nameLocation: 'middle',
+            type: 'category',
+            data: xAxisData,
+            axisTick: {
+              show: false
+            }
+          }
+        ],
+        yAxis: {
+          name: '(元)',
+          type: 'value'
         },
-        yAxis: {},
         series: [{
           name: '支付宝充值',
           type: 'bar',
@@ -145,30 +216,72 @@ export default {
       let data1 = []
       let data2 = []
       let data3 = []
-      this.ConsumeDataList.map(item => {
-        xAxisData.push(parseInt(item.abscissaKey))
-        data1.push(item.internalConsumeRealityAmount ? item.internalConsumeRealityAmount : 0)
-        data2.push(item.internalConsumeSubsidyAmount ? item.internalConsumeSubsidyAmount : 0)
-        data3.push(item.externalConsumeRealityAmount ? item.externalConsumeRealityAmount : 0)
-      })
+      let data1Amount = 0
+      let data2Amount = 0
+      let data3Amount = 0
       // internalConsumeRealityAmount 员工现金
       // internalConsumeSubsidyAmount 津贴
       // externalConsumeRealityAmount 访客消费
+      // .toFixed(2) + '元'
+      let unit = this.month === undefined ? '月' : '日'
+      this.ConsumeDataList.map(item => {
+        xAxisData.push(parseInt(item.abscissaKey))
+        data1.push(item.internalConsumeRealityAmount ? item.internalConsumeRealityAmount : 0.00)
+        data1Amount = data1Amount + item.internalConsumeRealityAmount
+        data2.push(item.internalConsumeSubsidyAmount ? item.internalConsumeSubsidyAmount : 0.00)
+        data2Amount = data1Amount + item.internalConsumeSubsidyAmount
+        data3.push(item.externalConsumeRealityAmount ? item.externalConsumeRealityAmount : 0.00)
+        data3Amount = data1Amount + item.externalConsumeRealityAmount
+      })
       myChart.setOption({
+        color: ['#B87EE5', '#0066CC', '#EB597B'],
         title: { text: '消费金额' },
+        legend: {
+          data: [`员工现金消费`, `员工津贴消费`, `访客消费`],
+          formatter: function (name) {
+            if (name === '员工现金消费') {
+              return `${name} ${data1Amount}元`
+            } else if (name === '员工津贴消费') {
+              return `${name} ${data2Amount}元`
+            } else {
+              return `${name} ${data3Amount}元`
+            }
+          },
+          itemGap: 40
+        },
+        grid: {
+          left: '10%',
+          right: '10%'
+        },
         tooltip: {
           trigger: 'axis',
           axisPointer: {
             type: 'shadow'
+          },
+          formatter: function (params) {
+            var res = `<div><p>时间：${params[0].name}${unit}</p></div>`
+            for (var i = 0; i < params.length; i++) {
+              res += '<p>' + params[i].seriesName + '：¥ ' + params[i].data.toFixed(2) + '</p>'
+            }
+            return res
           }
         },
         xAxis: {
-          data: xAxisData
+          name: `(${this.month === undefined ? '月' : '日'})`, // 给X轴加单位
+          // nameLocation: 'middle',
+          type: 'category',
+          data: xAxisData,
+          axisTick: {
+            show: false
+          }
         },
-        legend: {
-          data: ['员工现金消费', '员工津贴消费', '访客消费']
+        yAxis: {
+          name: '(元)',
+          type: 'value'
+          // axisLabel: {
+          //   formatter: '{value}元'
+          // }
         },
-        yAxis: {},
         series: [{
           name: '员工现金消费',
           type: 'bar',
@@ -184,9 +297,6 @@ export default {
         }]
       })
     },
-    // handleChange (value) {
-    //   console.log(`selected ${value}`)
-    // },
     changeSceneType (value) {
       this.sceneType = value
       this.getStatisticsSubsidyData()