zoukankan      html  css  js  c++  java
  • 前后端分离开发vue+Elementyui+abpcorewebapi商城管理系统(十三)报表开发

    功能分析

    效果图

    接口定义

    代码reports/Report.vue

    <template>
      <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>数据统计</el-breadcrumb-item>
          <el-breadcrumb-item>数据报表</el-breadcrumb-item>
        </el-breadcrumb>
    
        <el-card>
          <div id="main" style=" 750px;height:400px;"></div>
        </el-card>
      </div>
    </template>
    
    <script>
    import echarts from "echarts";
    import _ from "lodash";
    
    export default {
      data() {
        return {
          option: {
            title: {
              text: "用户来源"
            },
            tooltip: {
              trigger:'axis',
              axisPointer:{
                type:'cross',
                label:{
                  backgroundColor:'#E9EEF3'
                }
              }
            },
            grid: {
              left:'3%',
              right:'4%',
              bottom:'3%',
              containLabel:true
            },
            xAxis: [
              {
                boundaryGap:false
              }
            ],
            yAxis: [
              {
                type:'value'
              }
            ]
          }
        };
      },
      async mounted() {
        // 基于准备好的dom,初始化echarts实例
        const myChart = echarts.init(document.getElementById("main"));
    
        const { data } = await this.$http.get("reports/type/1");
        if (data.meta.status !== 200) {
          return this.$message.error(data.meta.msg);
        }
        // 指定图表的配置项和数据
        // 使用刚指定的配置项和数据显示图表。
        const result = _.merge(data.data, this.option);
        myChart.setOption(result);
      }
    };
    </script>
    
    <style lang="less" scoped></style>
  • 相关阅读:
    OSError: cannot open resource(pillow错误处理)
    boost 库中文教程
    博客案例
    requests模块
    浅析Python中的struct模块
    面试基础知识点总结
    ant安装、环境变量配置及验证
    TestNG学习-001-基础理论知识
    selenium 常见面试题以及答案
    HTML5
  • 原文地址:https://www.cnblogs.com/xiewenyu/p/13110605.html
Copyright © 2011-2022 走看看