ECharts开发实战(1) ---- ECharts获取Java后台JSON数据,渲染显示图表

1、前端页面中创建一个div,在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器,通常为div,ECharts图表渲染到此div中
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<%@ include file="/common/common.jsp" %>
<title>${projectName }一智能检索</title>
<link href="${basePath }/styles/ipc/ipc.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="${basePath}/scripts/quick/quickSearch.js?a=<%= new Date() %>"></script>
<script type="text/javascript" src="${basePath }/scripts/quick/ipc.js?a=<%= new Date() %>"></script>
<script type="text/javascript" src="${basePath }/scripts/quick/ComplexSearch.js"></script>
<!-- echarts start -->
<script type="text/javascript" src="${basePath }/scripts/echarts/echarts.js"></script>
<script type="text/javascript" src="${basePath }/scripts/echarts/map/world.js?a=<%= new Date() %>"></script>
<!-- echarts end -->
</head>

<!-- 其他页面代码此处省略了 --> 
...   
<!-- 创建一个div用来给ECharts渲染用 -->
<div id="vmap" width="800px" height="500"></div>
 
<!-- 其他页面代码此处省略了 --> 
...

2、前端js中实例化ECharts对象,获取Java后台的JSON字符串数据,解析后设置渲染参数
这里我展示是世界地图,对应各国家的专利数量。
ECharts学习的方法,就是先到官网找示例,复制下来,然后我们自己传JSON对象数据给ECharts即可。
现在JSON格式在web开发中非常重要,特别是在使用ajax开发项目的过程中,经常需要将后端响应的JSON格式的字符串返回到前端,前端解析成JS对象值(JSON 对象), 再对页面进行渲染。
在数据传输过程中,JSON是以文本,即字符串的形式传递的,而JS操作的是JSON对象(JavaScript对象) ,所以,JSON对象和JSON字符串之间的相互转换是关键。

后端返回的JSON字符串传给ECharts之前要经过解析,不能直接用JSON字符串,一般使用  $.parseJSON(jsonData); 解析为JSON对象(JS对象),就可以直接传给ECharts了,否则会报错。
$(document).ready(function(){
	/**  -------------首页地图初始化 start----- */
   	$.ajax({
		url : basePath + "/patent/initPatentMapData.do",
		type : "POST",
		dataType : "JSON",
		data: {},
		success : function(data) {//这里得到后台Java响应的json数据,即resultJsonMapData
		    var myChart = echarts.init(document.getElementById('vmap'));
		    var data1 =  $.parseJSON(data); //此处代码很关键,后台返回的JSON字符串数据ECharts是无法直接解析的,必须
                                                    //解析一下,使他变成JSON对象(JS对象),ECharts才能操作该数据。
		    var option = {
		  		    title: {
		  		        text: 'World Patents(世界各国专利量分布图)',
		  		        subtext: 'from Ourchem Information Consulting Co.,Ltd., Total patents',
		  		        sublink: 'http://www.cnipsun.com',
		  		        left: 'center',
		  		        top: 'top'
		  		    },
		  		    
		  		    tooltip: {
		  		        trigger: 'item',
		  		        formatter: function (params) {
		  		            var value = (params.value + '').split('.');
		  		            value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,');
		  		            return params.seriesName + '<br/>' + params.name + ' : ' + value;
		  		        }
		  		    },
		  		    
		  		    toolbox: {
		  		        show: false,
		  		        orient: 'vertical',
		  		        left: 'right',
		  		        top: 'center',
		  		        feature: {
		  		            dataView: {readOnly: false},
		  		            restore: {},
		  		            saveAsImage: {}
		  		        }
		  		    },
		  		    
		  		    visualMap: {
		  		        min: 100000,
		  		        max: 4000000,
		  		        text:['数量多','数量少'],
		  		        realtime: false,
		  		        calculable: true,
		  		        inRange: {
		  		            color: ['lightskyblue','green','#00FF66','#009900','#121122','yellow', 
                                    'orangered']
		  		        }
		  		    },
		  		    
		  		    series: [
		  		        {
		  		            name: 'World Patents',
		  		            type: 'map',
		  		            mapType: 'world',
		  		            roam: true,
		  		            itemStyle:{
		  		                emphasis:{label:{show:true}}
		  		            },
		  		            data:data1
		  		        }
		  		    ]
		  		};
		    
			myChart.setOption(option);
			
		},
		error : function(errorMsg) {
	        //请求失败时执行该函数
			layer.msg('服务器开了点小差,请稍后刷新页面!', {icon: 0});
	        myChart.hideLoading();
	    }
	});
  
	/**  -------------首页地图初始化 end ----- */
	
});


再次强调:JS直接获取到的JSON字符串,ECharts是无法识别的,因为ECharts操作的是JS对象(JSON对象)。需要把JSON字符串转换成JSON对象,比如Array,map类型。可以使用jQuery的 $.parseJSON(data) 进行解析成JSON对象。

更多JavaScript中解析JSON的方法,请参考:

JS/JavaScript中解析JSON --- JSON.parse()、JSON.stringify()以及$.parseJSON()使用详解 - chunlynn的小屋 - CSDN博客
http://blog.csdn.net/chenchunlin526/article/details/78850924


3、后台Java中代码,返回ECharts需要的JSON数据


package com.*.trs.patentsearch.controller;

import /* ******其他导入省略了***** */
import search.web.controller.BaseController;
import com.google.gson.Gson;
import com.google.gson.GsonBuilder;
import com.google.gson.JsonArray;
import com.google.gson.JsonElement;
import com.google.gson.JsonObject;
import com.google.gson.JsonParser;
import com.*.trs.patentsearch.util.CnipsunUtils;


/**
 * 检索结果控制类
 * @author chunlynn
 *
 */
@Controller
@RequestMapping("/patent")
public class SearchResultController extends BaseController {
    
    // 其他不相干代码省略了

	@Override
	protected void init() {
		viewPath = "/searchresult";
	}

	/**
	 * 初始化首页地图数据.
     * 这里是使用Gson来序列化Java数据为json格式
     
	 * @param request
	 * @param response
	 * @throws IOException
	 */
	@RequestMapping("/initPatentMapData")
	public void initPatentMapData(HttpServletRequest request, HttpServletResponse response) throws 
           IOException {
		
		//请求cnipsun接口返回的检索数据。(这里是请求一个接口获得我需要的数据,当然在项目开发中,数据的获取也有直
        //       接在方法里序列化的,比如把一个List<Map<String, Object>>数据用Gson序列化)
		String resultJsonStr = CnipsunUtils.getSearchDatas("%", CN_SOURCES, WO_SOURCES, null, 1, 1);
		JsonObject allJsonObj = new JsonParser().parse(resultJsonStr).getAsJsonObject();
		JsonArray typesCnArray = allJsonObj.get("types").getAsJsonObject().get("cn").getAsJsonArray();
		Map<String, Object> responseMapData1 = new HashMap<String, Object>();
               
        //构造List数据,该数据是ECharts渲染的data所需要的
		List<Map<String, Object>> responseListData = new ArrayList<Map<String, Object>>();
		long cnPatentCount = 0L;
		long woPatentCount = 0L;
		for (JsonElement jsonElement : typesCnArray) {
			JsonObject cnJsonObject = jsonElement.getAsJsonObject();
			cnPatentCount += cnJsonObject.get("recordCount").getAsLong();

		}
		responseMapData1.put("name", "China");
		responseMapData1.put("value", cnPatentCount);
		responseListData.add(responseMapData1);

		JsonArray typesWoArray = allJsonObj.get("types").getAsJsonObject().get("wo").getAsJsonArray();
		for (JsonElement jsonElement : typesWoArray) {
			Map<String, Object> responseMapData2 = new HashMap<String, Object>();
			JsonObject woJsonObject = jsonElement.getAsJsonObject();
			woPatentCount = woJsonObject.get("recordCount").getAsLong();
			String name = woJsonObject.get("columnName").getAsString();
			responseMapData2.put("name", name);
			responseMapData2.put("value", woPatentCount);
			responseListData.add(responseMapData2);
		}

		//Gson类库,用来序列化List<Map<String, Object>>为json字符串
		Gson gson = new GsonBuilder().create();
        // toJson方法序列化List,得到json数据
		String resultJsonMapData = gson.toJson(responseListData);

        //将json数据写入到Response响应流中,到页面js的ajax的返回结果中取到该数据。BaseController中的方法
        //resultJsonMapData对应ajax中的success : function(data) 中的data
		writeJsonToResponseByGson(resultJsonMapData, response);

	}

	@Resource
	private ISearchResultService searchResultService;

	private Logger logger = LoggerFactory.getLogger(SearchResultController.class);

	private final static String CN_SOURCES = "fmzl_ft,syxx_ft,wgzl_ab,fmsq_ft,twpatent,hkpatent";
	private final static String WO_SOURCES = 
        "uspatent,krpatent,eppatent,frpatent,jppatent,gbpatent,"
        +"wopatent,chpatent,depatent,aspatent,gcpatent,rupatent";
}

其中BaseController中的方法 writeJsonToResponseByGson(Object o, HttpServletResponse response),如下:

protected void writeJsonToResponseByGson(Object o, HttpServletResponse response) throws IOException {
	response.setCharacterEncoding("UTF-8");
	PrintWriter out = response.getWriter();
	try {
		Gson gson = new GsonBuilder().setLenient().serializeNulls().create();
		out.write(gson.toJson(o));
	} finally {
		if (out != null) {
			out.flush();
			out.close();
		}
	}
}

数据说明:

【tips: 要查看高清大图,图片上鼠标右键,选择“在新标签页中打开图片”即可,会在新窗口中单独打开图片。






4 、报表渲染结果:



5、总结
1)不管是ECharts的哪种报表图类型,都是先从官网开示例:
比如,我们要使用柱状图,我可以找到 http://echarts.baidu.com/examples.html 中的柱状


点击进去查看示例:



左边的代码,右边是渲染后的柱状图。我们可以直接在左边更改渲染的数据data,



而这个data,或者其他是数据都可以通过后台返回JSON数据来设置,不过一般一些页面上的参数就直接在js里设置好流行了。而对于要渲染的且是变化的数据,可以通过获取后台传回的JSON来设置,比如xAxis的data和series中的data。

xAxis : [
        {
            type : 'category',
            data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], //可以通过获取后台JSON来设置,渲染
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
    series : [
        {
            name:'直接访问',
            type:'bar',
            barWidth: '60%',
            data:[100, 52, 200, 334, 390, 330, 220] //可以通过获取后台JSON来设置,渲染
        }
    ]

2)然后我们就可以查看官网api的使用,以及官网使用示例教程:



官方上手教程:
5分钟上手ECharts里就有入门示例:
获取 ECharts
你可以通过以下几种方式获取 ECharts。
1、从官网下载界面选择你需要的版本下载,根据开发者功能和体积上的需求,我们提供了不同打包的下载,如果你在体积上没有要求,可以直接下载完整版本。开发环境建议下载源代码版本,包含了常见的错误提示和警告。
2、在 ECharts 的 GitHub 上下载最新的 release 版本,解压出来的文件夹里的 dist 目录里可以找到最新版本的 echarts 库。
3、通过 npm 获取 echarts,npm install echarts --save,详见“在 webpack 中使用 echarts”
4、cdn 引入,你可以在 cdnjs,npmcdn 或者国内的 bootcdn 上找到 ECharts 的最新版本。

引入 ECharts
ECharts 3 开始不再强制使用 AMD 的方式按需引入,代码里也不再内置 AMD 加载器。因此引入方式简单了很多,只需要像普通的 JavaScript 库一样用 script 标签引入。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
</head>
</html>


绘制一个简单的图表
在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。

<body>
    <!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body>

然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图,下面是完整代码。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.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 option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

这样你的第一个图表就诞生了!



你也可以直接进入 ECharts Gallery 中查看编辑示例:http://echarts.baidu.com/gallery/editor.html?c=doc-example/getting-started

我们要做的就是对官网的示例进行改造通过ajax请求返回JSON数据,具体实战代码如我起前面所写的js.
然后更多的特效和参数设置,请参考官网的api教程。
觉得对你有帮助,就点个赞吧!有问题的话,欢迎留言~~


Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐