欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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报表动态加载数据!

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

相关标签: echarts