echarts柱状图动态获取后台数据(二)

最新推荐文章于 2024-06-06 10:37:54 发布

陌上花语

最新推荐文章于 2024-06-06 10:37:54 发布

阅读量3.6k

点赞数 3

分类专栏：前端

本文链接：https://blog.csdn.net/wlf_wzx/article/details/105773246

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1.效果图如下：
在这里插入图片描述

2.引入前端样式：（前端主要是bootstrap的样式。可以去官网下载哈）
在这里插入图片描述 3.前端代码：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Dashboard</title>
<link rel="stylesheet" href="../static/assets/css/bootstrap.min.css">
<script src="../static/jquery/jquery-3.2.1.min.js"></script>
<script src="../static/bootstrap/js/bootstrap.js"></script>
<script src="../static/js/echarts.min.js"></script>
</head>

<body>
	<div id="histogram" style= "width:1200px; height:450px;"></div>

<script>
	
		$(function() {
			echartsFunc();
		});
	    
		var echartsFunc = function(){
	    	var myChart = echarts.init(document.getElementById('histogram'));
	    	var jsonyDX = [];
		    var jsonyDY = [];
		    
	    	  $.ajax({
	  	        url: '/dashboard/getDashList',
	  	        dataType : 'json',
	  			type : 'POST',
	  	        cache: false,
	  	        async: false, 
	  	        success: function(data) {
	  	            var json = data;
	  	            if (json.length > 0) {
	  	                for (var i = 0; i < json.length; i++) {
	  	                	 jsonyDX.push(json[i].prohectName);
	  	                	 jsonyDY.push(json[i].lastTime);
	  	                }
	  	            alert("json2-------"+JSON.stringify(jsonyDX));
	  	            var option = {
	  	            		tooltip: {
	  				        	 trigger: 'axis', //坐标轴指示器，坐标轴触发有效
	  				             axisPointer : {    //坐标轴指示器，坐标轴触发有效
	  				                 type : 'shadow'   //默认为直线，可选为：'line' | 'shadow'
	  				             }
	  				        },
		  				    grid: {
		  			            left: '3%',
		  			            right: '4%',
		  			            bottom: '3%',
		  			            containLabel: true
		  			        },
		  			        
	  	        			xAxis : {
	  	        				type : 'category',
	  	        				data : jsonyDX,//jsonyDX代表动态从后台数据库取值
	  	        				axisTick: {
	  	                            alignWithLabel: true
	  	                        },
			  			        axisLabel: {
			  	                    interval:0,
			  	                    rotate:38, //代表逆时针旋转45度
			  	                }, 
	  	        			},
	  	        		 
	  	             
	  	        			
	  	        			yAxis : {
	  	        				type : 'value'
	  	        			},
	  	        			series : [{
	  	        				data : jsonyDY,
	  	        				type : 'bar',
	  	        				barWidth : 75, //设置柱子的宽度 
	  	        			    itemStyle: {
		  			                normal:{ //通常情况下： 
		  			　　　　　　　　　　　　//设置柱子颜色，每个柱子的颜色即为colorList数组里的每一项，
		  			            		//如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
		  			                    color: function (params){
		  			                        var colorList = ['rgb(164,205,238)','rgb(180,205,205)','rgb(251, 118, 123)','rgb(255,228,181)',
		  			                        	'rgb(255,140,0)','rgb(210,105,30)','rgb(255,127,80)'
		  			                       	];
		  			                        return colorList[params.dataIndex];
		  			                    },
		  						        label: {
		  									show: true, //开启显示，
		  									position: 'top', //设置数值在上方显示
		  									textStyle: { //数值样式
		  										color: 'black',
		  										fontSize: 16
		  									}
		  								}
	
		  			                },
		  			                //鼠标悬停时：
		  			                emphasis: {
		  			                        shadowBlur: 10,
		  			                        shadowOffsetX: 0,
		  			                        shadowColor: 'rgba(0, 0, 0, 0.5)'
		  			                }
	  			               },
	  	        		  }],
	  	        			
	  	        			
	  	        		  grid: {//控制边距　
				                left: '10%',
				                right:'4%',
				                top:'50',
				                bottom : '20px',
				                containLabel: true,
				         },
	  	            };
					myChart.setOption(option, true);//多次调用时option选项默认是合并（merge）的，加上true表示不合并配置
	  	            } 
	  	        }
	  	  	}); 
	    }
	   
	    
	</script>
</body>
</html>

4.后端的数据格式如图

在这里插入图片描述
注意：后端我用的框架是spring boot，只要数据格式是这种就可以动态显示柱状图的数据。

陌上花语

关注

3
点赞
踩
11

收藏

觉得还不错? 一键收藏
2
评论
echarts柱状图动态获取后台数据(二)

1.引入前端样式：（前端主要是bootstrap的样式。可以去官网下载哈）2.前端代码：<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><% String path = request.getContextPath(); String basePa...
复制链接

扫一扫

专栏目录