springboot+echarts +mysql制作数据可视化大屏（四图）_百度小程序

您的位置：上海毫米网络优化公司 > 小程序 > 百度小程序 >

一、数据源

1）可以使用自己的MySQL数据库；

2）使用我提供的数据。（要数据私信/留言——>留下邮箱即可）

二、所需工具

MySQL、IDEA、jdk1.8、Maven等等，总之编写工具要准备好，环境要搭建好

三、项目框架搭建

参考我博客的项目框架搭建，从3.1看到4.3即可springboot+mybatis+echarts +mysql制作数据可视化大屏_spring + 可视化大屏_一个人的牛牛的博客-CSDN博客

四、代码编写

代码简单，后端代码都写在一起了，没有区分controller等等，前端也是一样，没有单独写js等等。

4.1 区域销量统计条形图

4.1.1 后端

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@RestController
public class Big1 {
    private final JdbcTemplate jdbcTemplate;
    @Autowired
    public Big1(JdbcTemplate jdbcTemplate) {
        this.jdbcTemplate = jdbcTemplate;
    }
    @GetMapping("/chart-data")
    public Map getChartData() {
        String query = "SELECT region_name, COUNT(*) AS count FROM ads_area_topic GROUP BY region_name";
        List> result = jdbcTemplate.queryForList(query);
        List labels = new ArrayList<>();
        List values = new ArrayList<>();
        for (Map row : result) {
            String regionName = (String) row.get("region_name");
            Integer count = ((Number) row.get("count")).intValue();
            labels.add(regionName);
            values.add(count);
        }
        Map data = new HashMap<>();
        data.put("labels", labels);
        data.put("values", values);
        return data;
    }
}

验证接口：运行项目，浏览器访问http://localhost:8080/chart-data

4.1.2 前端




    区域销量统计

验证页面：运行项目，浏览器访问http://localhost:8080/big1.html

4.2 订单金额折线图

4.2.1 后端

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@RestController
public class Big2Controller {
    private final JdbcTemplate jdbcTemplate;
    @Autowired
    public Big2Controller(JdbcTemplate jdbcTemplate) {
        this.jdbcTemplate = jdbcTemplate;
    }
    @GetMapping("/chart-data2")
    public Map getChartData() {
        String query = "SELECT dt, order_amount FROM ads_order_daycount";
        List> result = jdbcTemplate.queryForList(query);
        List labels = new ArrayList<>();
        List values = new ArrayList<>();
        for (Map row : result) {
            String dt = row.get("dt").toString();
            Integer orderAmount = ((Number) row.get("order_amount")).intValue();
            labels.add(dt);
            values.add(orderAmount);
        }
        Map data = new HashMap<>();
        data.put("labels", labels);
        data.put("values", values);
        return data;
    }
}

验证接口：运行项目，浏览器访问http://localhost:8080/chart-data2

4.2.2 前端




  
  折线图

验证页面：运行项目，浏览器访问http://localhost:8080/big2.html

4.3 平均支付时间统计

4.3.1 后端

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@RestController
public class Big3Controller {
    private final JdbcTemplate jdbcTemplate;
    @Autowired
    public Big3Controller(JdbcTemplate jdbcTemplate) {
        this.jdbcTemplate = jdbcTemplate;
    }
    @GetMapping("/chart-data3")
    public Map getChartData() {
        String query = "SELECT dt, payment_avg_time FROM ads_payment_daycount";
        List> result = jdbcTemplate.queryForList(query);
        List labels = new ArrayList<>();
        List values = new ArrayList<>();
        for (Map row : result) {
            String dt = row.get("dt").toString();
            Integer paymentAvgTime = ((Number) row.get("payment_avg_time")).intValue();
            labels.add(dt);
            values.add(paymentAvgTime);
        }
        Map data = new HashMap<>();
        data.put("labels", labels);
        data.put("values", values);
        return data;
    }
}

验证接口：运行项目，浏览器访问http://localhost:8080/chart-data3

4.3.2 前端




  平均支付时间统计

验证页面：运行项目，浏览器访问http://localhost:8080/big3.html

4.4 订单金额统计

4.4.1 后端

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@RestController
public class Big4Controller {
    private final JdbcTemplate jdbcTemplate;
    @Autowired
    public Big4Controller(JdbcTemplate jdbcTemplate) {
        this.jdbcTemplate = jdbcTemplate;
    }
    @GetMapping("/chart-data4")
    public Map getChartData() {
        String query = "SELECT dt, order_amount FROM ads_payment_daycount";
        List> result = jdbcTemplate.queryForList(query);
        List labels = new ArrayList<>();
        List values = new ArrayList<>();
        for (Map row : result) {
            String dt = row.get("dt").toString();
            Integer orderAmount = ((Number) row.get("order_amount")).intValue();
            labels.add(dt);
            values.add(orderAmount);
        }
        Map data = new HashMap<>();
        data.put("labels", labels);
        data.put("values", values);
        return data;
    }
}

验证接口：运行项目，浏览器访问http://localhost:8080/chart-data4

4.4.2 前端




  订单金额统计

验证页面：运行项目，浏览器访问http://localhost:8080/big4.html

五、大屏编写




    
    大屏可视化
    


    销售数据平面一览大屏

运行项目，浏览器访问http://localhost:8080/large%20screen.html

springboot+echarts +mysql制作数据可视化大屏（四图）,第2张

注：http://localhost:8080/加上HTML的文件名都能够查看相应的图！

要码源的私聊/评论留下邮箱号，压缩包包括项目源码、数据sql文件，readme.txt。

声明：作品仅可作学习使用。

上一篇：华为云云耀云服务器L实例评测｜2核2G跑mysql性能测试

下一篇：SpringBoot之logback-spring.xml详细配置