6springboot 前端展示echart

最新推荐文章于 2024-06-03 19:08:06 发布

xiaoxiaoniaoQ

最新推荐文章于 2024-06-03 19:08:06 发布

阅读量880

点赞数 1

分类专栏：技术

本文链接：https://blog.csdn.net/xiaoxiaoniaoQ/article/details/84570135

版权

技术专栏收录该内容

33 篇文章 0 订阅

订阅专栏

1》springboot 整合 thymeleaf ===>4 如何配置springboot跳转html页面(thymeleaf)

@再pom文件中添加thymeleaf 的依赖

@再yml 文件中添加配置

@controller 获取首页面

@html

2 》echart

@ thymeleaf 有特定的写法例如加载css js 等

@echart官网饼图demo

http://echarts.baidu.com/echarts2/doc/example/pie1.html

@ 将静态demo 写活

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <!-- 引入 ECharts 文件 -->
    <script th:src="@{/js/echarts.common.min.js}" href="../static/js/echarts.common.min.js"></script>
    <script th:src="@{/js/jquery-1.11.1.min.js}" href="../static/js/jquery-1.11.1.min.js"></script>
    <title>Title</title>
</head>
<body>
<center>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->

    <div id="main" style="width: 600px;height:400px;"></div>

</center>

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

			$.ajax({
		        type : "POST",
		        url : "http://localhost:8054/hive/selectData",
		        dataType:"json", 
		        success : function(data) {
		            
		            datas=data.dataArray;
		            console.log(datas)
		    		
		            option = {
						    title : {
						        text: '某站点用户访问来源',
						        subtext: '纯属虚构',
						        x:'center'
						    },
						    tooltip : {
						        trigger: 'item',
						        formatter: "{a} <br/>{b} : {c} ({d}%)"
						    },
						    legend: {
						        orient : 'vertical',
						        x : 'left',
						        data:['指纹开门','邮件营销','远程开门','密码开门','动态密码']
						    },
						    toolbox: {
						        show : true,
						        feature : {
						            mark : {show: true},
						            dataView : {show: true, readOnly: false},
						            magicType : {
						                show: true, 
						                type: ['pie', 'funnel'],
						                option: {
						                    funnel: {
						                        x: '25%',
						                        width: '50%',
						                        funnelAlign: 'left',
						                        max: 1548
						                    }
						                }
						            },
						            restore : {show: true},
						            saveAsImage : {show: true}
						        }
						    },
						    calculable : true,
						    series : [
						        {
						            name:'访问来源',
						            type:'pie',
						            radius : '55%',
						            center: ['50%', '60%'],
						            data: datas,
						            	/* [{"name":"指纹开门","value":1275},
						                   {"name":"远程开门","value":0}, 
						        ]*/
						        }
						    ]
			      };
		            
		         // 使用刚指定的配置项和数据显示图表。
		 		   myChart.setOption(option);
		         }
		    })

</script>
</html>

效果图：

xiaoxiaoniaoQ

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
6springboot 前端展示echart

1》springboot 整合 thymeleaf ===&gt;4 如何配置springboot跳转html页面(thymeleaf) @再pom文件中添加thymeleaf 的依赖 @再yml 文件中添加配置 @controller 获取首页面 @html2 》echart @ thymeleaf 有特定的写法例如加载css js 等 @e...
复制链接

扫一扫

专栏目录