数据可视化，ECharts提供了很好的资源，ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。
ECharts 遵循 Apache-2.0 开源协议，免费商用。
ECharts 兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等）及兼容多种设备，可随时随地任性展示。

本文所用到的echarts代码地址：https://echarts.apache.org/examples/zh/editor.html?c=bar-background
运行结果如图：
在这里插入图片描述
这里要导入的包，除了正常运行tomcat项目的包之外还有echarts官方的js包：echarts.min.js
这里建了一张表saleslip(money,cname,cnum)为了便于操作我向其中加入了这些数据：
在这里插入图片描述
下面写一个saleslipDao.java，调用函数操作数据库,saleslipDao代码这里只有OutsaleslipsInfo()函数在本文中是有用的
saleslipDao:

package dao;

import java.sql.*;

public class saleslipDao {
    String DRIVER_NAME = "com.mysql.cj.jdbc.Driver";
    final String URL = "jdbc:mysql://localhost:3306/ClothesM7";//url地址，
    // 可以在Drive and Data Source里面查看自己的数据库的地址
    final String USER_NAME = "root";
    //密码
    final String PASSWORD = "Wzy768291";//我设置的密码
    //插入数据
    public void insertslipInfo(String cname,String cnum,String money){
        try{
            Class.forName(DRIVER_NAME);
            Connection conn = DriverManager.getConnection(URL, USER_NAME, PASSWORD);
            String sql="insert into ClothesM7.saleslip(money, cname, cnum) values(?,?,?)";
            //插入记录的sql语句
            PreparedStatement pstmt = conn.prepareStatement(sql);//创建PreparedStatement对象
            pstmt.setString(1,money);//将字符cname存储到pstmt对象中
            pstmt.setString(2,cname);//将字符cnum存储到pstmt对象中
            pstmt.setString(3,cnum);//将字符money存储到pstmt对象中
            pstmt.execute();//patmt将记录插入到数据库中
        }
        catch (SQLException | ClassNotFoundException e){
            System.out.println("出现SQLException异常");//如果重复上传同一张，即数据库中保存的有的话，会抛出异常，并不再添加
        }
    }
    public ResultSet OutsaleslipsInfo() {
        try {
            Class.forName(DRIVER_NAME);
            Connection conn = DriverManager.getConnection(URL, USER_NAME, PASSWORD);
            String sql = "select cname,sum(cnum) as num,sum(money) as cvalue from saleslip group by cname";
            try {
                Statement stmt = conn.createStatement();
                return stmt.executeQuery(sql);
            } catch (SQLException throwables) {
                throwables.printStackTrace();
            }

        } catch (ClassNotFoundException | SQLException e) {
            e.printStackTrace();

        }
        return null;
    }
}

新建了一个jsp文件来显示我们的图表
adm.jsp:

<%--
  Created by IntelliJ IDEA.
  User: wangzeyi
  Date: 2020/12/30
  Time: 下午1:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="dao.saleslipDao" %>
<%@ page import="java.sql.ResultSet" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="java.util.List" %>

<html>
<head>
    <title>Title</title>
    <!--导入echarts的js包-->
    <script src="echarts.min.js"></script>
</head>
<body bgcolor="#f5f5dc">
<div style="position:relative;left: 10px;width: 300px"><p style="font-family: 微软雅黑;font-size: 20px;color:orange">当前服装销售量：</p></div>

<div id="main" style="width: 60%; height: 500px;"></div>
<div style="position:relative;left: 10px;width: 300px;"><p style="font-family: 微软雅黑;font-size: 20px;color:orange">当前服装销售额：</p></div>
<div id="main2" style="width: 60%; height: 500px;"></div>
<%
    List<String> list1 = new ArrayList<String>();
    List<String> list2 = new ArrayList<String>();
    List<String> list3 = new ArrayList<String>();
    //利用dao包
    saleslipDao newsale = new saleslipDao();
    try{
        //调用OutsaleslipsInfo(),返回数据，这里我返会的根据服装名称分组，返回每个服装销售金额跟销售总数
        ResultSet rs = newsale.OutsaleslipsInfo();
        while (rs.next()){
            String cname = rs.getString("cname");//获取服装名称
            String cnum = rs.getString("num");//获取服装数量
            String cmoney = rs.getString("cvalue");//获取服装价格
            list1.add(cname);//循环加入list
            list2.add(cnum);
            list3.add(cmoney);

        }
    } catch (Exception e) {
        e.printStackTrace();
    }

%>


</body>
</html>
<script type="text/javascript">
    var abra = new Array();//定义空数组，便于将list转换为数组
    var abrb = new Array();
    var abrc = new Array();
    <%
    if(list1!=null){//将list1服装转换为服装数组
    for(int j=0;j<list1.size();j++)
    {
    %>
    //alert("111");
    abra[<%=j%>] = '<%=list1.get(j)%>';
    <%}
    }%>

    <%
       if(list2!=null){//将list2数量转换为服装数量数组
       for(int j=0;j<list2.size();j++)
       {
       %>
    //alert("111");
    abrb[<%=j%>] = '<%=list2.get(j)%>';
    <%}
    }%>

    <%
       if(list3!=null){//将list3金额转换为金额数组
       for(int j=0;j<list3.size();j++)
       {
       %>
    //alert("111");
    abrc[<%=j%>] = '<%=list3.get(j)%>';
    <%}
    }%>
    var mychart = echarts.init(document.getElementById("main"));//第一个图表
    var mychart2 = echarts.init(document.getElementById("main2"));//第二个图表
    //echarts复制的
    var option1 = {
        xAxis: {
            type: 'category',
            data:abra//改成我的服装名称数组
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: abrb,//改成销售服装数量数组
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
                color: 'rgba(135, 206, 235, 0.8)'
            }
        }]
    };

    var option2 = {
        xAxis: {
            type: 'category',
            data:abra//改成我的服装名称数组
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: abrc,//改成服装金额数组
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
                color: 'rgba(135, 206, 235, 0.8)'
            }
        }]
    };

    mychart.setOption(option1);//执行
    mychart2.setOption(option2);//执行
</script>

之后运行adm.jsp即可显示我们的数据图表。

# echarts
Logo
腾讯云开发者社区

腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。

更多推荐

Springboot+MySQL 实现从数据库获取数据展示到前端

1.运行效果效果图如下：2.创建数据库表数据库名为"springboot",数据库表名为"user"，数据库表里面放了5条数据，字段分别为：“id”，“name”，“age”，“email”。3.新建SpringBoot项目1、选择Spring Initial...

avatar 腾讯云开发者社区
cover

腾讯云建官网：一个完整的自助建站的过程，不用代码，2小时就可以制作自己的网站

avatar 腾讯云开发者社区

数据库 实验二 数据库的简单查询和连接查询实验

– l）用Transact-SQL语句表示下列操作．在学生选课库中实现其数据查询操作．– ①求数学系学生的学号和姓名。select sno,sname from student where sdept='MA';– ②求选修了课程的学生学号。select distinct sno from sc;– ③求选修C1课程的学生学号和成绩，并要求对查询结果按成绩降序排列，如果成绩相同则按学号升序排列。s

avatar 腾讯云开发者社区