Echarts之柱状图(堆叠+条件查询统计)-------含前后端代码

最新推荐文章于 2024-05-28 10:58:28 发布

青春有幸

最新推荐文章于 2024-05-28 10:58:28 发布

阅读量970

点赞数 1

分类专栏： Echarts

本文链接：https://blog.csdn.net/weixin_40106067/article/details/81710438

版权

本文介绍了使用Echarts实现柱状图的堆叠展示和添加条件查询统计功能的方法，包括后端代码配合前端实现监测点的统计效果。通过设置series中的stack属性来实现堆叠，并展示了如何扩展到更复杂的查询统计功能。

摘要由CSDN通过智能技术生成

刚接触了柱状图，将自己的一些成果分享一下

实现的效果图如下：

废话就不多说了，代码展示给大家看

后端代码：

public class Monitor {

	private Integer id;
	private String monitorName;
	private String name;
	private Integer count1;
	private Integer count2;
}

@RequestMapping(value="/findMonitor",produces="application/json;charset=utf-8")
@ResponseBody
public void findMonitor(Monitor monitor,Map<String, Object> map) throws Exception{
		
		List<Monitor> list=monitorService.findMonitor(monitor);
		JSONArray jsonArray = JSONArray.parseArray(JSON.toJSONString(list));
        response.setCharacterEncoding("UTF-8");
		PrintWriter out=response.getWriter();
		out.println(jsonArray);
		out.flush();
		out.close();
}

前端：

<body>
    <div id="main"></div>
</body>
<script type="text/javascript">
$(function(){
	    require.config({
	        paths: {
	            echarts: 'http://echarts.baidu.com/build/dist'
	        }
	    });
	   	// 使用
	    require(
	        [
	            'echarts',
	            'echarts/chart/line',//需要折线图则加载line模块
	            'echarts/chart/bar'//使用柱状图就加载bar模块，按需加载
	        ],
	        
	       	 
	         function (ec) {
				
	             // 基于准备好的dom，初始化echarts图表
	             var myChart = ec.init(document.getElementById('main'),'macarons'); 
	             
	             var option = {
				    title : {
				        text: '',
				        subtext: '',
				        x:'center',
				        subtarget :'blank',
				        subtextStyle : {
				            color :'black',
				            fontWeight :'normal',
				            fontSize :'14'
				        }     
				    },
				    tooltip : {
				        trigger : 'axis',
				        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
				    },
				    legend : {
				    	data : ["水压","电流","温度"]
				    },
				    calculable : true,
				    xAxis : [
						{
				            type : 'value',
				            name : '次'
						}
					],
				    yAxis : [
				        {
				        	type : 'category',
				        	name : '监测点名称',
				        	
				            data : (function(){
				            	var arr = [];
				            	$.ajax({
				            		type : "post",
				            		async : false,//同步执行
				            		url : "url",
				            		data : {},
				            		dataType : "json",
				            		success : function(result){
				            			if(result){
				            				for(var i=0;i<result.length;i++){
				            					arr.push(result[i].monitorName);//监测点名称
				            				}
				            			}
				            		},
				            		error : function(errorMsg){
				            			alert("不好意思，图标请求数据失败！");
				            			myChart.hideLoading();
				            		}
				            	})

最低0.47元/天解锁文章

青春有幸

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Echarts之柱状图(堆叠+条件查询统计)-------含前后端代码

刚接触了柱状图，将自己的一些成果分享一下实现的效果图如下：堆叠柱状图废话就不多说了，代码展示给大家看后端代码：public class Monitor { private Integer id; private String monitorName; private String name; private Integer count1; private Intege...
复制链接

扫一扫

专栏目录