spark分析出来的结果用echarts展示

Love The Way You Lie 2022-05-27 12:42 91阅读 0赞

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
    <%
    	String path = request.getContextPath();
    	String basePath = request.getScheme() + "://"
    			+ request.getServerName() + ":" + request.getServerPort()
    			+ path + "/";
    %>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <html>
    <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'MyJsp.jsp' starting page</title>
    
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    
    <script src="js/echarts.min.js"></script>
    </head>
    
    <body>
    	<div id="main" style="width: 600px;height:400px;"></div>
    	<script type="text/javascript">
    		// 基于准备好的dom，初始化echarts实例
    		var myChart = echarts.init(document.getElementById('main'));
    
    		// 指定图表的配置项和数据
    		 var option = {
                title: {
                    text: '分析结果'
                },
                tooltip: {},
                legend: {
                    data:['单位(个/人)']
                },
                xAxis: {
                    data: [
                      <c:forEach items="${countList}" var="item" varStatus="status" >
    			 '${item.qu}',
    		 </c:forEach>
                    ]
                },
                yAxis: {},
                series: [{
                    name: '单位(个/人)',
                    type: 'bar',
                    data: [
    				  <c:forEach items="${countList}" var="item" varStatus="status" >
    			 '${item.count}',
    		 </c:forEach>
    				]
                }]
            };
    
    		// 使用刚指定的配置项和数据显示图表。
    		myChart.setOption(option);
    	</script>
    </body>
    </html>

只需把echarts.js引进来就可以使用了    数据用c标签的forEach循环出来  
![70][]

[70]: /images/20220527/865425c66d654a9ca139311112a2e1fc.png