毕业设计-1.20

最新推荐文章于 2025-06-13 15:06:56 发布

路白#

最新推荐文章于 2025-06-13 15:06:56 发布

阅读量85

点赞数

文章标签： js jquery bootstrap java css3

本文链接：https://blog.youkuaiyun.com/weixin_43847567/article/details/114243035

版权

本文介绍了一个使用Java和ECharts实现的天气类型展示页面。该页面能够根据指定日期范围内的数据生成饼状图来展示不同天气类型的分布情况。通过后台获取数据并将其传递给前端进行图表绘制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

情况概述：

　　今天完成了对天气类型的初步展示。

代码如下：

<%@page import="com.zlc.entity.WeatherBean"%>
<%@page import="com.zlc.entity.WeatherCountBean"%>
<%@page import="com.zlc.dao.IWeatherDao"%>
<%@page import="com.zlc.service.IWeatherService"%>
<%@page import="com.zlc.dao.impl.WeatherDaoImpl"%>
<%@page import="com.zlc.service.impl.WeatherServiceImpl"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.List"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<%
    IWeatherService service = new WeatherServiceImpl();
    IWeatherDao dao = new WeatherDaoImpl();
    List<WeatherBean> weathers = new ArrayList<WeatherBean>();
    List<WeatherCountBean> weathercount = new ArrayList<WeatherCountBean>();
    weathers = (ArrayList<WeatherBean>) request.getAttribute("weathers");
    weathercount = (ArrayList<WeatherCountBean>) request.getAttribute("weathercount");
    String MinDate = request.getParameter("MinDate");
    String MaxDate = request.getParameter("MaxDate");
%>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script src="../js/echarts.min.js"></script>
<script src="../js/china.js"></script>
<script src="../js/jquery-1.12.1.min.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/china.js"></script>
<script src="js/jquery-1.12.1.min.js"></script>

<link rel="stylesheet" type="text/css" href="../BigPage01/css/reset.css" />
<link rel="stylesheet" type="text/css" href="../BigPage01/css/style.css" />
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="../BigPage01/laydate/laydate.js"></script>
<script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script>
<script src="../BigPage01/js/index.js"></script>
<script src="../BigPage01/js/jquery.nicescroll.min.js"></script>
<title></title>
<body>

    <!--  <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="container" style="height: 100%;width:100%"></div>
    <script type="text/javascript">
    
        // 基于准备好的dom，初始化echarts实例
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        option = {
    title: {
        text: '天气类型',
        subtext: '<%=MinDate%>至<%=MaxDate%>',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
    },
    series: [
        {
            name: '天气类型',
            type: 'pie',
            radius: '50%',
            data: [
                <%for(WeatherCountBean w:weathercount){%>
                    {value: <%=w.getDayNum()%>, name: '<%=w.getWeather()%>'},
                    
                <%}%>
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};
        myChart.setOption(option);
    
    
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
    </script>
</body>

</html>

结果如下：