记录如何在后台拼接 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 .
时间: 2024-10-25 13:46:51