图表修改

src/components/pages/PaymentManagement/SystemReconciliation.vue

 <template>
   <div class="SystemReconciliation">
     <div class="searchBox">
-      <a-select placeholder="请选择年" v-model="year" style="width: 120px" @change="handleChange">
+      <a-select allowClear placeholder="请选择年" v-model="year" style="width: 120px" @change="handleChange">
         <a-select-option v-for="item in yearList" :key="item" :value="item">{{item}}年</a-select-option>
       </a-select>
-      <a-select placeholder="请选择月" v-model="month" style="width: 120px;margin-left: 10px" @change="handleChange">
+      <a-select allowClear placeholder="请选择月" v-model="month" style="width: 120px;margin-left: 10px" @change="handleChange">
         <a-select-option v-for="item in 12" :key="item" :value="item">{{item}}月</a-select-option>
       </a-select>
       <a-button type="primary" @click="init">查询</a-button>
     </div>
     <div class="title">账单汇总</div>
-    <div id="rechargeLine" :style="{width: '900px', height: '300px'}"></div>
-    <div id="subsidyList" :style="{width: '900px', height: '300px'}"></div>
-    <div id="consumeLine" :style="{width: '900px', height: '300px'}"></div>
+    <div style="width: 100%;overflow-x:scroll">
+      <div id="rechargeLine" :style="{width: '100%', height: '300px'}"></div>
+    </div>
+    <div style="width: 100%;overflow-x:scroll">
+      <div id="subsidyList" :style="{width: '100%', height: '300px'}"></div>
+    </div>
+    <div style="width: 100%;overflow-x:scroll">
+      <div id="consumeLine" :style="{width: '100%', height: '300px'}"></div>
+    </div>
   </div>
 </template>
 
@@ -27,7 +33,8 @@ export default {
       SubsidyListDataList: [],
       ConsumeDataList: [],
       RechargeDataList: [],
-      yearList: []
+      yearList: [],
+      lineWidth: []
     }
   },
   created () {
@@ -44,6 +51,10 @@ export default {
   },
   methods: {
     init () {
+      if (!this.year) {
+        this.$message.success('请选择年份')
+        return
+      }
       this.getStatisticsSubsidyData()
       this.getStatisticsConsumeData()
       this.getStatisticsRechargeData()
@@ -56,19 +67,26 @@ export default {
       let data1 = []
       let data2 = []
       this.SubsidyListDataList.map(item => {
-        xAxisData.push(item.abscissaKey)
-        debugger
+        xAxisData.push(parseInt(item.abscissaKey))
         if (item.sceneTypeTotalAmountMap !== null) {
-          data1.push(item.sceneTypeTotalAmountMap.MEAl)
-          data2.push(item.sceneTypeTotalAmountMap.TRAVEL)
+          data1.push(item.sceneTypeTotalAmountMap.MEAl ? item.sceneTypeTotalAmountMap.MEAl : 0)
+          data2.push(item.sceneTypeTotalAmountMap.TRAVEL ? item.sceneTypeTotalAmountMap.TRAVEL : 0)
         } else {
-          data1.push('')
-          data2.push('')
+          data1.push(0)
+          data2.push(0)
         }
       })
       myChart.setOption({
         title: { text: '发放津贴金额' },
-        tooltip: {},
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        legend: {
+            data: ['餐补津贴', '交通津贴']
+        },
         xAxis: {
           data: xAxisData
         },
@@ -91,14 +109,25 @@ export default {
       let xAxisData = []
       let data1 = []
       let data2 = []
-      this.SubsidyListDataList.map(item => {
-        xAxisData.push(item.abscissaKey)
-        data1.push(item.internalRechargeAmount)
-        data2.push(item.externalRechargeAmount)
+      this.RechargeDataList.map(item => {
+        xAxisData.push(parseInt(item.abscissaKey))
+        data1.push(item.internalRechargeAmount ? item.internalRechargeAmount : 0)
+        data2.push(item.externalRechargeAmount ? item.externalRechargeAmount : 0)
       })
       myChart.setOption({
         title: { text: '充值金额' },
-        tooltip: {},
+        legend: {
+            data: ['支付宝充值', '现金充值']
+        },
+        grid: {
+          left: '10%'
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
         xAxis: {
           data: xAxisData
         },
@@ -122,21 +151,30 @@ export default {
       let data1 = []
       let data2 = []
       let data3 = []
-      this.SubsidyListDataList.map(item => {
-        xAxisData.push(item.abscissaKey)
-        data1.push(item.internalConsumeRealityAmount)
-        data2.push(item.internalConsumeSubsidyAmount)
-        data3.push(item.externalConsumeRealityAmount)
+      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)
       })
       // internalConsumeRealityAmount 员工现金
       // internalConsumeSubsidyAmount 津贴
       // externalConsumeRealityAmount 访客消费
+        
       myChart.setOption({
         title: { text: '消费金额' },
-        tooltip: {},
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
         xAxis: {
           data: xAxisData
         },
+        legend: {
+            data: ['员工现金消费', '员工津贴消费', '访客消费']
+        },
         yAxis: {},
         series: [{
           name: '员工现金消费',