SpringBoot dataJpa + thymeleaf +Mysql+ echarts 数据展示

最新推荐文章于 2024-05-13 00:45:28 发布

代码忘烦恼

最新推荐文章于 2024-05-13 00:45:28 发布

阅读量3k

点赞数 4

分类专栏： SpringBoot 文章标签： SpringBoot echarts Java 图表

本文链接：https://blog.csdn.net/qwe86314/article/details/84302302

版权

SpringBoot 专栏收录该内容

15 篇文章 7 订阅

订阅专栏

1.网上有很多的代码说怎么用,但是这里我还是想分享一下我的做法,非常的简单，通常去echarts官方的实例,会看到明确要求的数据格式。如下图所示:
在这里插入啊图片描述
从上图不难看出这是一对键值对的方式，如何去封装这些数据常见的方式就是用Map去封装 ,然后在用Json将封装好的Map进行Json转换。最后用model.attribute 进去。到页面就可以使用[[${xxxxx}]]来取值，thymeleaf支持这种取值方式。

废话不多说了。下面直接开始上代码(这里我已饼图来做实例)
第一步创建一个通用保存数据的bean,代码如下:

/**
 * 填充数据格式
 */
public class echarts {

    private Long value;
    private String  name;



    public echarts() {
    }

    public echarts(Long value, String name) {
        this.value = value;
        this.name = name;
    }

    public Long getValue() {
        return value;
    }

    public void setValue(Long value) {
        this.value = value;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    @Override
    public String toString() {
        return "echarts{" +
                "value=" + value +
                ", name='" + name + '\'' +
                '}';
    }

第二步你需要数据查询出来:

     @Query(value = "select count (u.type) from UserMessageInfo u where u.type =?1")
       Long findByType(String type);

这里的SQL我是统计个数默认查询出来只有value

Service实现:

     Long findByType(String type);

ServiceImpl:

    @Autowired
    private SchoolUserInfoRepository echartsRepository;
    @Override
        public Long findByType(String type) {

        return echartsRepository.findByType(type);
    }

第三部操作Controller:

Controller

    public class echartsController {
    
        @Autowired
        private echartsService echartsService;
        
        @Autowired
        private Gson gson;
    
        @RequestMapping(value = "/getEcharts")
        public String getResult() {
    
            return "admin/echarts_count";
    
        }
    
        @GetMapping("/getData")
        @ResponseBody
        public List<echarts> getData(Model model) {
    
            List<echarts> results = new ArrayList<echarts>();
            echarts echart = new echarts();
            echarts echart2 = new echarts();
            echart.setValue(echartsService.findByType("out"));
            echart.setName("留校信息");
            results.add(echart);
            echart2.setValue(echartsService.findByType("stay"));
            echart2.setName("离校信息");
            results.add(echart2);
            model.addAttribute("data", gson.toJson(results));
            System.out.println(gson.toJson(results));
    
            return results;
        }
    
    }

注意:这里使用了一个List来装载这个echartsBean的数据,
这里我用的是Google 的Gson 将封装好的数据转换成Json
还有注意的是我的Dao查询出来默认就只有1个value数据,这里通过echartsBean设置了name,这样就和官网要求的格式一样了,就是这样的:
[{“value”:3,“name”:“留校信息”},{“value”:3,“name”:“离校信息”}]

admin/echarts_count页面

<!DOCTYPE html>
<html style="height: 100%" lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>数据可视化</title>
</head>
<body style="height: 100%; margin: 0">
<div  id="main1"
      style="height: 100%"></div>

</div>

<div id="mychars" style="height: 300px;width: 400px;"></div>

<script src="/static/js/echarts.min.js"></script>
<script src="/static/js/jquery-3.3.1.min.js"></script>

<script type="text/javascript">

    //饼图
    var myChart1 = echarts.init(document.getElementById('main1'));
    option1 = {
        backgroundColor: '#2c343c',

        title: {
            text: '留校信息统计',
          
            left: 'center',
            top: 20,
            textStyle: {
                color: '#ccc'
            }
        },

        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            x: 'left',
            data:['留校信息','离校信息'],
            color: '#c2182d',
            textStyle: {
                color: '#fbf9ff'
            }
        },


        series : [
            {
                name:'访问来源',
                type:'pie',
                radius : '55%',
                center: ['50%', '50%'],
                data:[
                    {value:335, name:'直接访问'},
                    {value:310, name:'邮件营销'},
                    {value:274, name:'联盟广告'},
                    {value:235, name:'视频广告'},
                    {value:400, name:'搜索引擎'}
                ].sort(function (a, b) { return a.value - b.value; }),
                roseType: 'radius',
                label: {
                    normal: {
                        textStyle: {
                            color: 'rgba(255, 255, 255, 0.3)'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        lineStyle: {
                            color: 'rgba(255, 255, 255, 0.3)'
                        },
                        smooth: 0.2,
                        length: 10,
                        length2: 20
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#c23531',
                        shadowBlur: 200,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },

                animationType: 'scale',
                animationEasing: 'elasticOut',
                animationDelay: function (idx) {
                    return Math.random() * 200;
                }
            }
        ]
    };

    
 //这里是ajax获取Controller的数据
    function getData(){
       $.ajax({
           url : "/getData",
           type : "GET",
           dataType : "json",
           success : function(result) {
               if (result) {
                   myChart1.setOption({
                       series:[{
                           data:result
                       }]
                   });
               }
           }

       });


   }
    myChart1.setOption(option1);
   //这里是2秒自动刷新,这样数据库一旦有新的记录 就不用手动刷新页面就能显示新的数据。
    setInterval(function () {
     getData();

    },2000)

</script>
</body>

</html>

下面是最终的效果图

在这里插入图片描述
就是这样的,非常的简单,关键就是看清楚需要使用的echarts要求的data格式，然后封装就可以了。

代码忘烦恼

关注

4
点赞
踩
21

收藏

觉得还不错? 一键收藏
10
评论
SpringBoot dataJpa + thymeleaf +Mysql+ echarts 数据展示

1.网上有很多的代码说怎么用,但是这里我还是想分享一下我的做法,非常的简单，通常去echarts官方的实例,会看到明确要求的数据格式。如下图所示:从上图不难看出这是一对键值对的方式，如何去封装这些数据常见的方式就是用Map去封装 ,然后在用Json将封装好的Map进行Json转换。最后用model.attribute 进去。到页面就可以使用[[${xxxxx}]]来取值，thymeleaf支...
复制链接

扫一扫

专栏目录