echarts-多柱子柱状图

1、问题背景

利用ECharts制作一个多柱子柱状图，其中数据源模拟动态获取

2、实现源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>echarts-多柱子柱状图</title>
		<link rel="shortcut icon" href="../js/echarts-2.2.7/doc/asset/ico/favicon.png">
		<script type="text/javascript" src="../js/echarts-2.2.7/doc/asset/js/jquery.min.js" ></script>
		<script type="text/javascript" src="../js/echarts-2.2.7/doc/example/www2/js/echarts-all.js" ></script>
		<style>
			body,html{
				width:99%;
				height: 99%;
				font-family: "arial, helvetica, sans-serif";
				font-size: x-large;
				font-kerning: inherit;
				font-stretch: expanded;
			}
			#manyColumn{
				width: 100%;
				height: 100%;
				font-size: 14px;
				font-family: "微软雅黑";
				backface-visibility: visible;
				background-blend-mode: inherit;
				background-origin: border-box;
				background: content-box;
				background-color: #5BC0DE;
			}
		</style>
		<script>
			$(function(){
				buildData();
			});
			
			//生成数据
			function buildData()
			{
				var columLabel = ['甲','乙','丙','丁','戊','己','庚','辛','壬','癸'];
				var columName = ['周一','周二','周三','周四','周五','周六','周日'];
				var columnValue = new Array();
				var arrData = new Array();
				
				for(var i=0;i<columLabel.length;i++) 
				{
					for(var j=0;j<columName.length;j++) 
					{
						arrData.push(Math.floor(Math.random()*1000+1000*j-1000*i));
					}
					console.info(arrData);
					columnValue.push(eval('(' + ("{'name':'"+columLabel[i]+"','type':'bar','data':["+arrData+"]}") + ')'));
				}
				
				buildChart(columLabel,columName,columnValue);
			}
			
			//生成图形
			function buildChart(columLabel,columName,columnValue)
			{
				var chart = document.getElementById('manyColumn');  
                var echart = echarts.init(chart);  
                var option = {
				    tooltip : {
				        trigger: 'axis',
				        axisPointer : {            
				            type : 'shadow'        
				        }
				    },
				     toolbox: {
			            show : true,
			            feature : {
			                saveAsImage : {show: true}
			            }
			        },
				    legend: {
				        data:columLabel
				    },
				    grid: {
				        left: '3%',
				        right: '4%',
				        bottom: '3%',
				        containLabel: true
				    },
				    xAxis : [
				        {
				        	min:0,
				            type : 'category',
				            data : columName
				        }
				    ],
				    yAxis : [
				        {
				        	min:0,
				            type : 'value'
				        }
				    ],
				    series : columnValue
				};
				
				echart.setOption(option);
			}
		</script>
	</head>
	<body>
		<div id="manyColumn"></div>
	</body>
</html>

3、实现结果

再分享一下我老师大神的人工智能教程吧。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！https://blog.csdn.net/jiangjunshow

echarts-多柱子柱状图

猜你喜欢