java ee 网页中图表的显示

首先附上 http://echarts.baidu.com/ 网址

下载echarts.zip

将dist(压缩后js代码)文件夹导入到前端(WebContent)js文件夹中。

当然也可以将source(源码)文件夹导入到(WebContent)文件夹中。

在页面中插入一个div

<div id="hellochart" style="height:400px" ></div>

id自己取，但是style高度属性必须标注为一个固定的高度。要不然图表会显示不出来

require.config({
		paths: {
			echarts: './js/echarts/dist'
		}
	});
	require(
			[
				'echarts',
				'echarts/chart/line',   // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
				'echarts/chart/bar'
			],
			function (ec) {
				var myChart = ec.init(document.getElementById('hellochart'));       //初始化div
				/*
				myChart.showLoading({
					text: '正在努力加载中...'
				});
				*/
				var xAxisData = [];                                                 //此属性是每个点的x坐标
				var seriesData = [];                                                //此属性是每个点的y坐标

				jQuery.get("IncomeLineChartServlet", {                              //get请求<span style="font-family: Arial, Helvetica, sans-serif;">Servlet</span><span style="font-family: Arial, Helvetica, sans-serif;">获取，生成option</span><span style="font-family: Arial, Helvetica, sans-serif;">获取参数</span>
				},   function(data) {                        
					var json = eval("(" + data + ")");
					xAxisData = json.xAxisData;
					seriesData = json.seriesData;
   
					option = {<span style="white-space:pre">							</span>//生成option
						title : {
							text: '近一月营业额变化',
							//subtext: '纯属虚构'
						},
						tooltip : {
							trigger: 'axis'
						},
						/*
						legend: {
							data:['最高营业额','最低营业额']
						},
						*/
						toolbox: {
							show : true,
							feature : {
								mark : {show: true},
								dataView : {show: true, readOnly: true},
								magicType : {show: true, type: ['line', 'bar']},
								restore : {show: true},
								saveAsImage : {show: true}
							}
						},
						calculable : true,
						xAxis : [
							{
								type : 'category',
								boundaryGap : false,
								data : xAxisData
							}
						],
						yAxis : [
							{
								type : 'value',
								axisLabel : {
									formatter: '{value} 元'
								}
							}
						],
						series : [
							{
								name:'营业额',
								type:'line',
								data: seriesData,
								markPoint : {
									data : [
										{type : 'max', name: '最大值'},
										{type : 'min', name: '最小值'}
									],
									/*itemStyle : {
										normal: {
											color: 'rgba(180,238,180,1)'
										}
									}*/
								},
								markLine : {
									data : [
										{type : 'average', name: '平均值'}
									],
									/*itemStyle : {
										normal: {
											color: 'rgba(70,130,180,1)'
										}
									}*/
								},
								/*
								itemStyle : {
									normal: {
										color: 'rgba(70,130,180,1)'
									}
								}*/
							}
							/*
							 {
							 name:'最低气温',
							 type:'line',
							 data:[1, -2, 2, 5, 3, 2, 0],
							 markPoint : {
							 data : [
							 {name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
							 ]
							 },
							 markLine : {
							 data : [
							 {type : 'average', name : '平均值'}
							 ]
							 }
							 }
							 */
						]
					};
					myChart.setOption(option);                                             //设置显示option
				})

			}
	);