利用js来画图形（例如：条状图，圆饼图等）

背景：java开发的过程中，需要对数据进行可视化，这样方便客户理解此时的数据状态

语言：java，js，window7，echarts包文件

sample的例子下面的参照

https://www.echartsjs.com/examples/en/editor.html?c=line-sections

 

html

	


		

			

				
検索条件：
				
月
				
				
年
				
				

			
		
	

	

	

　　

js

$(document).ready(function() {
	
//	$("#conditions").css("height", $(window).height()*0.1);
//	$("#conditions").css("background-color", "#000000");
//	alert($(window).width())
	$("#chart").css("height", $(window).height()*0.8);
	window.onresize = function() {
//		$("#chart").css("height", $(window).height()*0.1);
		$("#conditions").css("height", $(window).height()*0.8);
	}

	var dataList
	$.ajax({
		url : "/testCharts/selectData",
		type : 'post',
		data : {
			"habitSeq" : "2",
			"value" : "01"
		},
		cache : false,
		async : true,
		success : function(data) {
			dataList = JSON.parse(data);
			chartsDisplay(dataList)
		}
	});
})

function chartsDisplay(dataList) {

	if (dataList.length != 0) {
		var xAxisList = new Array();
		var yAxisList = new Array();
		for (var i = 0; i < dataList.length; i++) {
			xAxisList[i] = (dataList[i]["maxInsDateTime"]);
			yAxisList[i] = (dataList[i]["totalPrice"]);
		}
		var echart = echarts.init(document.getElementById('chart'));
		var option = {
			baseOption : {
				title : {
					text : '店舗売上状況',
					subtext : '売上分析'
				},
				legend : {
					data : [ '当月売上', '金額' ]
				},
				xAxis : {
					data : xAxisList
				// [ '周一', '周二', '周三', '周四', '周五', '周六', '周日' ]
				},
				yAxis : {

				},
				tooltip : {
					show : true,
					formatter : '売上:{a}
日付:{b}
値:{c}'
				},
				series : [ {
					name : '当月売上',
					type : 'bar',
					data : yAxisList ,// [ 200, 312, 431, 241, 175, 275,
											// 369
					// ],
					markPoint : {
						data : [ {
							type : 'max',
							name : '最大値'
						}, {
							type : 'min',
							name : '最小値'
						} ]
					},
					markLine : {
						data : [ {
							type : 'average',
							name : '平均値',
							itemStyle : {
								normal : {
									color : 'green'
								}
							}
						} ]
					}
				}, {
					name : '金額',
					type : 'line',
					data :  yAxisList , // [ 321, 432, 543, 376, 286, 298,
											// 400
					// ],
					markPoint : {
						data : [ {
							type : 'max',
							name : '最大値'
						}, {
							type : 'min',
							name : '最小値'
						} ]
					},
					markLine : {
						data : [ {
							type : 'average',
							name : '平均値',
							itemStyle : {
								normal : {
									color : 'blue'
								}
							}
						} ]
					}
				} ]
			},
			media : [ {
				// 小与1000像素时候响应
				query : {
					maxWidth : 1000
				},
				option : {
					title : {
						show : true,
						text : '测试一下'
					}
				}
			} ]
		};
		// 每次窗口大小改变的时候都会触发onresize事件，这个时候我们将echarts对象的尺寸赋值给窗口的大小这个属性，从而实现图表对象与窗口对象的尺寸一致的情况
		window.onresize = echart.resize*0.8;
		echart.setOption(option);
	}

}

　　

效果：

 

’

 

转载于:https://www.cnblogs.com/killclock048/p/11452339.html