Thymeleaf+ECharts,显示后端传来的数据

Posted 夜中听雪

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Thymeleaf+ECharts,显示后端传来的数据相关的知识,希望对你有一定的参考价值。

视频:ECharts数据可视化项目-大屏数据可视化展示-echarts 图表制作-_bilibili

文档:Documentation - Apache ECharts - 五分钟上手ECharts

前端测试ECharts

工具:HBuilder X。

1、Release 5.1.2 · apache/echarts 往下拉,点击"Source code (zip)" 来下载"echarts-5.1.2.zip",然后在zip包中找出"echarts.min.js"复制到项目中。

2、新建html页面写入下方代码。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Title</title>
		<style>
			.box
				width:600px;
				height:400px;
				background-color:pink;
			
		</style>
	</head>
	<body>
		<div class="box"></div>
		<script src="js/echarts.min.js"></script>
		<script>
			// 基于准备好的dom,初始化echarts实例
			var myChart = echarts.init(document.querySelector(".box"));
	
			// 指定图表的配置项和数据
			var 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'
				]
			;
	
			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option);
		</script>
	</body>
</html>

后端给前端传数据,测试ECharts

工具:IDEA,SpringBoot项目,echarts.min.js,Maven导入Thymeleaf包

1、后端通过Model传值到前端

@Controller
public class HomeController 

    @RequestMapping(path = "/test", method = RequestMethod.GET)
    public String test(Model model) 
        List list=Arrays.asList(new int[]150,160,170,180,190,200,210);
        model.addAttribute("data",list );
        return "/site/test";
    

2、js通过Model取值作为变量使用

<script th:inline="javascript">
    data1 = [[$data]];
</script>

应用到Thymeleaf页面中:test.html

<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="icon" href="https://static.nowcoder.com/images/logo_87_87.png"/>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" crossorigin="anonymous">

    <title>Title</title>
    <style>
        .box
            width:600px;
            height:400px;
            background-color:pink;
        
    </style>
</head>
<body>
    <script th:src="@/js/echarts.min.js"></script>
    <div class="box"></div>

    <script th:inline="javascript">
        var data1 = [[$data]];
        // var data2=[150,160,170,180,190,200,210];

        // 基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.querySelector(".box"));

        // 指定图表的配置项和数据
        var option = 
            xAxis: 
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            ,
            yAxis: 
                type: 'value'
            ,
            series: [
                data: data1[0],//data1[0]的原因见下文
                //data: data2,
                type: 'line'
            ]
        ;

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>

</body>
</html>

http://127.0.0.1:8080/test 显示页面:

data: data1[0] 的原因

浏览器里,右击->检查->Sources,调试原代码。

var data1 = [[$data]]; 显示:

var data2=[150,160,170,180,190,200,210]; 显示:

以上是关于Thymeleaf+ECharts,显示后端传来的数据的主要内容,如果未能解决你的问题,请参考以下文章

Echarts通过Ajax动态获取后端数据(饼状图,柱状图)

求问大佬Echarts,X轴可以实现不等距间隔吗? 比如我后台传来半年的时间数据,前台统计X轴展示

高效开发:thymeleaf中th:text和th:utext的区别

高效开发:thymeleaf中th:text和th:utext的区别

如何在js里面处理后台传来的json,并显示在页面上

ElementUI表格多选框根据后端传来的数据进行数据回显