2023年7月29日发(作者：)

⽤echarts结合jsp,servlet⽣成统计图表⼀ 简介 ECharts，⼀个使⽤ JavaScript 实现的开源可视化库，可以流畅的运⾏在 PC 和移动设备上，兼容当前绝⼤部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的⽮量图形库 ZRender，提供直观，交互丰富，可⾼度个性化定制的数据可视化图表。⼆ 案例 这⾥我们以图书信息表为例,数据库⽤mysql5.5-- 简单图书管理系统DROP DATABASE IF EXISTS bookdb ;CREATE DATABASE bookdb CHARACTER SET utf8;USE bookdb;DROP TABLE IF EXISTS users;-- 建⽴⽤户表 ⽤于登录CREATE TABLE users( userId INT PRIMARY KEY AUTO_INCREMENT, userName VARCHAR(20) NOT NULL, PASSWORD VARCHAR(20) NOT NULL, email varchar(20), priv varchar(10))AUTO_INCREMENT=100;INSERT INTO users VALUES(NULL,'jack','123','jack@','管理员');INSERT INTO users VALUES(NULL,'⿇⼦','123''mazi@','普通⽤户');INSERT INTO users VALUES(NULL,'mike','123''mike@','普通⽤户');DROP TABLE IF EXISTS BookType;-- 建⽴图书类别表CREATE TABLE BookType( typeId INT PRIMARY KEY, typeName VARCHAR(20) NOT NULL);INSERT INTO BookType VALUES(1,'计算机类');INSERT INTO BookType VALUES(2,'⼯具辅助类');INSERT INTO BookType VALUES(3,'⾔情⼩说类');INSERT INTO BookType VALUES(4,'⼉童教育类');DROP TABLE IF EXISTS Books;-- 建⽴图书表CREATE TABLE Books( bookId INT PRIMARY KEY AUTO_INCREMENT, bookName VARCHAR(20) NOT NULL, number INT, price FLOAT, typeId INT , FOREIGN KEY(typeId) REFERENCES BookType(typeId))AUTO_INCREMENT=100;INSERT INTO Books VALUES(NULL,'Java⾯向对象',25,30.5,1);INSERT INTO Books VALUES(NULL,'c#语⾔程序设计',20,25.5,1);INSERT INTO Books VALUES(NULL,'html⽹页设计',40,16.5,1);INSERT INTO Books VALUES(NULL,'DreamvearCS使⽤教程',20,20.5,2);INSERT INTO Books VALUES(NULL,'myeclipse8.6使⽤教程',40,26.5,2);INSERT INTO Books VALUES(NULL,'都市圆舞曲',50,27.5,3);INSERT INTO Books VALUES(NULL,'⽟观⾳',24,32.5,3);INSERT INTO Books VALUES(NULL,'简爱',55,31.5,3);INSERT INTO Books VALUES(NULL,'⽅与圆',60,22.5,4);INSERT INTO Books VALUES(NULL,'穷爸爸富爸爸',60,33.5,4);------------------------------------------------------------------------ 此案例我们⽣成三个统计图表，⼀个柱状图⽤来显⽰每种图书价格的平均价；另⼀个柱状图⽤来显⽰每种图书的价格的最⼤值，最⼩值，平均值；⽤⼀个饼图来显⽰每种图书的库存总数。对应的统计sql如下：SELECT me,sum(number) as sumber,MIN(price) AS miprice, MAX(price) AS mxprice,AVG(price) AS avpriceFROM books b INNER JOIN bookType tON =GROUP BY me;结果如下最终的结果如下所⽰：

接下来，我们来查看关键代码：实体类=============================================package s;import izable;public class BookFunEntity implements Serializable{ private static final long serialVersionUID = -26855793L;

private String typeName; //类型名称 private int sumber; //总数 private double miprice; //最低价 private double mxprice; //最⾼价 private double avprice; //平均价

public BookFunEntity() { } //省略getter，setter}Dao层代码：===============================================package ;import .*;import .*;import nEntity;public class BookDaoImpl implements IBookDao{ //分组聚合查询 public List funQuery() { List bookList=null;

String sqlStr="SELECT me,sum(number) as sumber,MIN(price) AS miprice," +" MAX(price) AS mxprice,AVG(price) AS avprice" +" FROM books b INNER JOIN bookType t" +" ON =" +" GROUP BY me"; PreparedStatement psmt=null; ResultSet rs=null; Connection conn=n(); try { psmt=eStatement(sqlStr); rs=eQuery(); bookList=new ArrayList(); BookFunEntity book=null; while(()){ book=new BookFunEntity(); ber(("sumber")); rice(ble("avprice")); rice(ble("miprice")); rice(ble("mxprice")); eName(ing("typeName")); (book); } } catch (SQLException e) { tackTrace(); }finally{ onn(rs, psmt, conn); } return bookList; }}Serevlet代码：========================================package ts;import ption;import ;import tException;import rvlet;import rvletRequest;import rvletResponse;import oImpl;import ao;import nEntity;public class ShowEChartsServlet extends HttpServlet { private static final long serialVersionUID = 519781L; public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request,response); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String showJsp=ameter("show"); IBookDao bookDao=new BookDaoImpl(); List bookList=ry(); for(BookFunEntity book : bookList){ n(eName()+","+rice()); } ribute("bookList", bookList); if(showJsp==null || ("")){ showJsp="index"; } showJsp=showJsp+".jsp"; uestDispatcher(showJsp).forward(request, response); }}⾸页===============================================<%@ page language="java" import=".*" pageEncoding="UTF-8"%><%@ taglib prefix="c" uri="/jsp/jstl/core" %>

     

在单独的页⾯展⽰
简单柱状图 复杂柱状图 饼图 

====================================================单独显⽰简单柱状图的页⾯=========================================<%@ page language="java" import=".*" pageEncoding="UTF-8"%><%@ taglib prefix="c" uri="/jsp/jstl/core" %>

单独显⽰复杂柱状图的页⾯===============================================<%@ page language="java" import=".*" pageEncoding="UTF-8"%><%@ taglib prefix="c" uri="/jsp/jstl/core" %>

单独显⽰复杂柱状图的页⾯=========================== =======================<%@ page language="java" import=".*" pageEncoding="UTF-8"%><%@ taglib prefix="c" uri="/jsp/jstl/core" %>

=======================================================没有和数据库结合的演⽰页⾯，⾥⾯有每个参数的详细注释简单柱状图:<%@ page language="java" import=".*" pageEncoding="UTF-8"%><%@ taglib prefix="c" uri="/jsp/jstl/core" %>

================================================<%@ page language="java" import=".*" pageEncoding="UTF-8"%><%@ page language="java" import=".*" pageEncoding="UTF-8"%><%@ taglib prefix="c" uri="/jsp/jstl/core" %>

=================================================饼图:<%@ page language="java" import=".*" pageEncoding="UTF-8"%><%@ taglib prefix="c" uri="/jsp/jstl/core" %>