Spring Boot开发实战——echarts图标填充数据

news2024/9/22 13:22:17

echarts模块的导入

先看看成品吧！

在这里插入图片描述

有的图标的数据用了一些计算框架不是直接查数据库所以有点慢。

ok！😃 上正文，接上节Spring boot项目开发实战——（LayUI实现前后端数据交换与定义方法渲染数据）讲解了一般的单个数据的填充，和前端模板layui.laytpl的使用LayUI模板引擎渲染数据，本节将介绍echarts的使用。

layui.use(['layer','echarts','jquery','laytpl'], function () {
    var $ = layui.$,   //jQuery复制
        layer = layui.layer,
        echarts = layui.echarts,
        laytpl = layui.laytpl;
});

注意在使用echart需要配置echart为layui的内部组件，遵循layui的模块化原则。

还不知道如何引入请移步layui 使用 echarts感谢作者！

//初始化容器
var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');
//设置option填入数据
var optionRecords = {
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '邮件营销',
            type: 'line',
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            name: '联盟广告',
            type: 'line',
            data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
            name: '视频广告',
            type: 'line',
            data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
            name: '直接访问',
            type: 'line',
            data: [320, 332, 301, 334, 390, 330, 320]
        },
        {
            name: '搜索引擎',
            type: 'line',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
        }
    ]
};
//
echartsRecords.setOption(optionRecords);

在这里插入图片描述

要先选好echarts图标，关注于数据本身，后期接口返回数据匹配表格数据方便渲染。

echarts官网

下面是我的数据库文件，是个电子消费的数据集（有需要的可以私信我）

在这里插入图片描述

下面来看echarts的option，数据中中返回了5组字典和一个列表，如上图小编的数据库数据结构，这里将通过event_time和brand两个字段，计算最近一年销售最多的4个品牌，联系起来就应该返回4列表和一个时间列表，设计的model层对象如下：

public class MenuTableParam {
    private List<String> xList;

    /**
     * 品牌和销售数据
     */
    private String brandName;
    private List<String> brandSale;

}

设计成这样的意义在于xList返回所有的品牌名，brandName字段返回单个品牌的销售数据，那么多个对象具有一样的数据直接用列表返回。

创建数据库表对象映射：（orm框架为mybatis-plus）

@Data
@TableName("productsales")
public class ProductSales {

    private Integer id;

    private String eventTime;
    private String orderId;
    private String productId;
    private String categoryId;
    private String categoryCode;
    private String brand;
    private Float price;
    private String userId;
    private Integer age;
    private String sex;
    private String local;
    private Long total;

}

mapper层查出品牌和时间信息，价格信息，返回最近一年的消费数据。查询数据库是均可用映射对象接收这样更方便。

 @Select("select brand,count(*) AS total from productsales GROUP BY brand ORDER BY total DESC")
 List<ProductSaleResult> getMenuTable();

接下来是服务层：服务层最重要的是如何返回最简单的数据，使控制器不用在过多处理，如下图：

在这里插入图片描述

@Service
public class MenuTableServiceImpl implements MenuTableService {

    @Autowired
    private ProductMapper productMapper;

    @Autowired
    private JavaSparkContext sc;

    @Override
    public List<MenuTableResult> getMenuTableResult() {
        //获取数据
        List<ProductSaleResult> menuTable = productMapper.getMenuTable();
        //取出前7名 防止出现空字符
        List<ProductSaleResult> productSaleResults = menuTable.subList(0, 8);
        //取出前四名获取最近一年数据
        List<String> brandList = new ArrayList<>();
        for (ProductSaleResult pr:productSaleResults
             ) {
            if (pr.getBrand() !=null && pr.getBrand() !=""){
                brandList.add(pr.getBrand());
            }
        }
        //取出4个季度
        List<String> newbrandList = brandList.subList(0,5);

        List<String> list = productMapper.itemList(newbrandList.get(0)).subList(0,99);
        List<String> list1 = productMapper.itemList(newbrandList.get(1)).subList(0,99);
        List<String> list2 = productMapper.itemList(newbrandList.get(2)).subList(0,99);
        List<String> list3 = productMapper.itemList(newbrandList.get(3)).subList(0,99);

        MenuTableResult result = new MenuTableResult();

        List<MenuTableResult> results = new ArrayList<>();

        MenuTableResult one = new MenuTableResult();
        one.setBrandName(newbrandList.get(0));
        one.setBrandSale(list);

        MenuTableResult two = new MenuTableResult();
        two.setBrandName(newbrandList.get(1));
        two.setBrandSale(list1);

        MenuTableResult three = new MenuTableResult();
        three.setBrandName(newbrandList.get(2));
        three.setBrandSale(list2);

        MenuTableResult four = new MenuTableResult();
        four.setBrandName(newbrandList.get(3));
        four.setBrandSale(list3);
        List<String> list4 = productMapper.timeList().subList(0, 99);

        one.setXList(list4);
        one.setBrandList(brandList.subList(0,4));

        results.add(one);results.add(two);results.add(three);results.add(four);

        return results;
    }
}

服务层使用spark的框架进行了一些计算，spark的使用会在后续更新出来，不要关注这个代码本身，这点直接掠过即可，要关注返回的数据的过程也就是构建4个MenuTableResult。每个对象都会setBrandName和setBrandSale，最后用数组包裹就可以通过索引获取了。

service的数据构造也使controller控制器更为简单的返回：

@RestController
@RequestMapping("/product")
public class MenuTableController {

    @Autowired
    private MenuTableService menuTableService;
    @CrossOrigin
    @GetMapping("/menuTable")
    public List<MenuTableResult> getMenuTable(){
        List<MenuTableResult> menuTableResult = menuTableService.getMenuTableResult();
        return menuTableResult;
    }
    
}

如下返回的数据：

在这里插入图片描述

数据在经过上述构造后是的渲染更加容易

/**
 * 报表功能
 */
var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');
 $.ajax({
        type: "GET",
        url: "http://localhost:8080/product/menuTable",
        data: null,
        //dataType: "json",
        success: function (data) {
            //console.log(data)
            
            
            var optionRecords = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: data[0].brandList
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: data[0].xList
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: data[0].brandName,
                        type: 'line',
                        data: data[0].brandSale

                    },
                    {
                        name: data[1].brandName,
                        type: 'line',
                        data: data[1].brandSale
                    },
                    {
                        name: data[2].brandName,
                        type: 'line',
                        data: data[2].brandSale
                    },
                    {
                        name: data[3].brandName,
                        type: 'line',
                        data: data[3].brandSale
                    }
                ]
            };
            echartsRecords.setOption(optionRecords);
            
        }
        

    })

在这里插入图片描述
数据直接通过索引渲染到echarts图标上。

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/343113.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

百度版本gactgpt即将来临，gpt人工智能机器横空出世

百度版本gactgpt即将来临，gpt人工智能机器横空出世

百度版本gactgpt即将来临&#xff0c;gpt人工智能机器横空出世&#xff0c;“一言”为定&#xff01;百度版ChatGPT确认&#xff01;李彦宏OKR曝光&#xff0c;率先应用于收索业务 gactCBT 大获&#xff0c;当下极有可能成为人工智能的 iPhone 时刻。为了在这场人工智能竞赛中…
阅读更多...
Redis面试知识

Redis面试知识

概述 Redis 是速度非常快的非关系型（NoSQL）内存键值数据库，可以存储键和五种不同类型的值之间的映射。 键的类型只能为字符串，值支持五种数据类型：字符串、列表、集合、散列表、有序集合。 Redis 支持很多特性，例如将内存中的数据持久化到硬盘中，使用复制来扩展读性能…
阅读更多...
解决workman部署到Linux环境无法启动和连接的问题（结合TP6框架）

解决workman部署到Linux环境无法启动和连接的问题（结合TP6框架）

0、检查Linux是否满足workman的环境要求 curl -Ss www.workerman.net | php看要求的环境是否都是ok。 如果出现&#xff1a; workman Call to undefined function stream_socket_server()解决方案&#xff1a;去PHP的配置文件查找disabled_function&#xff0c;去掉stream_s…
阅读更多...
SAP NetWeaver版本和SAP Kernel版本的确定

SAP NetWeaver版本和SAP Kernel版本的确定

SAP NetWeaver&#xff08;SAP NW&#xff09;描述了用于“业务启用”的所有软件和服务。SAP业务套件&#xff08;如ERP中央组件&#xff08;ECC&#xff09;或供应商关系管理&#xff08;SRM&#xff09;&#xff09;包含该特定业务解决方案的软件组件。 以下是SAP NetWeaver…
阅读更多...
el-table+selet+pagination回显触发selection-change事件，打印的数组出现数据重复问题

el-table+selet+pagination回显触发selection-change事件，打印的数组出现数据重复问题

目录 一、应用场景 二、问题描述 三、原因分析* 四、解决办法 一、应用场景 1】vue项目 2】el-conversation组件 3】使用el-table组件 4】使用type"select"属性 5】使用selection-change事件 6】使用toggleRowSelection方法 7】混合使用el-pagination组件 二…
阅读更多...
《论文阅读》Towards Emotional Support Dialog Systems

《论文阅读》Towards Emotional Support Dialog Systems

《论文阅读》Towards Emotional Support Dialog Systems 前言简介思路出发点相关知识区别EC、ER和ESCEmotional Support Conversation任务定义ESC框架数据集总结前言 你是否也对于理解论文存在困惑？ 你是否也像我之前搜索论文解读，得到只是中文翻译的解读后感到失望？ 小白…
阅读更多...
页表与线程学习

页表与线程学习

线程 线程(TCB)是进程(PCB)的基本单位。 linux认为没有进程&#xff0c;没有线程在概念上的区分&#xff0c;只有一个叫做执行流。这句话指明了都是PCB。 Linux的线程是用进程(PCB)模拟的. 这样做的好处 不用在单独设计TCB。不用维护TCB和PCB之间的关系。不用单独编写任何调度…
阅读更多...
Day888.MySQL是怎么保证主备一致的 -MySQL实战

Day888.MySQL是怎么保证主备一致的 -MySQL实战

MySQL是怎么保证主备一致的 Hi&#xff0c;我是阿昌&#xff0c;今天学习记录的是关于MySQL是怎么保证主备一致的内容。 MySQL 能够成为现下最流行的开源数据库&#xff0c;binlog 功不可没。 在最开始&#xff0c;MySQL 是以容易学习和方便的高可用架构&#xff0c;被开发人…
阅读更多...
从0到1一步一步玩转openEuler--13 openEuler用户组管理

从0到1一步一步玩转openEuler--13 openEuler用户组管理

文章目录13.1 创建用户组13.1.1 groupadd命令13.1.2 用户组信息文件13.1.3 创建用户组实例13.2 修改用户组13.2.1 修改GID13.2.2 修改用户组名13.3 删除用户组13.4 将用户加入用户组或从用户组中移除13.5 切换用户组在Linux中&#xff0c;每个普通用户都有一个账户&#xff0c;…
阅读更多...
集群使用——资源管理和租户创建

集群使用——资源管理和租户创建

概述 OceanBase 数据库是多租户的分布式数据库&#xff0c;租户使用的资源建立在资源池上。资源池包含了资源单元&#xff0c;而资源单元则规定了具体资源的量化&#xff08;如 CPU、Memory、Disk_Size 和 IOPS 等&#xff09;。 创建租户前&#xff0c;必须规定租户使用的资源…
阅读更多...
Java 面向对象基础

Java 面向对象基础

文章目录一、类和对象1. 类的定义2. 对象的使用二、对象内存图三、成员变量和局部变量四、封装1. private 关键字2. this 关键字五、构造方法六、标准类制作一、类和对象 在此之前&#xff0c;我们先了解两个概念&#xff0c;对象和类。 万物皆对象&#xff0c;客观存在的事物…
阅读更多...
C语言基础应用（一）数据类型

C语言基础应用（一）数据类型

一、数据类型 1、数据类型的分类 2、常量 常量是固定值&#xff0c;在程序执行期间不会改变。这些固定的值&#xff0c;又叫做字面量。 2.1 常量举例 // 整型常量 举例 /*718 十进制0213 八进制0x4b 十六进制30u 无符号整数30l 长整型30ul 无符号长整型*/ // 浮点常量…
阅读更多...
LoadRunner安装教程

LoadRunner安装教程

备注&#xff1a;电脑最好安装有IE浏览器或者360极速版浏览器 一、下载安装包 提前下载安装文件&#xff0c;必须下载。 链接: https://pan.baidu.com/s/1blFiMIJcoE8s3uVhAxdzdA?pwdqhpt 提取码: qhpt 包含的文件有&#xff1a; 二、安装loadrunner 注意&#xff0c;以…
阅读更多...
虚拟机CPU占用100%问题记录

虚拟机CPU占用100%问题记录

项目场景 kswapd0占用CPU过高&#xff0c;严重影响服务器及虚拟机的使用。 原因分析 kswapd0 是 Linux 系统虚拟内存管理中负责换页的进程。 系统物理内存不足时&#xff0c;kswapd0 会频繁的进行换页操作&#xff08;使用swap分区与内存换页操作交换数据&#xff09;&…
阅读更多...
java手机短信验证，并存入redis中，验证码时效5分钟

java手机短信验证，并存入redis中，验证码时效5分钟

目录 1、注册发送短信账号一个账号 2、打开虚拟机&#xff0c;将redis服务端打开 3、创建springboot工程&#xff0c;导入相关依赖 4、写yml配置 5、创建controller层&#xff0c;并创建controller类 6、创建service层&#xff0c;并创建service类 7、创建工具类&#x…
阅读更多...
STL——priority_queue

STL——priority_queue

一、priority_queue介绍及使用 1.priority_queue文档介绍 &#xff08;1&#xff09;优先队列是一种容器适配器&#xff0c;根据严格的弱排序标准&#xff0c;它的第一个元素总是它所包含的元素中最大的。 &#xff08;2&#xff09;此上下文类似与堆&#xff0c;在堆中可以…
阅读更多...
树与图中的dfs和bfs—— AcWing 846. 树的重心 AcWing 847. 图中点的层次

树与图中的dfs和bfs—— AcWing 846. 树的重心 AcWing 847. 图中点的层次

一、AcWing 846. 树的重心1.1题目1.2思路分析题意&#xff1a;什么是树的重心&#xff1f;树的重心是指&#xff0c;删除某个结点后剩下的最大连通子树的结点数目最小&#xff0c;如下图是根据样列生成的树&#xff0c;若删除结点1&#xff0c;则剩下三个子树最大的是中间那颗结…
阅读更多...
C++的 new 和 delete

C++的 new 和 delete

文章目录一、new 和 delete 的使用二、operator new 和 operator delete 函数三、new 和 delete 的实现原理四、申请空间和释放空间应配套使用五、定位 new 表达式六、malloc/free 和 new/delete 的区别C语言的动态内存管理函数(malloc、calloc、realloc、free) 虽然可以继续在…
阅读更多...
Python for 循环语句

Python for 循环语句

Python for 循环语句Python for循环可以遍历任何序列的项目&#xff0c;如一个列表或者一个字符串。语法&#xff1a;for循环的语法格式如下&#xff1a;for iterating_var in sequence:statements(s)流程图&#xff1a;实例&#xff1a;实例#!/usr/bin/python# -*- coding: UT…
阅读更多...
Hudi-简介和编译安装

Hudi-简介和编译安装

简介 简介 Apache Hudi&#xff08;Hadoop Upserts Delete and Incremental&#xff09;是下一代流数据湖平台。Apache Hudi将核心仓库和数据库功能直接引入数据湖。Hudi提供了表、事务、高效的upserts/delete、高级索引、流摄取服务、数据集群/压缩优化和并发&#xff0c;同…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023