学习笔记：使用echarts画图表

于 2014-10-25 00:38:04 发布
阅读量4.4w 收藏 13
点赞数
文章标签： echarts helloworld
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/imageprocessing2/article/details/40437909
版权
这篇博客介绍了如何使用百度的echarts库在网页上画图表。文章指出echarts通过结构化的配置模型简化了复杂图表的创建，其属性名称与CSS相似。作者分享了学习echarts的经验，推荐通过官方文档和示例进行学习，并提供了一个简单的helloworld示例，包括添加事件和使用jQuery从服务器获取数据更新图表的方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

项目需要在网页上画图表，在网上找了一下，发现百度出品的echarts非常好用。echarts把看似复杂的图表进行了分解，使用结构化的模型来完成图表的配置。画图表就跟写CSS一样，实际上echarts使用的很多属性名字都和CSS是一样的。

echarts有非常详细的文档，官网还提供了很多个例子，很容易学会。

echarts是支持IE8的，虽然IE8不支持canvas，但是echarts画出的图表在IE8显示，目前没有发现有问题。


想学echarts，看官网的文档就可以了。以下是个人学习之后整理的helloworld小例子，以及学习过程中碰到的一些小问题。


1 画一个最粗糙的图表

官方推荐使用模块化单文件引入，我不知道模块化，所以采用了标签式单文件引入。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>echarts测试</title>
</head>
<body>
	<!-- 第二步：为ECharts准备一个具备大小（宽高）的Dom -->
	<div id="main"
		style="height: 400px; width: 800px; border: 1px dotted black"></div>
		
	<!-- 第一步：标签式单文件引入。引入之后可以直接使用echarts对象。 -->
	<script src="../js/echarts-plain-original.js"></script>
	
	<!-- 注意顺序，使用echarts对象要在引入echarts文件之后 -->
	<script type="text/javascript">
		// 初始化一个图表实例
		var myChart = echarts.init(document.getElementById('main'));

		// echarts把复杂的图表结构化，图表的基本结构包括以下部分：标题，x轴，y轴，数值序列。
		var option = {
			// 标题
			title : {
				text : '销量和进货量'
			},
			// x轴
			xAxis : [ {
				type : 'category',
				data : [ "衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子" ]
			} ],
			// y轴
			yAxis : [ {
				type : 'value',
				axisLabel : {
					formatter : '{value}件'
				}
			} ],
			// 数值序列
			series : [ {
				name : '销量',
				type : 'line',
				data : [ 5, 20, 40, 10, 10, 20 ],
			} ]
		};

		// 为图表实例加载数据
		myChart.setOption(option);
	</script>
</body>
</html>

得到的图表




2 为图表添加各种样式 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>echarts测试</title>
</head>
<body>
	<!-- 第二步：为ECharts准备一个具备大小（宽高）的Dom -->
	<div id="main"
		style="height: 400px; width: 800px; border: 1px dotted black"></div>

	<!-- 第一步：标签式单文件引入。引入之后可以直接使用echarts对象。 -->
	<script src="../js/echarts-plain-original.js"></script>

	<!-- 注意顺序，使用echarts对象要在引入echarts文件之后 -->
	<script type="text/javascript">
		// 初始化一个图表实例
		var myChart = echarts.init(document.getElementById('main'));

		// echarts把复杂的图表结构化，图表的基本结构包括以下部分：标题，x轴，y轴，数值序列。
		var option = {
			// 标题
			title : {
				text : '销量和进货量',
				x : 'center',
				y : 'top',
				textStyle : {
					fontSize : 26,
					fontFamily : "微软雅黑",
				}
			},
			// 
			grid : {
				borderWidth : 0
			},
			tooltip : {
				trigger : 'axis',
				axisPointer : {
					type : 'line',
					lineStyle : {
						color : '#0f0',
						width : 2,
						type : 'solid'
					}
				}
			},
			// x轴
			xAxis : [ {
				type : 'category',
				data : [ "衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子" ],
				axisTick : {
					show : false
				},
				splitLine : {
					lineStyle : {
						type : 'dotted'
					}
				}
			} ],
			// y轴
			yAxis : [ {
				type : 'value',
				axisLabel : {
					formatter : '{value}件'
				},
				splitLine : {
					lineStyle : {
						type : 'dotted'
					}
				}
			} ],
			// 数值序列
			series : [ {
				name : '销量',
				type : 'line',
				data : [ 5, 20, 40, 10, 10, 20 ],
				itemStyle : {
					normal : {
						color : '#f00',
						lineStyle : {
							width : 2
						},
						label : {
							show : true,
							position : 'right',
							textStyle : {
								fontStyle : 'bolder',
								fontSize : 15
							}
						}
					}

				},
				symbol : 'emptyCircle',
				symbolSize : 4,
			} ]
		};

		// 为图表实例加载数据
		myChart.setOption(option);
	</script>
</body>
</html>

加了样式之后的结果如下，我想说我很佩服做美工的同学（我自己画的图表真不好看）



3 为图表添加事件

		// 事件的参数中包括：数据在序列中的下标dataIndex，数据的值value，x轴上的名称name
		function eConsole(param) {
			if (typeof param.seriesIndex == 'undefined') {
				return;
			}
			if (param.type == 'click') {
				var mes = param.name + ':' + param.value;
				document.getElementById('info').innerHTML = mes;
			}
		}
		myChart.on(echarts.config.EVENT.CLICK, eConsole);


效果就是点击图表之后，可以在下面显示出被点击的类目和对应的数量


4 最后，做了一个小练习，使用jquery来从服务端请求数据

这里，客户端的option一开始只有样式，没有数据。从服务端得到数据之后，把option补全，然后调用setOption方法就OK了。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<title>通过ajax为echarts更新数据</title>
</head>
<body>
	<!-- 第二步：为ECharts准备一个具备大小（宽高）的Dom -->
	<div id="main"
		style="height: 400px; width: 800px; border: 1px dotted black"></div>

	<span id="info"></span>

	<!-- 第一步：标签式单文件引入。引入之后可以直接使用echarts对象。 -->
	<script src="../js/echarts-plain-original.js"></script>

	<!-- 注意顺序，使用echarts对象要在引入echarts文件之后 -->
	<script type="text/javascript">
		$(document).ready(function() {
			// 初始化一个图表实例
			var myChart = echarts.init(document.getElementById('main'));

			// 使用jquery发送post请求，第四个参数指明如何解析服务端返回的数据。
			// 服务端返回的必须是标准格式的json，也就是双引号括起来的键值对
			$.post("../data", {
				name : "testdata"
			}, function(data) {
				option.title.text = data.title;
				option.xAxis[0].data = data.category;
				option.series[0].data = data.value;
				// 取得数据后显示到图表中
				myChart.setOption(option);
				myChart.on(echarts.config.EVENT.CLICK, eConsole);
			}, 'json');

			// echarts把复杂的图表结构化，图表的基本结构包括以下部分：标题，x轴，y轴，数值序列。
			var option = {
				// 标题
				title : {
					x : 'center',
					y : 'top',
					textStyle : {
						fontSize : 26,
						fontFamily : "微软雅黑",
					}
				},
				// 
				grid : {
					borderWidth : 0
				},
				tooltip : {
					trigger : 'axis',
					axisPointer : {
						type : 'line',
						lineStyle : {
							color : '#0f0',
							width : 2,
							type : 'solid'
						}
					}
				},
				// x轴
				xAxis : [ {
					type : 'category',
					axisTick : {
						show : false
					},
					splitLine : {
						lineStyle : {
							type : 'dotted'
						}
					}
				} ],
				// y轴
				yAxis : [ {
					type : 'value',
					axisLabel : {
						formatter : '{value}件'
					},
					splitLine : {
						lineStyle : {
							type : 'dotted'
						}
					}
				} ],
				// 数值序列
				series : [ {
					name : '销量',
					type : 'line',
					itemStyle : {
						normal : {
							color : '#f00',
							lineStyle : {
								width : 2
							},
							label : {
								show : true,
								position : 'right',
								textStyle : {
									fontStyle : 'bolder',
									fontSize : 15
								}
							}
						}
					},
					symbol : 'emptyCircle',
					symbolSize : 4,
				} ]
			};

			// 事件的参数中包括：数据在序列中的下标dataIndex，数据的值value，x轴上的名称name
			function eConsole(param) {
				if (typeof param.seriesIndex == 'undefined') {
					return;
				}
				if (param.type == 'click') {
					var mes = param.name + ':' + param.value;
					document.getElementById('info').innerHTML = mes;
				}
			}

		});
	</script>
</body>
</html>

服务端的servlet如下，这种小东西还写的不熟练：获取文件路径，设置UTF-8编码，关闭流等操作还不够轻车熟路 

	protected void doPost(HttpServletRequest request,
			HttpServletResponse response)
		throws ServletException, IOException
	{
		response.setCharacterEncoding("UTF-8");
		String name = request.getParameter("name");
		String fullPath = this.getServletContext().getRealPath("/") + "data"
				+ File.separator + name;
		PrintWriter out = null;
		BufferedReader br = null;
		try
		{
			out = response.getWriter();
			br = new BufferedReader(new FileReader(fullPath));
			String str = null;
			while ((str = br.readLine()) != null)
			{
				out.print(str);
			}
			out.flush();
		}
		finally
		{
			if (br != null)
			{
				br.close();
			}
			// 即使自己不关闭，tomcat等容器也会关闭
			if (out != null)
			{
				out.close();
			}
		}
	}

服务端返回的数据一定要是标准格式的json。标准是指用双引号，不用单引号。另外，最后一个键值对后面不要有逗号，IE8中不允许JavaScript代码中的json采用这种不规范的写法，FireFox容许。 

{
 "title" : "销量和进货量",
 "category" : [ "衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子" ],
 "value" : [ 5, 20, 40, 10, 10, 20 ]
}

如果在图表已经加载过数据之后，想要换一组数据，可以用getOption方法得到一份option的深拷贝，然后把其中的数据改掉，再调用setOption方法就可以： 
var newOption = myChart.getOption(); // 深拷贝
newOption.xAxis[0].data = newData.category;
newOption.series[0].data = newData.value;
myChart.setOption(newOption,true); // 第二个参数表示不和原先的option合并




木匠之子
关注
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值