提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

SpringBoot+Themleaf+Echarts制作后台统计图表页面

SpringBoot后台echarts 页面 制作
2023-06-13 09:13:14 时间

需求： 传统表格数据看统计不直观不美观，需要更加直观的方式一目了然的了解统计状况，因此需要饼图折线图等形式进行展示

themleaf需要导入依赖：

<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<!--版本号去maven上找新版即可-->

yml应用配置：

spring:
  application:
    name: xxxxxxxxxxx
  thymeleaf:
    cache: false    #关闭Thymeleaf的缓存
    mode: LEGACYHTML5    #默认值是HTML5，其实是一个很严格的检查，改为LEGACYHTML5可以得到一个可能更友好亲切的格式要求。

前端页面页面图表样式可以先去Echarts官网找到适合的实例，然后直接拷贝图表的实现代码到自己展示网页上

Echarts官网实例页面

准备好自己所要展示的html页面，可以去找合适的页面模板然后替换成自己在官网实例上找到的合适的图表就行

<!-th标签报红的话加上html标签属性即可-> 
<html lang="en" xmlns:th="http://www.thymeleaf.org/">

<!-head中引入echartsjs->
<script src="../static/js/echarts.min.js"></script>

<!-页面中的一个echarts图表内容->
 <div class="leftMain_middle">
            <div class="leftMain_middle_left">
                <div class="leftMain_middle_leftIn">
                    <div class="biaoge" style="height:29vh" id="main1"></div>
                    <script type="text/javascript" th:inline = "javascript">
                    //这里一定要加上th:line 标签才能在javascript中取到themleaf中传递的数据
                        var app1 = echarts.init(document.getElementById("main1"));
                        //初始化
                        option1 = {
                            // backgroundColor:'#fff',//图表背景
                            color: ['#60acfc', '#32d3eb', '#5bc49f ', '#feb64d', '#ff7c7c', '#9287e7', '#dd3ee5'],//图表内容取色盘
                            title: {//标题
                                left: 'left',
                                text: '本月每日活跃用户数',
                                textStyle: {color: '#fff'}
                            },
                            legend: {
                                // backgroundColor:'#fff'      //图例背景色
                                borderColor: '#fff',
                                textStyle: {
                                    color: '#fff'
                                }
                            },
                            tooltip: {      
                                trigger: 'axis',
                                showContent: false
                            },
                            toolbox: {//工具栏属性设置
                                show: true,
                                iconStyle: {
                                    borderColor: '#fff',         //工具箱边线颜色
                                    shadowColor: 'rgb(255,255,255)',        //  工具箱阴影颜色
                                    shadowBlur: 3
                                },
                                orient: 'vertical',
                                left: 'right',
                                itemSize: 14,
                                top: 'center',
                                feature: {      //组件栏
                                    magicType: {
                                        type: ['line', 'bar', 'stack', 'tiled']
                                    },
                                    restore: {},
                                    saveAsImage: {}
                                },
                            },
                            dataset: {
                                source: [//这里就是themleaf的充填数据的地方，主要是由后台传入
                                    [[${result.main1[0]}]],
                                    [[${result.main1[1]}]],
                                    [[${result.main1[2]}]],
                                    [[${result.main1[3]}]],
                                    [[${result.main1[4]}]],
                                    [[${result.main1[5]}]],
                                ]
                            },
                            xAxis: { //x轴
                                type: 'category',
                                name: '天数',
                                axisLabel: {
                                    /*inside: true,*/
                                    interval: 0,
                                    textStyle: {
                                        color: '#fff',
                                        fontSize: 10
                                    }
                                },
                                axisTick: {
                                    show: false,
                                },
                                axisLine: {
                                    show: true,
                                    symbol: ['none', 'arrow'],
                                    symbolOffset: 10,
                                    lineStyle: {
                                        color: '#fff',
                                    }
                                },
                                z: 10
                            },
                            yAxis: {  //y轴
                                type: 'value',
                                name: '人数',
                                scale:true,
                                axisLine: {
                                    show: true,
                                    symbol: ['none', 'arrow'],
                                    symbolOffset: 10,
                                    lineStyle: {
                                        color: '#fff',
                                    }
                                },
                                axisTick: {
                                    show: false
                                },
                                axisLabel: {
                                    textStyle: {
                                        color: '#fff',
                                        fontSize: 10
                                    }
                                }
                            },
                            grid: {
                                top: '50%',
                                bottom: '6%',
                            },
                            series: [ //所显示的内容，这里是5条折线一个饼图
                                {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                                {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                                {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                                {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                                {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                                {
                                    type: 'pie',
                                    id: 'pie',
                                    radius: '30%',
                                    center: ['50%', '27%'],
                                    top:6,
                                    label: {
                                        formatter: '{b}: {@1} ({d}%)'
                                    },
                                    encode: {
                                        itemName: [[${result.main1[0][0]}]],
                                        value: [[${result.main1[0][1]}]],
                                        tooltip: [[${result.main1[0][1]}]],
                                    }
                                }
                            ]
                        };
                        //这里是最初加载的默认饼图的充填内容
                        app1.on('updateAxisPointer', function (event) {
                            var xAxisInfo = event.axesInfo[0];
                            if (xAxisInfo) {
                                var dimension = xAxisInfo.value + 1;
                                app1.setOption({
                                    series: {
                                        id: 'pie',
                                        label: {
                                            formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                                        },
                                        encode: {
                                            value: dimension,
                                            tooltip: dimension
                                        }
                                    }
                                });
                            }
                        });

                        app1.setOption(option1);
                        //载入数据渲染图表
                    </script>
                </div>
            </div>

后台充填数据的话controller层就不能用@RestController了，因为会自动把themleaf默认跳转到充填页面以json格式返回给前台，所以用的是@Controller

@Controller
public class ThymeleafController { 
    @RequestMapping("/chartscount")  //这里没有指定methead，不写method 为get,post,put...方式都支持
        public String indexdemo(Model model) {
            Object result = thymeleafService.chartscount();
            model.addAttribute("result", result);
            return "chartscount";
        }
}
@Service
public class ThymeleafService {
        /**
         * 统计图表页面数据集
         *
         * @return 数据集
         */
        public Object chartscount() {
            Dson result = new Dson();
            result.put("active", arpuRedisDao.getActiveUser());
            result.put("online", arpuRedisDao.getOnlineUser());
            result.put("watch", arpuRedisDao.getWatchNum());
            result.put("match", arpuRedisDao.getMatchNum());
            result.put("main1", this.getMain1());
            result.put("main2", this.getMain2());
            result.put("main3", this.getMain3());
            result.put("main4", this.getMain4());
            return result._Value();
        }
}

//this.getMain1234()方法就是前天图表所需数据的集合，怎么取怎么拿取决于自己在图表需要哪些数据

最终效果示例

补充一些除了th:value th:text之外可能常用到的themleaf的用法标签

th:each 循环取值：

<tr th:each="data:${result.data}">
        <td></td>
        <td th:text="${data.groupId}"></td>
        <td th:text="${data.classNum}"></td>
        <td th:text="${data.className}"></td>
        <td th:text="${data.price}"></td>
        <td th:text="${data.sketch}"></td>
        <td th:text="${data.topic}"></td>
        <td th:text="${data.pic}"></td>
        <td th:text="${data.url}"></td>
        <td th:text="${data.version}"></td>
</tr>

th:if 根据条件选择是否展示：

<div th:if="${result.isShow} eq true" class="card">
    <div>xxxxxxxxxxx</div>
    <div>xxxxxxxxxxx</div>
    <div>xxxxxxxxxxx</div>
    <div>xxxxxxxxxxx</div>
</div>
<!-是否显示不能只靠单个数据的有无进行判断，最好是设置一个必定存在的开关->
<-默认false，如果确定有数据的时候手动在后台改成true->
<!-否则会存在themleaf找不到对应的值而渲染阶段就报错导致直接无法返回页面->
gt：great than（大于）>
ge：great equal（大于等于）>=
eq：equal（等于）==
lt：less than（小于）<
le：less equal（小于等于）<=
ne：not equal（不等于）!=

th:selected 多选框中默认选中

<div class="form-group">
      <label for="add_groupId">课程类型</label>
      <select class="form-control" id="add_groupId" name="groupId" size="1">
          <option value="中国象棋" th:selected="${result.data[0].groupId eq '中国象棋'}">中国象棋</option>
          <option value="国际象棋" th:selected="${result.data[0].groupId eq '国际象棋'}">国际象棋</option>
          <option value="五子棋" th:selected="${result.data[0].groupId eq '五子棋'}">五子棋</option>
          <option value="围棋" th:selected="${result.data[0].groupId eq '围棋'}">围棋</option>
          <option value="国际跳棋" th:selected="${result.data[0].groupId eq '国际跳棋'}">国际跳棋</option>
      </select>
</div>

th:switch 与 th:case 多条件选择显示

   <tr th:each="data:${result.data}">
            <td></td>
            <td th:text="${data.id}"></td>
            <td th:text="${data.uid}"></td>
            <td th:switch="${data.state}">
                <span th:case="0" style="color: red">未支付</span>
                <span th:case="2" style="color: green">已支付</span>
            </td>
            <td th:text="${data.identifier}"></td>
            <td th:text="${data.channel}"></td>
            <td th:text="${data.payType}"></td>
            <td th:text="${data.content}"></td>
            <td th:text="${data.price}"></td>
            <td th:text="${data.firstTime}"></td>
            <td th:text="${data.endTime}"></td>
            <td th:text="${data.result}"></td>
        </tr>

Post Views: 392

相关文章