zoukankan      html  css  js  c++  java
  • 可视化: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("驱动加载失败");
    }
    }

    }

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

  • 相关阅读:
    SpringMVC中静态获取request对象 Spring中获取 HttpServletRequest对象【转载】
    springcloud 的loadbalancer 轮询算法切换方法 2021.4.3
    springboot项目启动增加图标
    rabbitmq 端口作用以及修改方法
    centos8 安装rabbitmq
    springcloud config client Value获取不到信息的问题的处理方法
    springcloud config配置git作为数据源然后启动报错 If you want an embedded database (H2, HSQL or Derby), please put it on the classpath.
    Sublime Text的列模式如何操作
    centos8 安装redis
    jQuery简单的Ajax调用
  • 原文地址:https://www.cnblogs.com/zhangxinyue/p/12436218.html
Copyright © 2011-2022 走看看