若依框架实现折线图

最新推荐文章于 2024-06-22 15:10:18 发布

酥肉烧饼

最新推荐文章于 2024-06-22 15:10:18 发布

阅读量1.1k

点赞数

文章标签： java Powered by 金山文档

本文链接：https://blog.csdn.net/wang_tuotuo/article/details/129175182

版权

该代码示例展示了如何在HTML页面中集成Thymeleaf模板引擎和Shiro安全框架，以及利用ECharts库创建一个线图来显示从后端获取的交易金额数据。通过Ajax异步请求获取JSON数据，并在页面加载完成后动态展示图表。

摘要由CSDN通过智能技术生成

效果图

html代码

<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('可视化列表')"/>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox-content">
                <div id="lineEcharts" class="echarts"></div>
            </div>
        </div>
    </div>

</div>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<th:block th:include="include :: footer"/>
<th:block th:include="include :: echarts-js"/>

<script th:inline="javascript">
    var prefix = ctx + "gwc/oms";

    //折线图
    $(document).ready(function () {
        //初始化ehcharts实例
        var lineChart = echarts.init(document.getElementById("lineEcharts"));
        //数据加载完之前先显示一段简单的loading动画
        lineChart.showLoading();
        //指定图表的配置项和数据
        /*var names = []; //类别数组（实际放x轴坐标值）*/
        /*var nums = []; //销量数组（Y坐标值）*/
        $.ajax({
            type: "post",
            async: "true",//异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url: prefix + "/syzs",
            data: {},
            dataType: "json",
            success: function (result) {
                console.log(result)
                lineChart.hideLoading();//隐藏加载动画
                lineChart.setOption({//加载数据图表
                    title: {
                        text: '往日七天交易金额',
                    },
                    //工具箱
                    //保存图片
                    toolbox: {
                        show: true,
                        feature: {
                            saveAsImage: {
                                show: true
                            }
                        }
                    },
                    //图例-每一条数据的名字叫销量
                    legend: {
                        data: ['金额']
                    },
                    tooltip: {
                        trigger: 'axis', //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
                        axisPointer: {// 坐标轴指示器，坐标轴触发有效
                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },

                    //x轴
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: result.name
                    },
                    //y轴没有显式设置，根据值自动生成y轴
                    yAxis: {
                        type: 'value'
                    },
                    //数据-data是最终要显示的数据
                    series: [{
                        name: '金额',
                        type: 'line',
                        data: result.num,
                        markPoint:{
                            data:[
                                {type:'money',name:'交易金额'}
                            ]
                        }
                    }]
                })
            },
            error: function (errorMsg) {
                alert("图表请求数据失败");
                lineChart.hideLoading();
            }
        })
    })
</script>
</body>
</html>

后端主要将参数封装到AJAX中的result当中通过直接要设定的X轴