• 可视化:echarts初使用


    本次项目,在老师的指导下学会了在navacat中导入sql文件,还学会了echarts的使用,当然是从Echarts的官网:https://echarts.apache.org/examples/zh/editor.html?c=bar-stack寻找的模板,之后为了传值,自学了json的用法,虽然还不是太懂,也不是很熟练,但是一步一步的能传值了,下面是源代码:

    柱状图页面:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script src="echarts/echarts.min.js"></script>
    <script src="Jquery[1].js"></script>
    </head>
    <body>
    <input type="date" name="date"><button>查询</button>
    <div id="main" style=" 600px;height:400px;overflow: auto;"></div>
    <script type="text/javascript">
    // 基于准备好的dom,初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    var names=[];
    var nums=[];
    $("button").click(function(){
    $.post(
    'http://localhost:8080/class.ksh.test/search',
    {"courses":$("input[name=Date]").val()},
    function(msg){
    var json=courses.parse(msg);
    var size=courses.length;
    for(i=0;i<size;i++){
    names.push(json[i].name);
    nums.push(parseInt(json[i].num));
    }

    myChart.hideLoading();
    // 指定图表的配置项和数据
    var option = {
    title: {
    text: $("input[name=date]").val()+'确诊人数'
    },
    tooltip: {},
    legend: {
    data:['确诊人数']
    },
    xAxis: {
    data: names
    },
    yAxis: {},
    series: [{
    name: '确诊人数',
    type: 'bar',
    data: nums
    }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    tr="<tr><th>省份</th><th>确诊人数</th><th>疑似人数</th><th>治愈人数</th><th>死亡人数</th><th>编码</th></tr>";
    $('.head').append(tr);
    for(i=0;i<size;i++)
    $('.main').append("<tr></tr>");
    $('.main tr').each(function(i){
    $(this).append("<td>"+json[i].name+"</td>");
    $(this).append("<td>"+json[i].num+"</td>");
    $(this).append("<td>"+json[i].yisi+"</td>");
    $(this).append("<td>"+json[i].cure+"</td>");
    $(this).append("<td>"+json[i].dead+"</td>");
    $(this).append("<td>"+json[i].code+"</td>");
    })
    }

    )
    })
    </script>
    </body>
    </html>

    java代码(部分没用到的不贴了):

    servlet:

    package com.hjf.servlet;

    import java.io.IOException;
    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.hjf.entity.Course;
    import com.hjf.entity.Course1;
    import com.hjf.service.CourseService;

    @WebServlet("/CourseServlet")
    public class CourseServlet extends HttpServlet {

    private static final long serialVersionUID = 1L;

    CourseService service = new CourseService();

    /**
    * 方法选择
    */
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    req.setCharacterEncoding("utf-8");
    String method = req.getParameter("method");

    if ("search".equals(method)) {
    add(req, resp);
    }

    private void search(HttpServletRequest req, HttpServletResponse resp) throws IOException, ServletException{
    req.setCharacterEncoding("utf-8");
    String Date = req.getParameter("Date");
    List<Course> courses = service.search(Date);
    System.out.println(courses);
    if(courses == null) {
    req.setAttribute("courses", "查询失败,此月份无信息");
    req.getRequestDispatcher("search.jsp").forward(req,resp);
    } else {
    req.setAttribute("courses", courses);
    req.getRequestDispatcher("searchlist.jsp").forward(req,resp);
    req.getRequestDispatcher("try.html").forward(req,resp);
    }
    }

    Course:

    package com.hjf.dao;

    import java.sql.Connection;
    import java.sql.ResultSet;
    import java.sql.SQLException;
    import java.sql.Statement;
    import java.util.ArrayList;
    import java.util.List;

    import com.hjf.entity.Course;
    import com.hjf.entity.Course1;
    import com.hjf.util.DBUtil;


    public class Course {

    private String Province;
    private String Confirmed_num;
    private String City;
    private String Yisi_num;
    private String Cured_num;
    private String Dead_num;
    private String Code;

    public String getProvince() {
    return Province;
    }
    public void setProvince(String Province) {
    this.Province = Province;
    }
    public String getConfirmed_num() {
    return Confirmed_num;
    }
    public void setConfirmed_num(String confirmed_num) {
    this.Confirmed_num = confirmed_num;
    }
    public String getCity() {
    return City;
    }
    public void setCity(String city) {
    this.City = city;
    }
    public String getYisi_num() {
    return Yisi_num;
    }
    public void setYisi_num(String yisi_num) {
    this.Yisi_num = yisi_num;
    }
    public String getCured_num() {
    return Cured_num;
    }
    public void setCured_num(String cured_num) {
    this.Cured_num = cured_num;
    }
    public String getDead_num() {
    return Dead_num;
    }
    public void setDead_num(String dead_num) {
    this.Dead_num = dead_num;
    }
    public String getCode() {
    return Code;
    }
    public void setCode(String code) {
    this.Code = code;
    }

    public Course(String Province, String City, String Confirmed_num, String Yisi_num, String Cured_num,
    String Dead_num, String Code) {
    this.Province=Province;
    this.City=City;
    this.Confirmed_num=Confirmed_num;
    this.Yisi_num=Yisi_num;
    this.Cured_num=Cured_num;
    this.Dead_num=Dead_num;
    this.Code=Code;

    }

    }

    Dao:

    public List<Course> search(String Date) {
    String sql = "select * from info1 where Date ='"+Date+"'";

    List<Course> list = new ArrayList<>();
    Connection conn = DBUtil.getConn();
    Statement state = null;
    ResultSet rs = null;

    try {
    state = conn.createStatement();
    rs = state.executeQuery(sql);
    Course bean = null;
    while (rs.next()) {
    String Province = rs.getString("Province");
    String City = rs.getString("City");
    String Confirmed_num = rs.getString("Confirmed_num");
    String Yisi_num = rs.getString("Yisi_num");
    String Cured_num = rs.getString("Cured_num");
    String Dead_num = rs.getString("Dead_num");
    String Code = rs.getString("Code");
    bean = new Course(Province,City,Confirmed_num,Yisi_num,Cured_num,Dead_num,Code);
    list.add(bean);
    }
    } catch (SQLException e) {
    e.printStackTrace();
    } finally {
    DBUtil.close(rs, state, conn);
    }
    System.out.println(list);
    return list;
    }

    service:

    package com.hjf.service;

    import java.util.List;

    import com.hjf.dao.CourseDao;
    import com.hjf.entity.Course;
    import com.hjf.entity.Course1;

    public class CourseService {

    public List<Course> search(String Date) {
    return cDao.search(Date);
    }

    }

    JDBCUtil:

    package com.a;

    import java.io.IOException;
    import java.io.InputStream;
    import java.util.Properties;

    public class JDBCUtils {
    //静态语句块
    static {
    //JDBCUtils.calss获得对象
    //getClassLoader()类加载器
    //getResourceAsStream("db.properties")加载资源文件放到输入流中
    InputStream is = JDBCUtils.class.getClassLoader().getResourceAsStream("db.properties");
    //创建Properties类型对象
    Properties p = new Properties();
    //加载流文件
    try {
    p.load(is);
    String driver = p.getProperty("driver");
    //加载驱动
    Class.forName(driver);
    System.out.println("驱动加载成功");

    } catch (Exception e) {
    // TODO Auto-generated catch block
    e.printStackTrace();
    }

    }

    }

    DBUtil:

    package com.hjf.util;

    import java.sql.Connection;
    import java.sql.DriverManager;
    import java.sql.PreparedStatement;
    import java.sql.ResultSet;
    import java.sql.SQLException;
    import java.sql.Statement;


    public class DBUtil {

    public static String db_url = "jdbc:mysql://localhost:3306/erqiu?characterEncoding=utf8";
    public static String db_user = "root";
    public static String db_pass = "zhangxinyue520";

    public static Connection getConn () {
    Connection conn = null;

    try {
    Class.forName("com.mysql.jdbc.Driver");
    conn = DriverManager.getConnection(db_url, db_user, db_pass);
    } catch (Exception e) {
    e.printStackTrace();
    }

    return conn;
    }

    public static void close (Statement state, Connection conn) {
    if (state != null) {
    try {
    state.close();
    } catch (SQLException e) {
    e.printStackTrace();
    }
    }

    if (conn != null) {
    try {
    conn.close();
    } catch (SQLException e) {
    e.printStackTrace();
    }
    }
    }

    public static void close (ResultSet rs, Statement state, Connection conn) {
    if (rs != null) {
    try {
    rs.close();
    } catch (SQLException e) {
    e.printStackTrace();
    }
    }

    if (state != null) {
    try {
    state.close();
    } catch (SQLException e) {
    e.printStackTrace();
    }
    }

    if (conn != null) {
    try {
    conn.close();
    } catch (SQLException e) {
    e.printStackTrace();
    }
    }
    }

    public static void main(String[] args) throws SQLException {
    Connection conn = getConn();
    PreparedStatement pstmt = null;
    ResultSet rs = null;
    String sql ="select * from info1";
    pstmt = conn.prepareStatement(sql);
    rs = pstmt.executeQuery();
    if(rs.next()){
    System.out.println("欧了");
    }else{
    System.out.println("再试试");
    }
    }
    }

    JDBC:

    package com.tjl.jdbc;

    public class JDBC {
    public static void main(String args[]) {
    try {
    Class.forName("com.mysql.jdbc.Driver");
    System.out.println("驱动加载成功");
    } catch (ClassNotFoundException e) {
    e.printStackTrace();
    System.out.println("驱动加载失败");
    }
    }

    }

    错误肯定还有很多,之后我会继续学习,改正不足,查找缺漏。

  • 相关阅读:
    mssql sqlserver 从指定字符串中获取数字的方法
    SpringBoot整合junit
    SpringBoot之RESTful风格
    SpringBoot属性配置
    SpringBoot 基于web应用开发(请求参数获取,静态资源,webjars)
    Spring Boot入门及第一个案例
    解决Zabbix网页端Get value error: cannot connect to [[192.168.238.139]:10050]: [113] No route to host问题
    Linux配置本地yum源
    ELK安装redis 执行make命令时报错解决方法
    CentOS 7 配置网络连接
  • 原文地址:https://www.cnblogs.com/zhangxinyue/p/12436218.html
Copyright © 2020-2023  润新知