【WEB前端】eCharts 使用笔记

浏览数：209 / 时间：2015年06月09日

记录如何在后台拼接 Json 字符串，并如何在前台解析使用，最终根据 Json 数据显示饼图

使用饼图主要为 echarts 的 pieOption 提供 legend 的 data 参数和 series 的 data 参数，而这两个 data 参数格式都被 echarts 控件设计者设置为 json 格式，即 [{xx,xx}]，所以我们可以用 javascript 直接接收并重组后台传来的 json 串，从而直接使用该串内容，如下面例子中用 eval("(" + jsonStr + ")") 解析 Json 串，后用 getSeriesData(data) 及 getlegendData(data) 重组 data 所需 Json 格式数据，最后直接使用在 legend: { data:getlegendData(name) } 。

1. 后台拼接 Json 字符串

		String hql = " ";
		List list = session.createSQLQuery(hql).list();
		
		String jsonStr = "[";
		for(int i=0 ; i < list.size() ; i ++){//拼json串
			Object[] obj = (Object[]) list.get(i);
			jsonStr += "{\"name\":\"" + TypeMap.getTypeName(Integer.parseInt(obj[0].toString())) + "\","
					+ "\"nvalue\":\"" + obj[1].toString() + "\"},";
		}
		jsonStr = jsonStr.substring(0, jsonStr.length() - 1);//去掉最后的一个 , 号
		jsonStr += "]";

2. echarts.jsp

<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>

<!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>
<title>统计饼图</title>
<script src="media/echarts/echarts.js"></script>
<script src="media/echarts/theme/macarons.js"></script>
<script type="text/javascript">
	var myPieChart;
	
	$().ready(function(){
		require.config({//取 echarts.js
		    paths: {
		    	echarts: 'media/echarts/'
		    }
		});
		require(//加载信息
		[
			'echarts',
			'echarts/chart/pie'
		],
		 function (e) {
			var pieType = $("#pieType").val();     //为饼图提供参数
			myPieChart = e.init(document.getElementById('echarts-pie'),e_macarons);//饼状图，风格为e_macarons
			
			var jsonStr = $("#jsonStr").html();    //获取json数据
			var name = new Array();
			var nvalue = new Array();
			var obj = eval("(" + jsonStr + ")");   //解析json
			for(var i=0; i<obj.length; i++){       //分开保存name、value以便重新组装
				name[i] = obj[i].name;
				nvalue[i] = obj[i].nvalue;
			}
			pieOption = {
			    tooltip : {                        //气泡提示配置
			        trigger: 'item',               //触发类型
			        formatter: "{a} <br/>{b} : {c} ({d}%)"   
			    },
	 		    legend: {                          //图例配置
	 		        orient : 'vertical',           //排列方式
	 		        x : 'left',                    //排列位置，默认居中
	 		        data:getlegendData(name)       //图例数据
	 		    },
		 		calculable : true,                 //显示圈住饼图的一个圆
	 		    series : [{
	 		            name:pieType,              //系列名称
	 		            type:'pie',                //图标类型，pie 为饼图
	 		            radius : '53%',            //饼图弧度大小
	 		            center: ['55%', '60%'],    //饼图中心位置
	 		            data: getSeriesData(obj)   //显示数据
	 		    }] 
		 	}; 
		 	myPieChart.setOption(pieOption);       //添加图形配置
			}
		);
	});
	
	function getSeriesData(data){                  //解析获取饼图需要的 series data数据源
        var datas = [];
        for (var i = 0; i < data.length; i++) {
            datas.push({ name: data[i].name, value: data[i].nvalue});
        }
        return datas;
	}
	
	function getlegendData(data){                  //解析获取饼图需要的 legend data数据源
		var datas = [];
        for (var i = 0; i < data.length; i++) {
            datas.push({ name: data[i] });
        }
        return datas;
	} 
</script>
</head>
<body>
  	<form id="form" action="" method="post">
	    <input id="pieType" type="hidden" value="${showStr }"/>             <!-- 饼图参数 -->
		<p style="display:none;" id="jsonStr">${jsonStr }</p>               <!-- 饼图参数 -->
		<div id="echarts-pie" style="height: 400px; width: 650px;"></div>   <!-- 饼图 位置-->
	</form>
</body>
</html>

End .

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

【WEB前端】eCharts 使用笔记