JavaScript+Echarts：图表库直观展示报表数据

程序员文章站 2022-06-07 20:08:32

...

Echarts，是一个纯 Javascript 的图表库，可以流畅的运行在 PC端。兼容当前绝大部分浏览器（IE8/9/10/11，Microsoft，Google，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 、类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。

导入依赖文件：

echarts.common.min.js
jquery.min.js

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>My JSP 'index.jsp' starting page</title>
 <meta http-equiv="pragma" content="no-cache">
 <meta http-equiv="cache-control" content="no-cache">
 <meta http-equiv="expires" content="0">    
 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 <meta http-equiv="description" content="This is my page">
 <!--
 <link rel="stylesheet" type="text/css" href="styles.css">
 -->
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="echarts.common.min.js"></script>

  </head>
<body>
    <div align="center">
   <div id="main" style="width: 600px; height: 400px;"></div>
  </div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
myChart.setOption({
toolbox: {
show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {show: true}
                 }
        },
        title : {
  text : '神君九月销量报表'
 },
 tooltip : {},
 legend : {
  data : ['销量']
 },
 xAxis : {
  data : []
 },
 yAxis : {
 },
 series : [ {
  name : '销量',
  type : 'bar',
  data : []
 } ]
});
</script>

<script type="text/javascript">
$(function() {
$.post(
  'bar.do',
  function(result){
   myChart.setOption( {
   xAxis : {
  data :result.name
 },
    series : {
     data :result.value
    }
   });
  },'json'
 )
})
</script> 
</body>
</html>

以上是HTML页面的显示代码，数据通过后端传递。

$.post：Ajax，异步拿取数据。
$(function() )：jQuery框架，封装了JavaScript。

package com.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.alibaba.fastjson.JSONObject;//导入阿里巴巴的json包
import com.alibaba.fastjson.JSONArray;
import com.dao.DataDao;
import com.dao.User;

public class bar extends HttpServlet{
@Override
 protected void doGet(HttpServletRequest req, HttpServletResponse resp)
   throws ServletException, IOException {
  // TODO Auto-generated method stub
  doPost(req, resp);
 }
 @Override
 protected void doPost(HttpServletRequest req, HttpServletResponse resp)
   throws ServletException, IOException {
JSONObject obj=new JSONObject();
JSONArray values=new JSONArray();
JSONArray names=new JSONArray();

List<User> list=DataDao.queryAllUser();
  for (int i = 0; i <8; i++) {
   values.add(list.get(i).getUmoney());
   names.add(list.get(i).getUname());
  }
//  for (User user : list) {
//  values.add(user.getUmoney());
//  names.add(user.getUname());
//  }

//  int[] in={11, -2, 93, 13, 35, 26,47};
//  String[] str={"³ÄÉÀ", "ÑòÃ«ÉÀ", "Ñ©·ÄÉÀ", "¿ã×Ó", "¸ß¸úÐ¬", "Íà×Ó", "´óÒÂ"};
//  for(int i=0;i<in.length;i++){
//   values.add(in[i]);
//   names.add(str[i]);
//  }
obj.put("value",values);
  obj.put("name",names);
  resp.setContentType("text/plain;charset=utf-8");
        PrintWriter out=resp.getWriter();
  out.print(obj);
  }
}
//将数据转为一定格式，符合echarts的数据格式要求。

将从数据库查出来的数据通过json封装，由Ajax转发到页面。

package com.dao;

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

public class DataDao {

public static List<User> queryAllUser() {
  List<User> list = new ArrayList<User>();
  Connection con = BaseDao.getCon();
  PreparedStatement pre = null;
  ResultSet res = null;
  try {
   pre = con.prepareStatement("select sal,ename from emp");
   res = pre.executeQuery();
   while (res.next()) {
    User h = new User();
    h.setUmoney(res.getInt(1));
    h.setUname(res.getString(2));
    list.add(h);
   }
  } catch (Exception e) {
   // TODO Auto-generated catch block
   e.printStackTrace();
  } finally {
   BaseDao.closeAll(res, pre, con);
  }
  return list;
 }
}

从数据库把数据查出来，以后，可能会进行数据方面的统计。

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 
 xmlns="http://java.sun.com/xml/ns/javaee" 
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
 xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
 http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
  <welcome-file-list>
    <welcome-file>bar.jsp</welcome-file>
  </welcome-file-list>

<servlet>
  <servlet-name>bar</servlet-name>
  <servlet-class>com.servlet.bar</servlet-class>
  </servlet>
  <servlet-mapping>
  <servlet-name>bar</servlet-name>
  <url-pattern>/bar.do</url-pattern>
  </servlet-mapping>

<servlet>
  <servlet-name>pie</servlet-name>
  <servlet-class>com.servlet.PieDo</servlet-class>
  </servlet>
  <servlet-mapping>
  <servlet-name>pie</servlet-name>
  <url-pattern>/pie.do</url-pattern>
  </servlet-mapping>
  
  </web-app>

以上是web.xml的配置，也就是
servlet路径的相关配置。

这样就实现了echarts的bar报表动态加载数据！

对于某些财务方面的业务具有重要价值！

JavaScript+Echarts：图表库直观展示报表数据

JavaScript+Echarts：图表库直观展示报表数据

图表中如何实现动态变更分类轴与系列值 Finereportweb报表数据库FRdemo图表