标签：web前端 javascript ajax json echarts
记录如何在后台拼接 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) } 。
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 += "]";<%@ 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>
标签：web前端 javascript ajax json echarts
原文地址：http://blog.csdn.net/u011704894/article/details/45671775
