課堂做業，疫情數據統計（柱形圖的生成）

時間 2020-06-09

標籤課堂疫情數據統計柱形圖生成简体版

原文原文鏈接

經過導入相應的sql文件獲得數據庫文件。以後經過數據庫的查找獲得相應的數據。經過list進行保存傳輸。javascript

以後展現一下數據庫的信息。css

對於助興圖標的生成主要是由於對於插件的不理解當誤了時間。最後瞭解了插件，就比較簡單了。html

傳遞相應的名稱以及對應的數值，直接就會生成柱狀圖。java

具體的代碼以下：jquery

主要的jsp的頁面(包含圖表和信息列表。經過div來分析上下)：sql

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <%@page import="com.yiqing.users.*"%>
<%@page import="java.util.ArrayList"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
 <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
 <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
 <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="js/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="height:400px"></div>
    <div>
        <table class="table table-hover table-striped table-bordered table-sm" id="resultshow">
            <tr>
            
                <th>日期</th>
                <th>城市</th>
                <th>新增病例</th>
                <th>原有病例</th>
                <th>死亡人數</th>
                <th>總人數</th>
                <th>治癒人數</th>

            </tr>
            <%ArrayList<heibeicity> list=(ArrayList<heibeicity>)request.getAttribute("list1");%>
            <c:forEach var="l" items="<%=list %>" varStatus="i">
                <tr>
                    
                    <td>${l.getDate()}</td>
                    <td>${l.getCity()}</td>
                    <td>${l.getNew_confirmed_num()}</td>
                    <td>${l.getConfirmed_num()}</td>
                    <td>${l.getDead_num()}</td>
                    <td>${l.getZhong_num()}</td>
                    <td>${l.getCured_num()}</td>
                    
                    
    
                
                </tr>
            </c:forEach>
        </table>
    </div>
    <script type="text/javascript">
    // 基於準備好的dom，初始化echarts實例
    var myChart = echarts.init(document.getElementById('main')); var arr = new Array(); var index = 0; <c:forEach items="${pres}" var="goods"> arr[index++] = ${goods.getConfirmed_num()}; </c:forEach>

    // 指定圖表的配置項和數據
    var option = { title: { text: '全國疫情統計' }, tooltip: { show: true }, legend: { data:['患者數'] }, xAxis : [ { type : 'category', data : [ <c:forEach items="${pres}" var="g"> ["${g.getProvince()}"], </c:forEach>
 ] } ], yAxis : [ { type : 'value' } ], series : [ { name:'患者數', type:'bar', data: arr } ] }; // 使用剛指定的配置項和數據顯示圖表。
 myChart.setOption(option); </script>
</body>
</html>

其他的都是普通的相關數據庫的操做。而後總要的就是本身導入的jar包數據庫

包括頁面樣式和圖表的全部的jar包以下：bootstrap

柱形圖折線圖的同同時出現：echarts

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <%@page import="com.yiqing.users.*"%>
<%@page import="java.util.ArrayList"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
 <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
 <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
 <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="js/echarts.min.js"></script>
     <script src="${pageContext.request.contextPath}/resource/echarts.js"></script>
</head>
<body>
    <div id="main" style="height:400px"></div>
    <div id="main1" style="width: 600px;height:400px;"></div>
    <div>
        <table class="table table-hover table-striped table-bordered table-sm" id="resultshow">
            <tr>
            
                <th>日期</th>
                <th>城市</th>
                <th>新增病例</th>
                <th>原有病例</th>
                <th>死亡人數</th>
                <th>總人數</th>
                <th>治癒人數</th>

            </tr>
            <%ArrayList<heibeicity> list=(ArrayList<heibeicity>)request.getAttribute("list1");%>
            <c:forEach var="l" items="<%=list %>" varStatus="i">
                <tr>
                    
                    <td>${l.getDate()}</td>
                    <td>${l.getCity()}</td>
                    <td>${l.getNew_confirmed_num()}</td>
                    <td>${l.getConfirmed_num()}</td>
                    <td>${l.getDead_num()}</td>
                    <td>${l.getZhong_num()}</td>
                    <td>${l.getCured_num()}</td>
                    
                    
    
                
                </tr>
            </c:forEach>
        </table>
    </div>
    <script type="text/javascript">
    // 基於準備好的dom，初始化echarts實例
    var myChart = echarts.init(document.getElementById('main')); var arr = new Array(); var index = 0; <c:forEach items="${pres}" var="goods"> arr[index++] = ${goods.getConfirmed_num()}; </c:forEach>

    // 指定圖表的配置項和數據
    var option = { title: { text: '全國疫情統計' }, tooltip: { show: true }, legend: { data:['患者數'] }, xAxis : [ { type : 'category', data : [ <c:forEach items="${pres}" var="g"> ["${g.getProvince()}"], </c:forEach>
 ] } ], yAxis : [ { type : 'value' } ], series : [ { name:'患者數', type:'bar', data: arr } ] }; // 使用剛指定的配置項和數據顯示圖表。
 myChart.setOption(option); </script>
<script type="text/javascript">
    // 基於準備好的dom，初始化echarts實例
    var myChart = echarts.init(document.getElementById('main1')); var sale = new Array; var index = 0; <c:forEach items="${pres}" var="goods"> sale[index++] = ${goods.getConfirmed_num()}; </c:forEach>
 option = { tooltip: { trigger: 'axis', position: function (pt) { return [pt[0], '10%']; } }, title: { left: 'center', text: '超市商品銷量圖', }, toolbox: { feature: { dataZoom: { yAxisIndex: 'none' }, restore: {}, saveAsImage: {} } }, xAxis: { type: 'category', boundaryGap: false, data: [ <c:forEach items="${pres}" var="g"> ["${g.getProvince()}"], </c:forEach>
 ] }, yAxis: { type: 'value', boundaryGap: [0, '100%'] }, dataZoom: [{ type: 'inside', start: 0, end: 10 }, { start: 0, end: 10, handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z', handleSize: '80%', handleStyle: { color: '#fff', shadowBlur: 3, shadowColor: 'rgba(0, 0, 0, 0.6)', shadowOffsetX: 2, shadowOffsetY: 2 } }], series: [ { name:'商品銷量', type:'line', smooth:true, symbol: 'none', sampling: 'average', itemStyle: { normal: { color: 'rgb(255, 70, 131)' } }, areaStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgb(255, 158, 68)' }, { offset: 1, color: 'rgb(255, 70, 131)' }]) } }, data: sale } ] }; // 使用剛指定的配置項和數據顯示圖表。
 myChart.setOption(option); </script>
</body>
</html>