标签：legend 引入 eve lan pre series efi show ebs
我用的是info表格，表格中是全国各个省份在一个时间点的确诊人数；由于没有看清时间设计成了需要输入时间开始和结尾的样式了；
开始写一个jsp来将时间上传到servlet中
1 <%@ page language="java" contentType="text/html; charset=UTF-8"
2 pageEncoding="UTF-8"%>
3 <!DOCTYPE html>
4 <html>
5 <head>
6 <meta charset="UTF-8">
7 <title>查询界面</title>
8 </head>
9 <body>
10 <form action="searchservlet"target="show"method="post">
11 请输入查询的起始日期：<input type="text" name="beginyear">
12 请输入要查询的截至日期：<input type="text" name="endyear">
13 <input type="submit" value="提交">
14 </form>
15 </body>
16 </html>
searchservlet
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.google.gson.Gson;
@WebServlet("/searchservlet")
public class searchservlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
//response.getWriter().append("Served at: ").append(request.getContextPath());
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
String beginyearString=request.getParameter("beginyear");
String endyearString=request.getParameter("endyear");
List<Data>list=new ArrayList<Data>();
DataDao dataDao=new DataDao();
list=dataDao.search1(beginyearString, endyearString);
if (list!=null) {
System.out.print("查询成功");
request.setAttribute("list", list);
request.getRequestDispatcher("show.jsp").forward(request, response);
}
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
然后再dao层写入SQL语句；
Dao然后servlet将函数运行完跳转到show.jsp界面
1 <%@ page language="java" contentType="text/html; charse=tUTF-8" 2 pageEncoding="UTF-8"%> 3 <%@page import="java.util.List"%> 4 <%@page import="echart.Data"%> 5 <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> 6 <!DOCTYPE html> 7 <html> 8 <head> 9 <meta charset="UTF-8"> 10 <title>信息显示页面</title> 11 </head> 12 <!-- 引入 echarts.js --> 13 <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> 14 <script type="text/javascript"> 15 // List<Data>list=request.getAttribute("list"); 16 // var names=new Array(); 17 // var chartData=new Array(); 18 // var length=list.length; 19 // for(i=0;i<length;i++){ 20 // names.pust(list[i].city); 21 // chartData.push(list[i].confirmed_num); 22 // } 23 </script> 24 25 </head> 26 <body> 27 28 29 <% request.setCharacterEncoding("utf-8"); 30 List <Data> provinces =(List<Data>) request.getAttribute("list"); 31 int i=0;%> 32 <div align="center"> 33 <!-- 为ECharts 准备一个具备大小（宽高）的DOM容器 --> 34 <div id="main" align="center" style="width: 1000px;height:600px;" > 35 <script type="text/javascript"> 36 var myChart = echarts.init(document.getElementById(‘main‘)); 37 var option = { //这里 option 表示使用 json 数据格式的配置来绘制图表 38 dataset: { 39 40 title: { 41 text: ‘全国各省确诊人数‘ 42 }, 43 tooltip: {}, 44 legend: { 45 data:[‘确诊人数‘], 46 width:‘auto‘, 47 height:‘auto‘ 48 }, 49 50 source: [ 51 [ ‘省份‘,‘确诊人数‘], 52 <% 53 //获取request域中的数据 54 if(provinces!=null){ 55 for(Data province:provinces){i++; 56 %> 57 [‘<%=province.getProvince()%>‘,‘<%=province.getConfirmed_num()%>‘], 58 <% 59 if(i>33)break; 60 } 61 62 } 63 %> 64 ] 65 }, 66 grid: {containLabel: true}, 67 xAxis: { 68 type: ‘category‘}, 69 yAxis: {},//配置在外轴显示的项 70 series: [ 71 { 72 name: ‘确诊人数‘, 73 type: ‘bar‘, 74 encode: { 75 // 将 "amount" 列映射到 X 轴。 76 x: ‘省份‘, 77 // 将 "product" 列映射到 Y 轴。 78 y: ‘确诊人数‘ 79 } 80 }] 81 }; 82 83 // 使用刚指定的配置项和数据显示图表。 84 myChart.setOption(option); 85 </script> 86 </div> 87 88 89 </div> 90 91 <table> 92 <tr> 93 <td>省份</td> 94 <td>确诊人数</td> 95 <td>时间</td> 96 </tr> 97 <c:forEach items="${list }" var="list"> 98 <tr> 99 <td>${list.province }</td> 100 <td>${list.confirmed_num }</td> 101 <td>${list.date }</td> 102 </tr> 103 </c:forEach> 104 </table> 105 106 </body> 107 </html>
刚开始的时候没有一点的 思路，不知道该怎么用java来设计柱壮图，后来冷静下来，也是像曾删改查一样，先查找到，然后再用echarts设计柱状图；
echarts可以参考这里学习https://www.runoob.com/echarts/echarts-setup.html
在这周的学习中还是有所收获的，还有下面的两个任务，继续加油！
标签：legend 引入 eve lan pre series efi show ebs
原文地址：https://www.cnblogs.com/1234yyf/p/12424915.html
