Echarts是百度的页面图表框架，使用其稍作配置就能在web上整出漂亮的图表。
本篇文章简单的介绍一下“JSP使用Echarts的最简单的例子“，例子图如下
关于echarts详细资料可以看这里：http://echarts.baidu.com/index.html
图表显示是需要数据的，但是其官网教程中为了演示方便直接在页面js中填入数据，如下面链接所示，周一、周二等数据都是在页面直接写好：
http://echarts.baidu.com/doc/example/line1.html
xAxis : [
{
type : 'category',
boundaryGap : false,
data : ['周一','周二','周三','周四','周五','周六','周日']
}
]
而我们更经常的要做的操作是从远程服务器将数据取出，放入图表。熟悉ajax的人，自然可以将上面的代码少做修改，但网上的例子太少，我这边简单贴一下
页面端参考代码：
- <%@ page language="java" contentType="text/html; charset=UTF-8"
- pageEncoding="UTF-8"%>
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <!-- 引入 ECharts 文件 -->
- <script src="js/echarts3/echarts.common.min.js"></script>
- <script type="text/javascript"
- src="${pageContext.request.contextPath}/js/jquery-3.2.1.js"></script>
- </head>
- <body>
- <!-- 为 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 = '${pageContext.request.contextPath}/GetAllDataServlet';
- $.getJSON(url).done(function(json) {
- // 2.获取数据
- salesVolume = json.salesVolume;//销量
- bussinessVolume = json.bussinessVolume;//营业额
- months = json.months;//月份
- // 3.更新图表myChart的数据
- 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>
服务器端参考代码：
- @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生成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工具，完全自己手写得到上述格式化字符串。
项目参考代码：
有一个EclipseJEE的参考代码似乎传不上来,只好传到资源哪里了：
http://download.csdn.net/detail/zhrubin/9837529
项目相关Git地址：
https://git.coding.net/zhrb/echartsdemo.git
转载自https://blog.csdn.net/zhrubin/article/details/46123771