基于Servlet的Echarts例子（2018-12-26更新)
引子
ECharts是百度出品的，一个使用 JavaScript 实现的开源可视化库。程序员在Web页面上引入并稍作配置就能做出漂亮的数据图表。
本篇文章简单介绍一下如何在JSP中使用Echarts，例子图如下：
上手
图表显示是需要数据的，但是Echarts官网教程中为了演示方便直接在页面js中填入数据，如Demo-未来一周气温变化所示。“周一、周二..”等数据都直接在页面写好：
xAxis : [
{
type : 'category',
boundaryGap : false,
data : ['周一','周二','周三','周四','周五','周六','周日']
}
]
通常展示数据的页面需要动态的从远程服务器将数据取出放入图表。熟悉ajax的人，自然可以将上面的代码稍作修改实现动态取数据，这里尝试使用JSP来从服务器端获取数据。
HTML页面端参考代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 引入 ECharts 文件 -->
<script src="js/echarts.common.min.js"></script>
<script src="js/jquery-3.2.1.js"></script>
<title>Echarts4示例</title>
</head>
<body>
<div>Echarts4示例</div>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px; height: 400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var url = 'GetAllDataServlet';//获得销量、营业额、x轴的数据
$.getJSON(url).done(function(json) {//向url请求数据，如果成功，将数据放到json
// 2.从json中获得数据
salesVolume = json.salesVolume;//销量
bussinessVolume = json.bussinessVolume;//营业额
months = json.months;//月份
// 3.配置option
var option = {
title : {
text : 'ECharts 入门示例'
},
tooltip : {},
legend : {
data : [ '销量' ],
data : [ '营业额' ]
},
xAxis : {
data : months
},
yAxis : {},
series : [ {
name : '销量',
type : 'bar',
data : salesVolume
}, {
name : '营业额',
type : 'line',
data : bussinessVolume
} ],
toolbox : {
show : true,
feature : {
mark : {
show : true
},
dataView : {
show : true,
readOnly : false
},
magicType : {
show : true,
type : [ 'line', 'bar' ]
},
restore : {
show : true
},
saveAsImage : {
show : true
}
}
}
}
myChart.setOption(option);
})
</script>
</body>
</html>
这里的$.getJSON(url).done(function(json) ..使用了jQuery的ajax API，访问url指向的servlet，从servlet返回的数据放到json变量中。
服务器端参考代码
@WebServlet("/GetAllDataServlet")
public class GetAllDataServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public GetAllDataServlet() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
/*销量*/
Integer[] salesVolume = {10,100,20,56,35,80};
/*营业额*/
double[] bussinessVolume = {10*10,100*8.5,20*9.5,56*9,35*9.5,80*9};
/*横轴, 月份数据*/
String[] months = {"1","2","3","4","5","6"};
Map<String, Object> map = new HashMap<>();
map.put("salesVolume", salesVolume);
map.put("bussinessVolume",bussinessVolume);
map.put("months", months);
response.getWriter().println(JSON.toJSONString(map));
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
这里使用了阿里开发的FastJson库将map中的值转换成Echarts可识别的json字符串，格式形如：
{"bussinessVolume":[100.0,850.0,190.0,504.0,332.5,720.0],"months":["1","2","3","4","5","6"],"salesVolume":[10,100,20,56,35,80]}
其他：
实际上你也可以不用json工具，完全手写得到上述格式化字符串。
项目代码阅读指南：
- GetAllDataServlet.java，echart4.html是前端访问Servlet获得echarts所需数据的一个示例。
- index.jsp里面包含了有用的参考链接。重点掌握其中使用jQuery实现ajax带参数请求，详见里面jQuery $.post() 方法。
参考资料：
项目相关Git地址，如果不会使用Git，建议克隆下来，然后将相关代码复制粘贴到新建的Dynamic Web Project相应目录中。
本项目的EclipseJEE的参考代码-代码较老。
Echarts Example，里面包含了很多图表示例是文档。
JQuery Ajax, Axios, Fetch区别之我见，该文主要讲解发起Ajax的请求的几种常用方法，现在常用Axios，2018-12更新。
基于Servlet的Echarts例子（2018-12-26更新)的更多相关文章
- OPPO Developers Conference（2018.12.26）
时间:2018.12.26地点:北京国家会议中心
- 微信小程序 - 接口更新记录以及解决方案（2018/12/26）
2018/8/17 - 背景音频需要在app.json添加requireBackGroundModes 2018/9/12 - 微信更改获取用户信息接口/获取位置等接口 - button 2018/1 ...
- 2018.12.26 Mac下的Eclipse在编辑Spring配置文件xml时自动提示类class包名配置
1.先查看下自己的Eclipse是什么版本,步骤如下: 2.选择Install New Software 3.输入网址 http://dist.springsource.com/release/TOO ...
- 2018.12.26 考试(哈希，二分，状压dp)
T1 传送门 解题思路 发现有一个限制是每个字母都必须相等,那么就可以转化成首尾的差值相等,然后就可以求出\(k-1\)位的差值\(hash\)一下.\(k\)为字符集大小,时间复杂度为\(O(nk) ...
- 梦想3D控件 2018.7.26更新
下载地址: http://www.mxdraw.com/ndetail_108.html 1. 编写所有接口函数使用的CHM文档 2. 增加交互绘制功能 3. 增加案例弧形窗建模案例 4. 增 ...
- 梦想CAD控件 2018.7.26更新
下载地址: http://www.mxdraw.com/ndetail_107.html 1. 增加属性匹配功能 2. 增加List命令 3. 增加CAD图纸审图批注功能 4. 环形阵列功能 ...
- 梦想Android版CAD控件2018.7.26更新
下载地址: http://www.mxdraw.com/ndetail_109.html 1. 增加所有接口CHM帮助文档 2. 增加得到当前打开文件函数 3. 读写CAD扩展记录接口 4. 读写属性 ...
- 2018.12.02 Socket编程之初识Socket
Socket编程主要分为TCP/UDP/SCTP三种,每一种都有各自的优点,所以会根据实际情况决定选用何种Socket,今天开始我将会逐步学习Socket编程,并将学习过程记录于此. 今天学习的是TC ...
- loli的测试-2018.12.9
模拟赛-2018.12.9 这是NOIP之后第一次模拟赛...但是考的比较悲惨. 非常喜欢写考试总结,不知道为什么... T1:https://www.luogu.org/problemnew/sho ...
随机推荐
- CNN
<卷积神经网络详述> <卷积神经网络——雨石博客> 学习参考:http://blog.csdn.net/stdcoutzyx/article/details/4159 ...
- React Navigation基本用法
/** * Created by apple on 2018/9/23. */ import React, { Component } from 'react'; import {AppRegistr ...
- react中Redux应用框架学习
1. 最普通的react-redux 2.应用context的傻瓜组件和聪明组件的redux框架 3. 精简版react-redux,利用react-redux模块的redux(推荐) 4.多个模 ...
- mysql数据库的备份
有时会遇到需要重装虚拟机的情况,这时候之前创建好的数据库就需要备份啦,等重新装好虚拟机直接导入就可以正常使用. 数据库备份大体分为两步: 第一步.导出数据库,因为是备份,会将所有的数据库导出,因此需要 ...
- 2018-计算机系机试（第二批）-C-数字字符个数
C. 数字字符个数 单点时限: 1.0 sec 内存限制: 256 MB 输入一行信息,输出其中包含的数字字符个数. 例如:输入 a<4 >w,输出 1 . 输入格式 一行字符串 (可能含 ...
- CodeBlocks无法调试的解决方法
闲话: 万万没想到我也会写这个东西.一开始软件工程课的时候老师要求我们写博客园,一直都是被动地在写博客.刚刚在重温C语言的时候发现的各种各样问题觉得还是写下来比较好,一旦以后自己又忘了呢……(摊手 顺 ...
- java中的i++与++i的区别以及除法、模的用法（基础）
java中i++与++i的区别: 例如:int i=3; (先运算再赋值)j=++i; i的值先变成4,再赋给j,j的值为4: (先赋值再运算)j=i++; 先将i的值3赋给j,j的值为3,然后i变成 ...
- phpstorm快捷键总结
如果映射的是eclipse的快捷键,又同时安装了英特尔的GPU软件,那么会有这个快捷键冲突 就是快速复制快捷键:ctrl+alt+方向键 会调用英特尔旋转屏幕,禁用掉即可 PhPStorm 是 Je ...
- SQLI DUMB SERIES-20
(1)登录成功后页面: (2)登录成功后,用burp开始抓包,刷新浏览器页面,将会跳出如下页面 (3)根据各种提示,知道需要从cookies入手,寻找闭合方式 闭合方式为单引号.注释符也可以用 (4) ...
- cms建站
1. 搭建php环境 phpnow软件安装(下载地址: http://www.phpnow.org) 注意如果安装失败,请用以下解决办法: 1.请使用命令提示符(管理员)2.打开后进入PHPnow目 ...