echarts在jsp中的使用

一、加入echarts.js文件

二、初始化图像

<script type="text/javascript">
				// 基于准备好的dom，初始化echarts实例
				var myChart = echarts.init(document.getElementById('xxx'));

				// 指定图表的配置项和数据
				var option = {
					title: {
						text: '课程分数分析图'
					},
					tooltip: {},
					legend: {
						data: ['成绩']
					},
					xAxis: {
						data: ['最低分', '平均分', '最高分']
					},
					yAxis: {},
					series: [
						{
							name: '成绩',
							type: 'bar',
							data: [23,32,57]
						}
					]
				};

				// 使用刚指定的配置项和数据显示图表。
				myChart.setOption(option);
				</script>

三、后端动态加载数据

function search() {
					var coursName = $("#coursName").val();
					$.ajax({
						url:"/cource/coursName",
						data:{'coursName':coursName},
						type:"post",
						async: true,
						dataType:'json',
						success:function(ref){
							if (ref.flag){
								var option = {
									title: {
										text: coursName + '分数分析图'
									},
									tooltip: {},
									legend: {
										data: ['成绩']
									},
									xAxis: {
										data: ['最低分', '平均分', '最高分']
									},
									yAxis: {},
									series: [
										{
											name: '成绩',
											type: 'bar',
											data: ref.data
										}
									]
								};

								// 填入数据
								myChart.setOption(option);
							}
						},
						complete :
								function(XMLHttpRequest, textStatus) {
									// 通过XMLHttpRequest取得响应头，sessionstatus
									var sessionstatus = XMLHttpRequest.getResponseHeader("sessionstatus");
									if (sessionstatus == "TIMEOUT") {
										var win = window;
										while (win != win.top){
											win = win.top;
										}
										win.location.href= XMLHttpRequest.getResponseHeader("CONTEXTPATH");
									}
								}
					});