【WEB前端】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) } 。

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

【WEB前端】eCharts 使用笔记的相关文章

web前端——html基础笔记 NO.1

HTML+CSS基础课程 Html和CSS的关系 学习web前端开发基础技术需要掌握:HTML.CSS.JavaScript语言.下面我们就来了解下这三门技术都是用来实现什么的: 1. HTML是网页内容的载体.内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字.图片.视频等. 2. CSS样式是表现.就像网页的外衣.比如,标题字体.颜色变化,或为标题加入背景图片.边框等.所有这些用来改变内容外观的东西称之为表现. 3. JavaScript是用来实现网页上的特效效果.如:鼠标滑过弹

Web前端开发学习笔记(一)

最近在复习Web前端的开发知识,于是就把大二上学期曾经学过的东西拿出来复习一遍,把自己在做曾经的作业时遇到有意义的点都记下来吧. Homework1:http://my.ss.sysu.edu.cn/wiki/display/WEB/Homework+1+-+Recipe 1.text和font系的属性傻傻分不清楚 在写的过程中,遇到这样的问题:改变字体颜色,改变字体样式,给文本加下划线等等这些操作对应的属性分不清楚,究其原因,我认为是自己对css文本和css字体这两种的属性分不清楚,于是就对常

web前端——html基础笔记 NO.3

使用ul,添加新闻信息列表 ul-li是没有前后顺序的信息列表. <ul> <li>信息</li> <li>信息</li> ...... </ul> 举例: <ul> <li>精彩少年</li> <li>美丽突然出现</li> <li>触动心灵的旋律</li> </ul> ul-li在网页中显示的默认样式一般为:每项li前都自带一个圆点,如

web前端-html学习笔记

学习html最重要的是坚持.细心.多动手.慕课网<HTML+CSS基础课程>的笔记. 1.<h1>网站标题</h1> 如:<h1>腾讯网</h1> 2.<em><strong><span><p>标签的用法:    <span><em>狗狗</em></span>    <strong>狗狗</strong><span>

Web前端开发学习笔记(二)

Homework2:http://my.ss.sysu.edu.cn/wiki/display/WEB/Homework+2+-+Movie+Review 这份作业跟布局相关,因此很多都是布局的知识: 1.display属性的block,inline-block,inline值的区分 其实真正需要区分的是inline-block和inline.都是在同一行内,怎么区分他们呢?首先要明白块元素和行内元素很重要的一点区别:块元素的高度和宽度我们都是可以控制的,而行内元素是不可以的.block对应的就

web前端知识小笔记(二)

1.if条件语句相关 对于 if 语句括号里的表达式,ECMAScript 会自动调用 Boolean()转型函数将这个表达式的结果转换成一个布尔值.如果值为 true,执行后面的一条语句,否则不执行. 2.arguments相关 通过arguments 对象的length属性,来智能的判断有多少参数,然后把参数进行合理的应用 . 比如,要实现一个加法运算,将所有传进来的数字累加,而数字的个数又不确定. function box() { var sum = 0; if (arguments.le

web前端——html基础笔记 NO.8

选择器 每一条css样式声明(定义)由两部分组成,形式如下: 选择器{ 样式; } 在{}之前的部分就是“选择器”,“选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素.比如右侧代码编辑器中第7行代码中的“body”就是选择器. 标签选择器 标签选择器其实就是html代码中的标签.如右侧代码编辑器中的<html>.<body>.<h1>.<p>.<img>.例如下面代码: p{font-size:12px;line-h

web前端——html基础笔记 NO.11

元素分类 标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <div>.<p>.<h1>...<h6>.<ol>.<ul>.<dl>.<table>.<address>.<blockquote> .<form> 常用的内联元素有: <a>.<span>.<br>.<i>.&

web前端——html基础笔记 NO.9

继承 CSS的某些样式是具有继承性的.继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签,还应用于p标签中的所有子元素文本,这里子元素为span标签. p{color:red;} <p>三年级时,我还是一个<span>胆小如鼠</span>的小女孩.</p> 可见右侧结果窗口中p中的文本与span中的文本都设置为了红色.但注意有一些css样式是不具有继承性的.如bo

web前端——html基础笔记 NO.6

认识CSS样式 CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小.颜色.字体加粗等. 使用CSS样式的一个好处是通过定义某个样式,可以让不同网页位置的文字有着统一的字体.字号或者颜色等. CSS样式的优势 要把一段文字中的几个特定词汇进行相同的改变.只需要用<span>..</span>将几个词括起来. 然后写类似如下代码: span{ colour:blue: } CSS代码语法 css 样