JavaWeb可视化：Web+Echarts案例：豆瓣日剧豆列电影信息可视化（柱状图、饼状图、折线图）

柱状图案例

柱状图用来比较多项目的数值情况，从构成上来说，柱状图以坐标轴上的长方形元素作为变量，以此来达到展现并比较数据情况的目的。柱状图形式多种多样，以适应不同场合数据展示，常用的有如下形式：

可以参考http://echarts.baidu.com/echarts2/doc/example.html 和 http://echarts.baidu.com/examples/#chart-type-bar，根据自己的实际需求和审美选择不同的形式。

常用配置项参数：

• title：标题组件，包含主标题和副标题。
• title.show boolean[ default: true ]，是否显示标题组件
• title.text string[ default: '' ]，主标题文本，支持使用 \n 换行
• title.target string[ default: 'blank' ]，指定窗口打开主标题超链接
• title.target string[ default: 'blank' ]，指定窗口打开主标题超链接。可选：'self' 当前窗口打开；'blank' 新窗口打开
• title.textStyle.color Color[ default: '#333' ]，主标题文字的颜色
• title.textStyle.fontStyle string[ default: 'normal' ]，主标题文字字体的风格，可选：'normal'，'italic'，'oblique'
• title.textStyle.verticalAlign string文字垂直对齐方式，默认自动。可选：'top'，'middle'，'bottom
• title.subtext string[ default: '' ]，副标题文本，支持使用 \n 换行
• legend：图例组件
• grid：直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。可以在网格上绘制折线图，柱状图，散点图（气泡图）。
• xAxis：直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠
• yAxis：直角坐标系 grid 中的 y 轴，一般情况下单个 grid 组件最多只能放左右两个 y 轴，多于两个 y 轴需要通过配置 offset 属性防止同个位置多个 Y 轴的重叠
• color：调色盘颜色列表。如果系列没有设置颜色，则会依次循环从该列表中取颜色作为系列颜色

---

需求：将WebMagic爬虫获取到的豆瓣电影的评分以柱状图图的形式展现出来。

 1.  使用之前使用WebMagic爬取的豆瓣豆列电影数据，数据库movies表如下：

2. 新建Java Web项目，红框处需要勾选

3. 将下载的jstl.jar、standard.jar和mysql-connector-java-5.1.6-bin.jar拷贝至lib目录下；在WebContent下新建res目录，在res目录下新建js目录，然后将echarts.min.js、jquery-3.3.1.min.js拷贝到js目录下。整体目录结构如下：

4. 编写Movie类，封装电影信息

package com.liudm.entity;

public class Movie {
    //电影信息
	private int m_id;
	private String m_title;
	private String m_urls;
	private float m_ratings;
	//电影详细信息
	private String m_dir;
	private String m_actor;
	private String m_type;
	private String m_time;
	
	public Movie() {
		super();
	}

	public Movie(String m_title, String m_urls, float m_ratings,
			String m_dir, String m_actor, String m_type, String m_time) {
		super();
		this.m_title = m_title;
		this.m_urls = m_urls;
		this.m_ratings = m_ratings;
		this.m_dir = m_dir;
		this.m_actor = m_actor;
		this.m_type = m_type;
		this.m_time = m_time;
	}
	public Movie(int m_id, String m_title, String m_urls, float m_ratings,
			String m_dir, String m_actor, String m_type, String m_time) {
		super();
		this.m_id = m_id;
		this.m_title = m_title;
		this.m_urls = m_urls;
		this.m_ratings = m_ratings;
		this.m_dir = m_dir;
		this.m_actor = m_actor;
		this.m_type = m_type;
		this.m_time = m_time;
	}

	public int getM_id() {
		return m_id;
	}
	public void setM_id(int m_id) {
		this.m_id = m_id;
	}
	public String getM_title() {
		return m_title;
	}
	public void setM_title(String m_title) {
		this.m_title = m_title;
	}
	public String getM_urls() {
		return m_urls;
	}
	public void setM_urls(String m_urls) {
		this.m_urls = m_urls;
	}
	public float getM_ratings() {
		return m_ratings;
	}
	public void setM_ratings(float m_ratings) {
		this.m_ratings = m_ratings;
	}
	public String getM_dir() {
		return m_dir;
	}
	public void setM_dir(String m_dir) {
		this.m_dir = m_dir;
	}
	public String getM_actor() {
		return m_actor;
	}
	public void setM_actor(String m_actor) {
		this.m_actor = m_actor;
	}
	public String getM_type() {
		return m_type;
	}
	public void setM_type(String m_type) {
		this.m_type = m_type;
	}
	public String getM_time() {
		return m_time;
	}
	public void setM_time(String m_time) {
		this.m_time = m_time;
	}

	@Override
	public String toString() {
		return "Movie [m_id=" + m_id + ", m_title=" + m_title + ", m_urls="
				+ m_urls + ", m_ratings=" + m_ratings + ", m_dir=" + m_dir
				+ ", m_actor=" + m_actor + ", m_type=" + m_type + ", m_time="
				+ m_time + "]";
	}
}

5. 编写mysql.properties属性文件，存储连接数据库的相关配置信息：其中数据库名为movies

driver=com.mysql.jdbc.Driver
url=jdbc:mysql://localhost:3306/movies
username=root
pwd=nothing

6. 编写MySqlUtil.java，连接数据库的相关内容

package com.liudm.utils;

import java.io.IOException;
import java.io.InputStream;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.Properties;

public class MySqlUtil {  
    // 读取属性文件，获得连接  
    static Connection con = null;  
    static Properties ps = new Properties();  
    static {  
        // 读取属性文件  
        InputStream in = MySqlUtil.class.getClassLoader().getResourceAsStream("mysql.properties");  
        try {  
            ps.load(in);  
            String driver = ps.getProperty("driver");  
            String url = ps.getProperty("url");  
            String username = ps.getProperty("username");  
            String pwd = ps.getProperty("pwd");  
            System.out.println(driver + url + username + pwd);  
  
            Class.forName(driver);  
            con = DriverManager.getConnection(url, username, pwd);  
        } catch (IOException e1) {  
            // TODO Auto-generated catch block  
            e1.printStackTrace();  
        } catch (ClassNotFoundException e) {  
            // TODO Auto-generated catch block  
            e.printStackTrace();  
        } catch (SQLException e) {  
            // TODO Auto-generated catch block  
            e.printStackTrace();  
        }  
    }  
  
    public static Connection getConnection() {  
        return con;  
    }  
  
    // 关闭资源
    public static void closeRes(ResultSet rs, PreparedStatement ps, Connection con) {  
        if (rs != null) {  
            try {  
                rs.close();  
            } catch (SQLException e) {  
                // TODO Auto-generated catch block  
                e.printStackTrace();  
            }  
        }  
        if (con != null) {  
            try {  
                con.close();  
            } catch (SQLException e) {  
                // TODO Auto-generated catch block  
                e.printStackTrace();  
            }  
        }  
        if (ps != null) {  
            try {  
                ps.close();  
            } catch (SQLException e) {  
                // TODO Auto-generated catch block  
                e.printStackTrace();  
            }  
        }  
    }
}

7. 编写接口MovieDao.java，编写抽象方法，实现电影信息的查询

package com.liudm.dao;

import java.util.List;

import com.liudm.entity.Movie;

public interface MovieDao {
	public List<Movie> queryAllMovies();
}

8. 编写MovieDaoImpl.java，重写queryAllMovies方法

package com.liudm.dao;

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

import com.liudm.entity.Movie;
import com.liudm.utils.MySqlUtil;

public class MovieDaoImpl  implements MovieDao{  
    Connection con = null;  
    Movie movie = null;  
    PreparedStatement pre = null;  
    ResultSet rs = null;  
  
    @Override  
    public List<Movie> queryAllMovies() {  
        con = MySqlUtil.getConnection();  
        List list = new ArrayList();  
        String sql="select * from movies  limit 30";  
        try {  
            pre=con.prepareStatement(sql);  
            rs=  pre.executeQuery();  
            while(rs.next()){  
                int mid=rs.getInt("m_id");  
                String mtitle=rs.getString("m_title");  
                String murls=rs.getString("m_urls");  
                float mratings=rs.getFloat("m_ratings");  
                String mdir=rs.getString("m_dir");  
                String mactor=rs.getString("m_actor");  
                String mtype=rs.getString("m_type");  
                String mtime=rs.getString("m_time");  
                movie = new Movie(mid, mtitle, murls, mratings, mdir, mactor, mtype, mtime);  
                list.add(movie);  
            }  
              
        } catch (SQLException e) {  
            // TODO Auto-generated catch block  
            e.printStackTrace();  
        }finally{  
            //MySQLUtil.closeRes(rs, pre, con);  
        }  
        return list;  
    }  
}

9. 新建Servlet包。每开发一个Servlet，都要在web.xml中配置Servlet才能够使用，这实在是很头疼的事情，所以Servlet3.0之后提供了