echarts通过ajax请求后台。

最新推荐文章于 2024-07-18 10:00:11 发布

anning755

最新推荐文章于 2024-07-18 10:00:11 发布

阅读量715

点赞数

文章标签： echarts ajax java

本文链接：https://blog.csdn.net/anning755/article/details/121174154

版权

ECharts 前后端交互 Ajax Java REST API 数据可视化

关键词由CSDN通过智能技术生成

新手，新手。

1 这里是我伪造的数据。（因为自己得到的这些数据比较繁琐,所以就伪造了这些数据）

@RestController
public class HelloController{
@RequestMapping("/go")
public Map<String,Object> list(){
        Map<String,Object>map = new HashMap<>();
        map.put("192.168.52.71",73482);
        map.put("192.168.52.123",73329);
        map.put("192.168.152.160",22989);
        map.put("192.168.152.86",593);
        map.put("192.168.152.161",23075);
        map.put("192.168.152.203",1);
        map.put("192.168.152.84",634);
        map.put("192.168.152.87",365);
        map.put("192.168.51.59",44);

    return map;

}
}

2 现在后端数据有了，就需要前端拿到这个数据，并且展示到echarts模板中。我这里使用的是ajax。

<!DOCTYPE html>
<html lang="en" xmlns:th=www.thymeleaf.org>
<head>
    <meta charset="UTF-8">
    <title>ECharts</title>
    <script src="../static/js/jquery-3.4.1.js"></script>
    <script src="../static/js/echarts.min.js"></script>
<!--引入jQuery和echarts -->
</head>
<body>
<!-- 为 ECharts 准备一个页面大小 -->
<div id="main" style="width: 4500px;height:900px;"></div>

<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));




     option = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [150, 230, 224, 218, 135, 147, 260],
                type: 'line'
            }
        ]
    };

//这里我用的是一个折线图。就需要两个数组存储横坐标和纵坐标。
    const ip = [];
    const nums = [];

    $.ajax({
        type:"get",
        data:{},
        url:"http://localhost:8080/go",
        dataType:"json",

//这里就得到了result。就是后端map存储的数据，返回为json。
        success:function (result) {
            if (result) {
//下面就是对result进行循环遍历。
                for (const p in result) {
                    console.info(p + ":" + result[p]);
                    ip.push(p)
                    nums.push(result[p])
                }

                myChart.setOption({


                    xAxis: {
                        type: 'category',
                        data: ip,
                        // axisLabel: { //坐标轴刻度标签的相关设置
                        //     interval: 0,
                        //    rotate:'70',//旋转度数
                        // },

                    },

                    yAxis: {

                    },
                    series: [
                        {
                            data: nums,
                            type: 'line'
                        }
                    ]
                });
            }

        },
        error : function(errorMsg) {
            //请求失败时执行该函数
            alert("图表请求数据失败!");
            myChart.hideLoading();
        }
    })





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

3 实现跳转。

@Controller
public class EchartsController {
    @RequestMapping("/test")
    public String test(){
        return "test";
    }

anning755

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
echarts通过ajax请求后台。

新手，新手。1 这里是我伪造的数据。（因为自己得到的这些数据比较繁琐,所以就伪造了这些数据）@RestControllerpublic class HelloController{@RequestMapping("/go")public Map<String,Object> list(){ Map<String,Object>map = new HashMap<>(); map.put("192.168.52.71",73.
复制链接

扫一扫