layui+echarts图表

开发工具与关键技术：MyEclipse 、SSM 、layui、 ajax、 mysql、echarts

作者：李冬梅

撰写时间：2019年02月21日

首先要查出需要在图表中显示出来的数据，然后用echarts实例化画布画出展示出来

效果展示：

引用的js是echarts；

js实现的代码：首先要查出需要在图表上显示的数据，然后用画布进行画图

// 基于准备好的dom，初始化echarts实例
		var barChart = echarts.init(document.getElementById("main"));
		var option = null;
		function Histogram() {
		var stockid = $("#stockid").val(); // 库房
		var drugnumber = $("#drugnumber").val(); // 药品编号
		var batchnumber = $("#batchnumber").val(); // 药品批号
			$.ajax({
				url : "${ctx}/ReportFormController/getEchartsData.do",
				data : {
					stockid : stockid,
					drugnumber : drugnumber,
					batchnumber : batchnumber
				},
				dataType : 'json',
				success : function(data) {
					option = {
						title : {
							text : '柱状图展示'//标题内容
						},
						tooltip : {},
						legend : {
							data : [ '库存数量展示' ]
						//标签内容
						//注意例子格式为数组，后台传过来的需要对应格式处理数据
						//data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
						},
						xAxis : {
							data : data.drugname,
							//x轴项目名竖直排列
							axisLabel : {
								interval : 0,
								formatter : function(value) {
									return value.split("").join("\n");
								}
							}
						},

						yAxis : {},
						series : [ {
							name : '库存剩余库存数',//与标签内容相同
							type : 'bar',
							//增加数据的单位展示
							label : {
								normal : {
									show : true,
									position : 'top',
									formatter : '剩余{c}'
								}
							},
							//注意例子格式为数组，后台传过来的需要对应格式处理数据
							//data: [5, 20, 36, 10, 10, 20]
							data : data.stocknumber
						} ,{
							name : '药品最低存储量',//与标签内容相同
							type : 'bar',
							//增加数据的单位展示
							label : {
								normal : {
									show : true,
									position : 'top',
									formatter : '最低{c}'
								}
							},
							//注意例子格式为数组，后台传过来的需要对应格式处理数据
							//data: [5, 20, 36, 10, 10, 20]
							data : data.minimumreserve
						}	]
					};
					// 使用刚指定的配置项和数据显示图表。
					barChart.setOption(option);
				}
			});
		}