mp：完成公众号的数据统计前端界面

yudao-module-mp/yudao-module-mp-api/src/main/java/cn/iocoder/yudao/module/mp/enums/ErrorCodeConstants.java

@@ -18,6 +18,7 @@ public interface ErrorCodeConstants {
     ErrorCode STATISTICS_GET_USER_SUMMARY_FAIL = new ErrorCode(1006001000, "获取用户增减数据失败，原因：{}");
     ErrorCode STATISTICS_GET_USER_CUMULATE_FAIL = new ErrorCode(1006001001, "获得用户累计数据失败，原因：{}");
     ErrorCode STATISTICS_GET_UPSTREAM_MESSAGE_FAIL = new ErrorCode(1006001002, "获得消息发送概况数据失败，原因：{}");
+    ErrorCode STATISTICS_GET_INTERFACE_SUMMARY_FAIL = new ErrorCode(1006001003, "获得接口分析数据失败，原因：{}");
 
     // TODO 要处理下
     ErrorCode COMMON_NOT_EXISTS = new ErrorCode(1006001002, "用户不存在");

yudao-module-mp/yudao-module-mp-biz/src/main/java/cn/iocoder/yudao/module/mp/controller/admin/account/MpAccountController.java

@@ -2,10 +2,7 @@ package cn.iocoder.yudao.module.mp.controller.admin.account;
 
 import cn.iocoder.yudao.framework.common.pojo.CommonResult;
 import cn.iocoder.yudao.framework.common.pojo.PageResult;
-import cn.iocoder.yudao.module.mp.controller.admin.account.vo.MpAccountCreateReqVO;
+import cn.iocoder.yudao.module.mp.controller.admin.account.vo.*;
-import cn.iocoder.yudao.module.mp.controller.admin.account.vo.MpAccountPageReqVO;
-import cn.iocoder.yudao.module.mp.controller.admin.account.vo.MpAccountRespVO;
-import cn.iocoder.yudao.module.mp.controller.admin.account.vo.MpAccountUpdateReqVO;
 import cn.iocoder.yudao.module.mp.convert.account.MpAccountConvert;
 import cn.iocoder.yudao.module.mp.dal.dataobject.account.MpAccountDO;
 import cn.iocoder.yudao.module.mp.service.account.MpAccountService;
@@ -18,6 +15,7 @@ import org.springframework.web.bind.annotation.*;
 
 import javax.annotation.Resource;
 import javax.validation.Valid;
+import java.util.List;
 
 import static cn.iocoder.yudao.framework.common.pojo.CommonResult.success;
 
@@ -71,6 +69,14 @@ public class MpAccountController {
         return success(MpAccountConvert.INSTANCE.convertPage(pageResult));
     }
 
+    @GetMapping("/list-all-simple")
+    @ApiOperation(value = "获取公众号账号精简信息列表")
+    @PreAuthorize("@ss.hasPermission('mp:account:query')")
+    public CommonResult<List<MpAccountSimpleRespVO>> getSimpleAccounts() {
+        List<MpAccountDO> list = mpAccountService.getAccountList();
+        return success(MpAccountConvert.INSTANCE.convertList02(list));
+    }
+
     @PutMapping("/generate-qr-code")
     @ApiOperation("生成公众号二维码")
     @ApiImplicitParam(name = "id", value = "编号", required = true, dataTypeClass = Long.class)

yudao-module-mp/yudao-module-mp-biz/src/main/java/cn/iocoder/yudao/module/mp/controller/admin/account/vo/MpAccountSimpleRespVO.java

@@ -0,0 +1,17 @@
+package cn.iocoder.yudao.module.mp.controller.admin.account.vo;
+
+import io.swagger.annotations.ApiModel;
+import io.swagger.annotations.ApiModelProperty;
+import lombok.Data;
+
+@ApiModel("管理后台 - 公众号账号精简信息 Response VO")
+@Data
+public class MpAccountSimpleRespVO {
+
+    @ApiModelProperty(value = "编号", required = true, example = "1024")
+    private Long id;
+
+    @ApiModelProperty(value = "公众号名称", required = true, example = "芋道源码")
+    private String name;
+
+}

yudao-module-mp/yudao-module-mp-biz/src/main/java/cn/iocoder/yudao/module/mp/controller/admin/statistics/MpStatisticsController.java

@@ -1,14 +1,12 @@
 package cn.iocoder.yudao.module.mp.controller.admin.statistics;
 
 import cn.iocoder.yudao.framework.common.pojo.CommonResult;
-import cn.iocoder.yudao.module.mp.controller.admin.statistics.vo.MpStatisticsGetReqVO;
+import cn.iocoder.yudao.module.mp.controller.admin.statistics.vo.*;
-import cn.iocoder.yudao.module.mp.controller.admin.statistics.vo.MpStatisticsUpstreamMessageRespVO;
-import cn.iocoder.yudao.module.mp.controller.admin.statistics.vo.MpStatisticsUserCumulateRespVO;
-import cn.iocoder.yudao.module.mp.controller.admin.statistics.vo.MpStatisticsUserSummaryRespVO;
 import cn.iocoder.yudao.module.mp.convert.statistics.MpStatisticsConvert;
 import cn.iocoder.yudao.module.mp.service.statistics.MpStatisticsService;
 import io.swagger.annotations.Api;
 import io.swagger.annotations.ApiOperation;
+import me.chanjar.weixin.mp.bean.datacube.WxDataCubeInterfaceResult;
 import me.chanjar.weixin.mp.bean.datacube.WxDataCubeMsgResult;
 import me.chanjar.weixin.mp.bean.datacube.WxDataCubeUserCumulate;
 import me.chanjar.weixin.mp.bean.datacube.WxDataCubeUserSummary;
@@ -59,4 +57,12 @@ public class MpStatisticsController {
         return success(MpStatisticsConvert.INSTANCE.convertList03(list));
     }
 
+    @GetMapping("/interface-summary")
+    @ApiOperation("获取消息发送概况数据")
+    @PreAuthorize("@ss.hasPermission('mp:statistics:query')")
+    public CommonResult<List<MpStatisticsInterfaceSummaryRespVO>> getInterfaceSummary(MpStatisticsGetReqVO getReqVO) {
+        List<WxDataCubeInterfaceResult> list = mpStatisticsService.getInterfaceSummary(
+                getReqVO.getAccountId(), getReqVO.getDate());
+        return success(MpStatisticsConvert.INSTANCE.convertList04(list));
+    }
 }

yudao-module-mp/yudao-module-mp-biz/src/main/java/cn/iocoder/yudao/module/mp/controller/admin/statistics/vo/MpStatisticsInterfaceSummaryRespVO.java

@@ -0,0 +1,28 @@
+package cn.iocoder.yudao.module.mp.controller.admin.statistics.vo;
+
+import io.swagger.annotations.ApiModel;
+import io.swagger.annotations.ApiModelProperty;
+import lombok.Data;
+
+import java.util.Date;
+
+@ApiModel("管理后台 - 某一天的接口分析数据 Response VO")
+@Data
+public class MpStatisticsInterfaceSummaryRespVO {
+
+    @ApiModelProperty(value = "日期", required = true)
+    private Date refDate;
+
+    @ApiModelProperty(value = "通过服务器配置地址获得消息后，被动回复用户消息的次数", required = true, example = "10")
+    private Integer callbackCount;
+
+    @ApiModelProperty(value = "上述动作的失败次数", required = true, example = "20")
+    private Integer failCount;
+
+    @ApiModelProperty(value = "总耗时，除以 callback_count 即为平均耗时", required = true, example = "30")
+    private Integer totalTimeCost;
+
+    @ApiModelProperty(value = "最大耗时", required = true, example = "40")
+    private Integer maxTimeCost;
+
+}

yudao-module-mp/yudao-module-mp-biz/src/main/java/cn/iocoder/yudao/module/mp/convert/account/MpAccountConvert.java

@@ -3,6 +3,7 @@ package cn.iocoder.yudao.module.mp.convert.account;
 import cn.iocoder.yudao.framework.common.pojo.PageResult;
 import cn.iocoder.yudao.module.mp.controller.admin.account.vo.MpAccountCreateReqVO;
 import cn.iocoder.yudao.module.mp.controller.admin.account.vo.MpAccountRespVO;
+import cn.iocoder.yudao.module.mp.controller.admin.account.vo.MpAccountSimpleRespVO;
 import cn.iocoder.yudao.module.mp.controller.admin.account.vo.MpAccountUpdateReqVO;
 import cn.iocoder.yudao.module.mp.dal.dataobject.account.MpAccountDO;
 import org.mapstruct.Mapper;
@@ -25,4 +26,6 @@ public interface MpAccountConvert {
 
     PageResult<MpAccountRespVO> convertPage(PageResult<MpAccountDO> page);
 
+    List<MpAccountSimpleRespVO> convertList02(List<MpAccountDO> list);
+
 }

yudao-module-mp/yudao-module-mp-biz/src/main/java/cn/iocoder/yudao/module/mp/convert/statistics/MpStatisticsConvert.java

@@ -1,8 +1,10 @@
 package cn.iocoder.yudao.module.mp.convert.statistics;
 
+import cn.iocoder.yudao.module.mp.controller.admin.statistics.vo.MpStatisticsInterfaceSummaryRespVO;
 import cn.iocoder.yudao.module.mp.controller.admin.statistics.vo.MpStatisticsUpstreamMessageRespVO;
 import cn.iocoder.yudao.module.mp.controller.admin.statistics.vo.MpStatisticsUserCumulateRespVO;
 import cn.iocoder.yudao.module.mp.controller.admin.statistics.vo.MpStatisticsUserSummaryRespVO;
+import me.chanjar.weixin.mp.bean.datacube.WxDataCubeInterfaceResult;
 import me.chanjar.weixin.mp.bean.datacube.WxDataCubeMsgResult;
 import me.chanjar.weixin.mp.bean.datacube.WxDataCubeUserCumulate;
 import me.chanjar.weixin.mp.bean.datacube.WxDataCubeUserSummary;
@@ -31,4 +33,8 @@ public interface MpStatisticsConvert {
     })
     MpStatisticsUpstreamMessageRespVO convert(WxDataCubeMsgResult bean);
 
+    List<MpStatisticsInterfaceSummaryRespVO> convertList04(List<WxDataCubeInterfaceResult> list);
+
+    @Mapping(source = "refDate", target = "refDate", dateFormat = "yyyy-MM-dd")
+    MpStatisticsInterfaceSummaryRespVO convert(WxDataCubeInterfaceResult bean);
 }

yudao-module-mp/yudao-module-mp-biz/src/main/java/cn/iocoder/yudao/module/mp/service/account/MpAccountService.java

@@ -7,6 +7,7 @@ import cn.iocoder.yudao.module.mp.controller.admin.account.vo.MpAccountUpdateReq
 import cn.iocoder.yudao.module.mp.dal.dataobject.account.MpAccountDO;
 
 import javax.validation.Valid;
+import java.util.List;
 
 /**
  * 公众号账号 Service 接口
@@ -66,6 +67,13 @@ public interface MpAccountService {
      */
     PageResult<MpAccountDO> getAccountPage(MpAccountPageReqVO pageReqVO);
 
+    /**
+     * 获得公众号账号列表
+     *
+     * @return 公众号账号列表
+     */
+    List<MpAccountDO> getAccountList();
+
     /**
      * 生成公众号账号的二维码
      *

yudao-module-mp/yudao-module-mp-biz/src/main/java/cn/iocoder/yudao/module/mp/service/account/MpAccountServiceImpl.java

@@ -155,6 +155,11 @@ public class MpAccountServiceImpl implements MpAccountService {
         return mpAccountMapper.selectPage(pageReqVO);
     }
 
+    @Override
+    public List<MpAccountDO> getAccountList() {
+        return mpAccountMapper.selectList();
+    }
+
     @Override
     public void generateAccountQrCode(Long id) {
         // 校验存在

yudao-module-mp/yudao-module-mp-biz/src/main/java/cn/iocoder/yudao/module/mp/service/statistics/MpStatisticsService.java

@@ -1,5 +1,6 @@
 package cn.iocoder.yudao.module.mp.service.statistics;
 
+import me.chanjar.weixin.mp.bean.datacube.WxDataCubeInterfaceResult;
 import me.chanjar.weixin.mp.bean.datacube.WxDataCubeMsgResult;
 import me.chanjar.weixin.mp.bean.datacube.WxDataCubeUserCumulate;
 import me.chanjar.weixin.mp.bean.datacube.WxDataCubeUserSummary;
@@ -41,4 +42,13 @@ public interface MpStatisticsService {
      */
     List<WxDataCubeMsgResult> getUpstreamMessage(Long accountId, LocalDateTime[] date);
 
+    /**
+     * 获取接口分析数据
+     *
+     * @param accountId 公众号账号编号
+     * @param date 时间区间
+     * @return 接口分析数据
+     */
+    List<WxDataCubeInterfaceResult> getInterfaceSummary(Long accountId, LocalDateTime[] date);
+
 }

yudao-module-mp/yudao-module-mp-biz/src/main/java/cn/iocoder/yudao/module/mp/service/statistics/MpStatisticsServiceImpl.java

@@ -4,6 +4,7 @@ import cn.hutool.core.date.DateUtil;
 import cn.iocoder.yudao.module.mp.framework.mp.core.MpServiceFactory;
 import me.chanjar.weixin.common.error.WxErrorException;
 import me.chanjar.weixin.mp.api.WxMpService;
+import me.chanjar.weixin.mp.bean.datacube.WxDataCubeInterfaceResult;
 import me.chanjar.weixin.mp.bean.datacube.WxDataCubeMsgResult;
 import me.chanjar.weixin.mp.bean.datacube.WxDataCubeUserCumulate;
 import me.chanjar.weixin.mp.bean.datacube.WxDataCubeUserSummary;
@@ -62,4 +63,15 @@ public class MpStatisticsServiceImpl implements MpStatisticsService {
         }
     }
 
+    @Override
+    public List<WxDataCubeInterfaceResult> getInterfaceSummary(Long accountId, LocalDateTime[] date) {
+        WxMpService mpService = mpServiceFactory.getRequiredMpService(accountId);
+        try {
+            return mpService.getDataCubeService().getInterfaceSummary(
+                    DateUtil.date(date[0]), DateUtil.date(date[1]));
+        } catch (WxErrorException e) {
+            throw exception(STATISTICS_GET_INTERFACE_SUMMARY_FAIL, e.getError().getErrorMsg());
+        }
+    }
+
 }

yudao-module-system/yudao-module-system-biz/src/main/java/cn/iocoder/yudao/module/system/controller/admin/user/vo/user/UserSimpleRespVO.java

@@ -6,7 +6,7 @@ import lombok.AllArgsConstructor;
 import lombok.Data;
 import lombok.NoArgsConstructor;
 
-@ApiModel("用户精简信息 Response VO")
+@ApiModel("管理后台 - 用户精简信息 Response VO")
 @Data
 @NoArgsConstructor
 @AllArgsConstructor

yudao-ui-admin/src/api/mp/account.js

@@ -43,6 +43,14 @@ export function getAccountPage(query) {
   })
 }
 
+// 获取公众号账号精简信息列表
+export function getSimpleAccounts() {
+  return request({
+    url: '/mp/account/list-all-simple',
+    method: 'get',
+  })
+}
+
 // 生成公众号二维码
 export function generateAccountQrCode(id) {
   return request({

yudao-ui-admin/src/api/mp/statistics.js

@@ -26,3 +26,12 @@ export function getUserCumulate(query) {
     params: query
   })
 }
+
+// 获得接口分析数据
+export function getInterfaceSummary(query) {
+  return request({
+    url: '/mp/statistics/interface-summary',
+    method: 'get',
+    params: query
+  })
+}

yudao-ui-admin/src/views/mp/statistics/index.vue

@@ -1,23 +1,22 @@
 <template>
   <div class="app-container">
-    <el-card class="box-card">
+    <!-- 搜索工作栏 -->
-      <div slot="header" class="clearfix">
+    <el-form ref="queryForm" size="small" :inline="true" label-width="68px">
-        <span class="demonstration">时间范围</span>
+      <el-form-item label="公众号" prop="accountId">
+        <el-select v-model="accountId" @change="getSummary">
+          <el-option v-for="item in accounts" :key="parseInt(item.id)" :label="item.name" :value="parseInt(item.id)" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="时间范围" prop="date">
         <el-date-picker v-model="date" style="width: 260px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
                         range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
                         :picker-options="datePickerOptions" :default-time="['00:00:00', '23:59:59']"
-                        @change="changeDate"  >
+                        @change="getSummary">
         </el-date-picker>
-      </div>
+      </el-form-item>
-<!--      <el-row>-->
+    </el-form>
-<!--        <el-col :span="12">-->
-<!--          <div id="interfaceSummaryChart" :style="{width: '80%', height: '500px'}"></div>-->
-<!--        </el-col>-->
-<!--        <el-col :span="12">-->
-<!--          <div id="interfaceSummaryChart2" :style="{width: '80%', height: '500px'}"></div>-->
-<!--        </el-col>-->
-<!--      </el-row>-->
 
+    <!-- 图表 -->
     <el-row>
       <el-col :span="12" class="card-box">
         <el-card>
@@ -49,15 +48,23 @@
           </div>
         </el-card>
       </el-col>
-      </el-row>
+      <el-col :span="12" class="card-box">
+        <el-card>
+          <div slot="header">
+            <span>接口分析数据</span>
+          </div>
+          <div class="el-table el-table--enable-row-hover el-table--medium">
+            <div ref="interfaceSummaryChart" style="height: 420px" />
+          </div>
         </el-card>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <script>
 // 引入基本模板
 import * as echarts from 'echarts'
-
 // 引入柱状图组件
 require('echarts/lib/chart/bar')
 // 引入柱拆线组件
@@ -70,6 +77,7 @@ require('echarts/lib/component/legend')
 import { getInterfaceSummary, getUserSummary, getUserCumulate, getUpstreamMessage} from '@/api/mp/statistics'
 import { datePickerOptions } from "@/utils/constants";
 import {addTime, beginOfDay, betweenDay, endOfDay, formatDate} from "@/utils/dateUtils";
+import {getSimpleAccounts} from "@/api/mp/account";
 
 export default {
   name: 'mpStatistics',
@@ -77,7 +85,8 @@ export default {
     return {
       date : [beginOfDay(new Date(new Date().getTime() - 3600 * 1000 * 24 * 7)), // -7 天
         endOfDay(new Date(new Date().getTime() - 3600 * 1000 * 24))], // -1 天
-      accountId: 1,
+      accountId: undefined,
+      accounts: [],
 
       xAxisDate: [], // X 轴的日期范围
       userSummaryOption: { // 用户增减数据
@@ -170,25 +179,78 @@ export default {
           data: [] // 用户发送条数的数据
         }]
       },
+      interfaceSummaryOption: {  // 接口分析况数据
+        color: ['#67C23A', '#e5323e', '#E6A23C', '#409EFF'],
+        legend: {
+          data: ['被动回复用户消息的次数','失败次数', '最大耗时','总耗时']
+        },
+        tooltip: {},
+        xAxis: {
+          data: [] // X 轴的日期范围
+        },
+        yAxis: {},
+        series: [{
+          name: '被动回复用户消息的次数',
+          type: 'bar',
+          label: {
+            normal: {
+              show: true
+            }
+          },
+          barGap: 0,
+          data: [] // 被动回复用户消息的次数的数据
+        }, {
+          name: '失败次数',
+          type: 'bar',
+          label: {
+            normal: {
+              show: true
+            }
+          },
+          data: [] // 失败次数的数据
+        }, {
+          name: '最大耗时',
+          type: 'bar',
+          label: {
+            normal: {
+              show: true
+            }
+          },
+          data: [] // 最大耗时的数据
+        }, {
+          name: '总耗时',
+          type: 'bar',
+          label: {
+            normal: {
+              show: true
+            }
+          },
+          data: [] // 总耗时的数据
+        }]
+      },
 
       // 静态变量
       datePickerOptions: datePickerOptions,
     }
   },
   created() {
-
+    getSimpleAccounts().then(response => {
-  },
+      this.accounts = response.data;
-  mounted: function() {
+      // 默认选中第一个
-    this.getSummary()
+      if (this.accounts.length > 0) {
-  },
+        this.accountId = this.accounts[0].id;
-  computed: {
+      }
-
+      // 加载数据
+      this.getSummary();
+    })
   },
   methods: {
-    changeDate() {
-      this.getSummary()
-    },
     getSummary() {
+      // 如果没有选中公众号账号，则进行提示。
+      if (!this.accountId) {
+        this.$message.error('未选中公众号，无法统计数据')
+        return false
+      }
       // 必须选择 7 天内，因为公众号有时间跨度限制为 7
       if (betweenDay(this.date[0], this.date[1]) >= 7) {
         this.$message.error('时间间隔 7 天以内，请重新选择')
@@ -204,93 +266,7 @@ export default {
       this.initUserSummaryChart();
       this.initUserCumulateChart();
       this.initUpstreamMessageChart();
-      //
+      this.interfaceSummaryChart();
-      // //获取接口数据
-      // getInterfaceSummary({
-      //   startDate: this.startDate,
-      //   endDate: this.endDate
-      // }).then(response => {
-      //   response.data.forEach((item, index, arr) => {
-      //     this.$set(this.seriesData1, index, item.callbackCount)
-      //     this.$set(this.seriesData2, index, item.maxTimeCost)
-      //     this.$set(this.seriesData3, index, item.totalTimeCost)
-      //     this.$set(this.seriesData4, index, item.failCount)
-      //   })
-      //   // 基于准备好的dom，初始化echarts实例
-      //   let interfaceSummaryChart = echarts.init(document.getElementById('interfaceSummaryChart'))
-      //   // 绘制图表
-      //   interfaceSummaryChart.setOption({
-      //     title: { text: '接口分析数据' },
-      //     color: ['#67C23A', '#e5323e'],
-      //     legend: {
-      //       data: ['被动回复用户消息的次数','失败次数']
-      //     },
-      //     tooltip: {},
-      //     xAxis: {
-      //       data: this.xAxisData
-      //     },
-      //     yAxis: {},
-      //     series: [{
-      //       name: '被动回复用户消息的次数',
-      //       type: 'bar',
-      //       label: {
-      //         normal: {
-      //           show: true
-      //         }
-      //       },
-      //       barGap: 0,
-      //       data: this.seriesData1
-      //     },
-      //       {
-      //         name: '失败次数',
-      //         type: 'bar',
-      //         label: {
-      //           normal: {
-      //             show: true
-      //           }
-      //         },
-      //         data: this.seriesData4
-      //       }]
-      //   })
-      //
-      //   // 基于准备好的dom，初始化echarts实例
-      //   let interfaceSummaryChart2 = echarts.init(document.getElementById('interfaceSummaryChart2'))
-      //   // 绘制图表
-      //   interfaceSummaryChart2.setOption({
-      //     title: { text: '接口分析数据' },
-      //     color: ['#E6A23C', '#409EFF'],
-      //     legend: {
-      //       data: ['最大耗时','总耗时']
-      //     },
-      //     tooltip: {},
-      //     xAxis: {
-      //       data: this.xAxisData
-      //     },
-      //     yAxis: {},
-      //     series: [
-      //       {
-      //         name: '最大耗时',
-      //         type: 'bar',
-      //         label: {
-      //           normal: {
-      //             show: true
-      //           }
-      //         },
-      //         data: this.seriesData2
-      //       },
-      //       {
-      //         name: '总耗时',
-      //         type: 'bar',
-      //         label: {
-      //           normal: {
-      //             show: true
-      //           }
-      //         },
-      //         data: this.seriesData3
-      //       }]
-      //   })
-      // }).catch(() => {
-      // })
     },
     initUserSummaryChart() {
       this.userSummaryOption.xAxis.data = [];
@@ -356,14 +332,31 @@ export default {
         const upstreamMessageChart = echarts.init(this.$refs.upstreamMessageChart);
         upstreamMessageChart.setOption(this.upstreamMessageOption);
       }).catch(() => {})
+    },
+    interfaceSummaryChart() {
+      this.interfaceSummaryOption.xAxis.data = [];
+      this.interfaceSummaryOption.series[0].data = [];
+      this.interfaceSummaryOption.series[1].data = [];
+      this.interfaceSummaryOption.series[2].data = [];
+      this.interfaceSummaryOption.series[3].data = [];
+      // 发起请求
+      getInterfaceSummary({
+        accountId: this.accountId,
+        date: [formatDate(this.date[0], 'yyyy-MM-dd HH:mm:ss'), formatDate(this.date[1], 'yyyy-MM-dd HH:mm:ss'),]
+      }).then(response => {
+        this.interfaceSummaryOption.xAxis.data = this.xAxisDate;
+        // 处理数据
+        response.data.forEach((item, index) => {
+          this.interfaceSummaryOption.series[0].data[index] = item.callbackCount;
+          this.interfaceSummaryOption.series[1].data[index] = item.failCount;
+          this.interfaceSummaryOption.series[2].data[index] = item.maxTimeCost;
+          this.interfaceSummaryOption.series[3].data[index] = item.totalTimeCost;
+        })
+        // 绘制图表
+        const interfaceSummaryChart = echarts.init(this.$refs.interfaceSummaryChart);
+        interfaceSummaryChart.setOption(this.interfaceSummaryOption);
+      }).catch(() => {})
     }
   }
 }
 </script>
-
-<style lang="scss" scoped>
-.demonstration{
-  font-size: 15px;
-  margin-right: 10px;
-}
-</style>