ECharts异步数据获取

最新推荐文章于 2024-04-25 22:02:20 发布

星湖1024

最新推荐文章于 2024-04-25 22:02:20 发布

阅读量1.3k

点赞数 1

分类专栏： ECharts 文章标签： echarts ajax javascript jquery js

本文链接：https://blog.csdn.net/m0_43400750/article/details/118054073

版权

ECharts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

控制类

    @Resource
    private RegionService regionService;


    @GetMapping("/PieChart1")
    public String pieChart(){
        return "echarts/echarts1";
    }

    @GetMapping("/PieChart2")
    public String pieChart2(){
        return "echarts/echarts2";
    }

    @GetMapping("/PieChart3")
    public String pieChart3(){
        return "echarts/echarts3";
    }


    @RequestMapping("toPieChart")
    @ResponseBody
    public List<Region> toPieChart(Model model) {
        List<Region> purcahseManagements = regionService.findAll();
        //PurchasingManagement是我pojo中创建的实体
        System.err.println(purcahseManagements.toString());
        return purcahseManagements;
    }

ECharts柱形图示例1

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>柱形图表1</title>
    <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>

<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 800px;height:450px;"></div>
<script type="text/javascript">
    $(document).ready(function () {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        //数据加载完之前先显示一段简单的loading动画
        myChart.showLoading();
        var names = [];    //横坐标数组（实际用来盛放X轴坐标值）
        var values = [];    //纵坐标数组（实际用来盛放Y坐标值）
        $.ajax({
            type: "post",
            async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url: "/Region/toPieChart",    //请求发送到dataActiont处
            data: {},
            dataType: "json",        //返回数据形式为json
            success: function (result) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                if (result) {
                    for (var i = 0; i < result.length; i++) {
                        names.push(result[i].kind);
                        values.push(result[i].count);
                    }
                    myChart.hideLoading();    //隐藏加载动画
                    myChart.setOption({        //加载数据图表
                        title: {
                            text: '图书数据'
                        },
                        tooltip: {
                            trigger: 'item',
                        },
                        legend: {
                            data: ['数量']
                        },
                        xAxis: {
                            data: names
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            // 根据名字对应到相应的系列
                            name: '数量',//薪资 series not exists. Legend data should be same with series name or data name.
                            type: 'bar',
                            data: values,
                        }]
                    });
                }
            },
            error: function (errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                myChart.hideLoading();
            }
        });//end ajax
    });


</script>

</body>
</html>

运行结果
在这里插入图片描述

ECharts柱形图示例2

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
    <title>柱形图表2</title>
    <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    var option;
    var names = [];    //横坐标数组（实际用来盛放X轴坐标值）
    var values = [];    //纵坐标数组（实际用来盛放Y坐标值）
    //页面加载完毕时获取数据
    $(function () {
        $.ajax({
            type: "post",
            async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url: "/Region/toPieChart",    //请求发送到dataActiont处
            data: {},
            dataType: "json",        //返回数据形式为json
            success: function (result) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                if (result) {
                    for (var i = 0; i < result.length; i++) {
                        names.push(result[i].kind);
                        values.push(result[i].count);
                    }
                    myChart.hideLoading();    //隐藏加载动画
                    myChart.setOption({

                        title: {
                            text: '各类图书数量柱形图'
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            data: '图书数量'
                        },
                        xAxis: {
                            data: names
                        },
                        yAxis: {},
                        series: [{
                            name: '图书数量',
                            type: 'bar',
                            data: values,
                        }]


                        //加载数据图表
                    });
                }
            },
            error: function (errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                myChart.hideLoading();
            }
        });//end ajax
    })
    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }

</script>
</body>
</html>

运行结果
在这里插入图片描述

ECharts饼图示例

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <title>饼图</title>
    <meta charset="utf-8">
    <!-- 引入 jquery.js -->
    <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};

    var option;

    var res = [];

    option = {
        title: {
            text: '各类图书比例情况',
            subtext: '饼图',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter:'{a} <br/>{b} : {c} ({d}%)'    //添加比例
        },
        legend: {
            orient: 'vertical',
            left: 'left',
        },
        series: [
            {
                name: '图书数量',
                type: 'pie',
                radius: '50%',
                data: res

                /* [
                    {value: 1048, name: '搜索引擎'},
                    {value: 735, name: '直接访问'},
                    {value: 580, name: '邮件营销'},
                    {value: 484, name: '联盟广告'},
                    {value: 300, name: '视频广告'}
                ]*/,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    //页面加载完毕时获取数据
    $(function () {
        $.ajax({
            url: "/Region/toPieChart",
            dataType: "json",
            type: "post",
            success: function (data) {
                debugger
                //把后台返回的数据给数组赋值
                $.each(data, function (key, v) {
                    res.push({
                        value: v.count,
                        name: v.kind
                    });
                })
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }
        })
    })

    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }

</script>
</body>
</html>

运行结果
在这里插入图片描述

星湖1024

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
ECharts异步数据获取

控制类 @Resource private RegionService regionService; @GetMapping("/PieChart1") public String pieChart(){ return "echarts/echarts1"; } @GetMapping("/PieChart2") public String pieChart2(){ return "echarts/echarts2
复制链接

扫一扫