Echarts简单实现

最新推荐文章于 2024-01-29 10:36:23 发布

臆想的一只猫

最新推荐文章于 2024-01-29 10:36:23 发布

阅读量396

点赞数 1

分类专栏： SpringBoot 文章标签： echarts SpringBoot

本文链接：https://blog.csdn.net/weixin_42047611/article/details/109709574

版权

SpringBoot 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

Echarts用于将数据进行可视化展示。（https://echarts.apache.org/examples/zh/index.html）

1、使用的时候需要先导入js文件，可以从官网进行下载。

2、简单实现

@Controller
public class HomeController {

    @Autowired
    private UserService userService;

    @GetMapping({"/", "/index"})
    public String toIndexPage() {
        return "/index";
    }

    @RequestMapping("/ecahrtsToGrid")
    @ResponseBody
    public Map<String, Object> echartsToGrid() {

        Map<String, Object> map = new HashMap<>();

        List<User> users = userService.queryAll();

        List<String> nameList = new ArrayList<>();
        List<Integer> statusList = new ArrayList<>();

        for (User user : users) {
            nameList.add(user.getUsername());
            statusList.add(user.getStatus());
        }

//        String [] cate = {"1","2","3","6","4","5"};
//        Integer [] data = {5,6,6,7,8,9};


        map.put("nameList", nameList);
        map.put("typeList", statusList);
        return map;
    }
}

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <script src="../static/js/echarts.js" th:src="@{/js/echarts.js}"></script>
    <script src="../static/js/jquery-3.5.1.js" th:src="@{/js/jquery-3.5.1.js}"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>

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

    // 指定图表的配置项和数据
    myChart.setOption({
        title: {
            text: '用户状态'
        },
        tooltip: {},
        legend: {
            data:['状态']
        },
        xAxis: {
            data: []
        },
        yAxis: {},
        series: [{
            name: '状态',
            type: 'scatter',
            data: []
        }]
    });

    $.post(

        "/ecahrtsToGrid",
        function (data) {
            console.log(data)
            myChart.setOption({
                xAxis: {data: data.nameList},
                series: [{
                    name: '状态',
                    type: 'bar',
                    data: data.typeList
                }]
            })
        },
        "json"
    );
</script>
</body>
</html>

3、实现效果

臆想的一只猫

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Echarts简单实现

Echarts用于将数据进行可视化展示。（https://echarts.apache.org/examples/zh/index.html）1、使用的时候需要先导入js文件，可以从官网进行下载。2、简单实现@Controllerpublic class HomeController { @Autowired private UserService userService; @GetMapping({"/", "/index"}) public Strin
复制链接

扫一扫

专栏目录