Apache Echarts介绍与入门

news2024/12/24 0:23:51

介绍

Apache ECharts 是一款基于 Javascript 的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。
官网地址：https://echarts.apache.org/zh/index.html

入门案例

Apache Echarts官方提供的快速入门：https://echarts.apache.org/handbook/zh/get-started/

入门案例的html代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="echarts.js"></script>
  </head>
  <body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    </script>
  </body>
</html>

结果如图：
在这里插入图片描述
总结：使用Echarts，重点在于研究当前图表所需的数据格式。通常是需要后端提供符合格式要求的动态数据，然后响应给前端来展示图表。

应用

使用Apache Echarts 可视化商店的营业额，业务规则：

  • 营业额指订单状态为已完成的订单金额合计
  • 基于可视化报表的折线图展示营业额数据，X轴为日期，Y轴为营业额
  • 根据时间选择区间，展示每天的营业额数据

接口设计：
在这里插入图片描述
根据接口定义设计对应的VO：
在这里插入图片描述
Controller相关代码：

package com.sky.controller.admin;

import com.sky.result.Result;
import com.sky.service.ReportService;
import com.sky.vo.TurnoverReportVO;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.format.annotation.DateTimeFormat;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.time.LocalDate;
import java.time.LocalDateTime;

/**
 * ClassName: ReportController
 * PackageName: com.sky.controller.admin
 * Description: 数据统计相关接口
 *
 * @Author Xiyan Zhong
 * @Create 2024/3/1 上午11:19
 * @Version 1.0
 */
@RestController
@RequestMapping("/admin/report")
@Api(tags = "数据统计相关接口")
@Slf4j
public class ReportController {

    @Autowired
    private ReportService reportService;

    /**
     * 营业额统计
     * @param begin
     * @param end
     * @return
     */
    @GetMapping("/turnoverStatistics")
    @ApiOperation("营业额统计")
    public Result<TurnoverReportVO> turnoverStatistics(
            @DateTimeFormat(pattern = "yyyy-MM-dd") LocalDate begin,
            @DateTimeFormat(pattern = "yyyy-MM-dd") LocalDate end){
        log.info("营业额统计：{}，{}",begin,end);
        return Result.success(reportService.getTurnoverStatistics(begin,end));
    }
}

Service接口：

package com.sky.service;

import com.sky.vo.TurnoverReportVO;

import java.time.LocalDate;

/**
 * ClassName: ReportService
 * PackageName: com.sky.service
 * Description:
 *
 * @Author Xiyan Zhong
 * @Create 2024/3/1 上午11:27
 * @Version 1.0
 */

public interface ReportService {

    /**
     * 统计指定区间内的营业额数据
     * @param begin
     * @param end
     * @return
     */
    TurnoverReportVO getTurnoverStatistics(LocalDate begin, LocalDate end);
}

Service实现类：

package com.sky.service.impl;

import com.sky.entity.Orders;
import com.sky.mapper.OrderMapper;
import com.sky.service.ReportService;
import com.sky.vo.TurnoverReportVO;
import lombok.extern.slf4j.Slf4j;
import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.time.LocalDate;
import java.time.LocalDateTime;
import java.time.LocalTime;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * ClassName: ReportServiceImpl
 * PackageName: com.sky.service.impl
 * Description:
 *
 * @Author Xiyan Zhong
 * @Create 2024/3/1 上午11:30
 * @Version 1.0
 */

@Service
@Slf4j
public class ReportServiceImpl implements ReportService {

    @Autowired
    private OrderMapper orderMapper;

    /**
     * 统计指定区间内的营业额数据
     * @param begin
     * @param end
     * @return
     */
    @Override
    public TurnoverReportVO getTurnoverStatistics(LocalDate begin, LocalDate end) {
        // 当前集合用于存放从begin到end范围内的每天日期
        List<LocalDate> dateList = new ArrayList<>();

        dateList.add(begin);
        while (!begin.equals(end)){
            // 日期计算，计算指定日期的后一天对应的日期
            begin = begin.plusDays(1);
            dateList.add(begin);
        }

        // 存放每天的营业额
        List<Double> turnoverList = new ArrayList<>();
        for (LocalDate date : dateList) {
            // 查询date日期对应的营业额数据，营业额是指：状态为“已完成”的订单金额合计
            LocalDateTime beginTime = LocalDateTime.of(date, LocalTime.MIN);
            LocalDateTime endTime = LocalDateTime.of(date, LocalTime.MAX);

            // select sum(amount) from orders where order_time > beginTime and order_time < endTime and status = 5
            Map map = new HashMap();
            map.put("begin",beginTime);
            map.put("end",endTime);
            map.put("status", Orders.COMPLETED);
            Double turnover = orderMapper.sumByMap(map);
            turnover = turnover == null ? 0.0 :turnover;
            turnoverList.add(turnover);
        }

        // 封装结果并返回
        return TurnoverReportVO
                .builder()
                .dateList(StringUtils.join(dateList,","))
                .turnoverList(StringUtils.join(turnoverList,","))
                .build();
    }
}

Mapper相关代码：

package com.sky.mapper;

import java.util.Map;

/**
 * ClassName: OrderMapper
 * PackageName: com.sky.mapper
 * Description:
 *
 * @Author Xiyan Zhong
 * @Create 2024/1/5 上午9:48
 * @Version 1.0
 */
@Mapper
public interface OrderMapper {

    /**
     * 根据动态条件统计营业额数据
     * @param map
     * @return
     */
    Double sumByMap(Map map);
}

通过xml实现数据库的查询：

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.sky.mapper.OrderMapper">

    <select id="sumByMap" resultType="java.lang.Double">
        select sum(amount) from orders
        <where>
            <if test="begin != null"> and order_time &gt;= #{begin}</if>
            <if test="end != null"> and order_time &lt;= #{end}</if>
            <if test="status != null"> and status = #{status}</if>
        </where>
    </select>
</mapper>

实现效果：
在这里插入图片描述

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

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

相关文章

大数据智能化-长视频领域

大数据智能化-长视频领域

随着数字化时代的到来&#xff0c;长视频领域的发展迎来了新的机遇和挑战。在这一背景下&#xff0c;大数据智能化技术的应用成为长视频行业提升用户体验、优化运营管理的重要手段之一。本文将从优爱腾3大长视频背景需求出发&#xff0c;分析静态资源CDN、视频文件存储与分发、…
阅读更多...
midjourney提示词语法

midjourney提示词语法

更高级的提示可以包括一个或多个图像URL、多个文本短语和一个或更多个参数 Image Prompts 可以将图像URL添加到提示中&#xff0c;以影响最终结果的样式和内容。图像URL总是位于提示的前面。 https://docs.midjourney.com/image-prompts Text Prompt 要生成的图像的文本描述。…
阅读更多...
[法规规划]国家数据局局长刘烈宏《激活数据要素价值》演讲要点解析

[法规规划]国家数据局局长刘烈宏《激活数据要素价值》演讲要点解析

国家数据局党组书记、局长刘烈宏在北大光华论坛上发表了题为《激活数据要素价值》的演讲&#xff0c;当时曾极大推动了市场热度&#xff0c;引发了行业思考。现在演讲过去了一段时间&#xff0c;但是温故而知新&#xff0c;我们不妨结合演讲之后的市场反应&#xff0c;回顾一下…
阅读更多...
Redis的主从搭建

Redis的主从搭建

1.准备两台机器&#xff0c;安装好redis 2.修改从服务器的redis配置 slaveof <masterip> <masterport>两个参数 masterip 主的ip 主的端口号 masterport 3. 启动redis 1.先启动主机redis 2.再启用从机redis 主机redis日志打印 从机redis 日志打印
阅读更多...
有序数组二分查找

有序数组二分查找

#include <stdio.h>//二分查找 int binary_search(int arr[],int k,int n){int low 0;int high n - 1;int mid 0;while(low < high){mid (low high) / 2;if(arr[mid] > k)high mid - 1;else if(arr[mid] < k)low mid 1;else return mid;}if(low > hi…
阅读更多...
Tomcat服务部署、优化

Tomcat服务部署、优化

一 Tomcat的基本介绍 Tomcat概念 Tomcat 服务器是一个免费的开放源代码的Web 应用服务器&#xff0c;属于轻量级应用服务器&#xff0c;在中小型系统和并发访问用户不是很多的场合下被普遍使用&#xff0c;是开发和调试 JSP 程序的首选。 当在一台机器上配置好Apache 服务器…
阅读更多...
Ubuntu Mysql Innodb cluster集群搭建+MaxScale负载均衡（读写分离）

Ubuntu Mysql Innodb cluster集群搭建+MaxScale负载均衡（读写分离）

Ubuntu系统版本 20.04.3 LTS (Focal Fossa) 、64位系统。 cat /etc/os-release查看Ubuntu系统是32位还是64位 uname -m如果显示“i686”，则表示安装了32位操作系统。如果显示“x86_64”，则表示安装了64位操作系统。 一、安装MySql 参考： https://blog.csdn.net/qq_3712…
阅读更多...
【Datawhale组队学习：Sora原理与技术实战】Sora技术原理

【Datawhale组队学习：Sora原理与技术实战】Sora技术原理

Sora能力边界探索 最大支持60秒高清视频生成&#xff0c;以及基于已有短视频的前后扩展&#xff0c;同时保持人物/场景的高度一致性如奶茶般丝滑过渡的视频融合能力同一场景的多角度/镜头的生成能力具有动态摄像机运动的视频。随着摄像机的移动和旋转&#xff0c;人和其 他场景…
阅读更多...
JVM相关面试题（2024大厂高频面试题系列）

JVM相关面试题（2024大厂高频面试题系列）

一、JVM的组成 1、JVM由哪些部分组成&#xff0c;运行流程是什么&#xff1f; 回答&#xff1a;在JVM中共有四大部分&#xff0c;分别是Class Loader&#xff08;类加载器&#xff09;、Runtime Data Area&#xff08;运行时数据区&#xff0c;内存分区&#xff09;、Execut…
阅读更多...
mybatisPlus中 Mapper层以及Service层的方法 整理分类 以及代码实操

mybatisPlus中 Mapper层以及Service层的方法 整理分类 以及代码实操

MyBatis-Plus是一个基于MyBatis的增强工具&#xff0c;旨在简化开发、提高效率。它提供了通用的mapper和service&#xff0c;可以在不编写任何SQL语句的情况下&#xff0c;快速实现对单表的CRUD、批量、逻辑删除、分页等操作。 功能代码测试前提&#xff1a; 需要对mybatisPl…
阅读更多...
【重要公告】对BSV警报系统AS的释义

【重要公告】对BSV警报系统AS的释义

​​发表时间&#xff1a;2024年2月15日 由BSV区块链协会开发并管理的BSV警报系统&#xff08;Alert System&#xff0c;以下简称“AS”&#xff09;是BSV网络的重要组件。它是一个复杂的系统&#xff0c;主要职能是在BSV区块链网络内发布信息。这些信息通常与网络访问规则NAR相…
阅读更多...
java数据结构与算法刷题-----LeetCode572. 另一棵树的子树（经典题，树字符串化KMP）

java数据结构与算法刷题-----LeetCode572. 另一棵树的子树（经典题，树字符串化KMP）

java数据结构与算法刷题目录&#xff08;剑指Offer、LeetCode、ACM&#xff09;-----主目录-----持续更新(进不去说明我没写完)&#xff1a;https://blog.csdn.net/grd_java/article/details/123063846 文章目录 1. 暴力求解&#xff0c;深度优先2. KMP算法进行串匹配 1. 暴力求…
阅读更多...
Spring-web-Mvc

Spring-web-Mvc

文章目录 目录 文章目录 前言 1 . 什么是Spring MVC? 1.1 MVC定义 1.2 主要作用 2. Spring MVC 接受响应数据 2.1 RequestMapping注解配置访问路径 2.2 请求 2.2.1 传递单个参数 2.2.2 传递多个参数 2.2.3 传递对象 2.2.4 后端参数重命名&#xff08;后端参数映射…
阅读更多...
Linux技巧|centos7|重新认识和学习egrep和grep命令

Linux技巧|centos7|重新认识和学习egrep和grep命令

前言&#xff1a; 相信提高文本检索工具&#xff0c;大家脑海里肯定有很多工具会自动跳出来&#xff0c;比如&#xff0c;grep&#xff0c;egrep&#xff0c;sed&#xff0c;cat&#xff0c;more&#xff0c;less&#xff0c;cut&#xff0c;awk&#xff0c;vim&#xff0c;vi…
阅读更多...
Find My扫地机器人|苹果Find My技术与机器人结合，智能防丢，全球定位

Find My扫地机器人|苹果Find My技术与机器人结合，智能防丢，全球定位

扫地机器人又称自动打扫机、智能吸尘、机器人吸尘器等&#xff0c;是智能家电的一种&#xff0c;能凭借人工智能&#xff0c;自动在房间内完成地板清理工作。一般采用刷扫和真空方式&#xff0c;将地面杂物先吸纳进入自身的垃圾收纳盒&#xff0c;从而完成地面清理的功能。现今…
阅读更多...
【Vue3】CSS 新特性

【Vue3】CSS 新特性

:slotted <template> <!-- App.vue--><Son ><div class"a">我要插入了</div></Son> </template><script setup lang"ts"> import Son from ./components/Son.vue </script><style></sty…
阅读更多...
最佳实践：Websocket 长连接状态如何保持

最佳实践：Websocket 长连接状态如何保持

WebSocket 是一种支持通过单个 TCP 连接进行全双工通信的协议&#xff0c;相较于传统的 HTTP 协议&#xff0c;它更适合需要实时交互的应用场景。此协议在现代 Web 应用中扮演着至关重要的角色&#xff0c;尤其是在需要实时更新和通信的场合下维持持久连接。本文将探讨 WebSock…
阅读更多...
Windows系统误删文件恢复

Windows系统误删文件恢复

最近很多用户反馈误删文件的场景比较多.下面华仔将讲解数据恢复的原理和过程.以及一些注意事项。 建议的数据恢复软件 1.EaseUS Data Recovery Wizard(易我数据恢复)需要断网使用 2.Wondershare Recoverit(万兴数据恢复)&#xff0c; Windows系统删除文件原理&#xff1a;如果是…
阅读更多...
每周一算法：双向广搜

每周一算法：双向广搜

题目链接 字符串变换 题目描述 已知有两个字串 A , B A,B A,B&#xff0c;及一组字串变换的规则&#xff08;至多 6 6 6个规则&#xff09;: A 1 → B 1 A_1→B_1 A1​→B1​ A 2 → B 2 A_2→B_2 A2​→B2​ … 规则的含义为&#xff1a;在 A A A中的子串 A 1 A_1 A1​…
阅读更多...
利用FFMPEG 将RTSP流的音频G711 转码为AAC 并 推流到RTMP

利用FFMPEG 将RTSP流的音频G711 转码为AAC 并 推流到RTMP

之前我们的视频转码项目中 是没有加入音频的 现在 需要加入音频 &#xff0c;由于RTMP只支持AAC的 音频流 而有的RTSP流的音频编码并不是AAC 大多数都是G711编码 还分为G711A 和G711U 之前用ffmpeg命令行可以直接 完成转码 并推送到RTMP 但是考虑到无法获取更详细的状…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023