码迷,mamicode.com
首页 > 其他好文 > 详细

echarts-X轴不从0刻度开始

时间:2018-12-20 18:43:59      阅读:366      评论:0      收藏:0      [点我收藏+]

标签:gap   href   mil   select   key   series   ring   技术分享   led   

1、问题背景

     统一一周内植树的数量,利用柱状图来实现

 

2、实现源码

(1)X轴从零刻度开始

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>echarts-X轴不从0刻度开始</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: "微软雅黑";
				font-size: 12px;
			}
			#bar{
				width: 100%;
				height: 100%;
			}
		</style>
		<script>
			$(function(){
				var chart = document.getElementById(‘bar‘);  
                var echart = echarts.init(chart); 
                
                var option = {
				    title: {
				        text: ‘‘
				    },
				    tooltip: {
				        trigger: ‘axis‘
				    },
				    legend: {
				        data:[‘植树数量‘]
				    },
				    grid: {
				        left: ‘3%‘,
				        right: ‘4%‘,
				        bottom: ‘3%‘,
				        containLabel: true
				    },
				    toolbox: {
				        feature: {
				            saveAsImage: {}
				        }
				    },
				    xAxis: {
				        type: ‘category‘,
				        boundaryGap: false,
				        data: [‘周一‘,‘周二‘,‘周三‘,‘周四‘,‘周五‘,‘周六‘,‘周日‘]
				    },
				    yAxis: {
				        type: ‘value‘
				    },
				    series: [
				        {
				            name:‘植树数量‘,
				            type:‘bar‘,
				            stack: ‘植树数量‘,
				            data:[34, 12, 56, 27, 42, 87, 62]
				        }
				    ]
				};
                  
                echart.setOption(option);  
			});
		</script>
	</head>
	<body>
		<div id="bar"></div>
	</body>
</html>

(2)X轴不从零刻度开始

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>echarts-X轴不从0刻度开始</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: "微软雅黑";
				font-size: 12px;
			}
			#bar{
				width: 100%;
				height: 100%;
			}
		</style>
		<script>
			$(function(){
				var chart = document.getElementById(‘bar‘);  
                var echart = echarts.init(chart); 
                
                var option = {
				    title: {
				        text: ‘‘
				    },
				    tooltip: {
				        trigger: ‘axis‘
				    },
				    legend: {
				        data:[‘植树数量‘]
				    },
				    grid: {
				        left: ‘3%‘,
				        right: ‘4%‘,
				        bottom: ‘3%‘,
				        containLabel: true
				    },
				    toolbox: {
				        feature: {
				            saveAsImage: {}
				        }
				    },
				    xAxis: {
				        type: ‘category‘,
				        boundaryGap: true,
				        data: [‘周一‘,‘周二‘,‘周三‘,‘周四‘,‘周五‘,‘周六‘,‘周日‘]
				    },
				    yAxis: {
				        type: ‘value‘
				    },
				    series: [
				        {
				            name:‘植树数量‘,
				            type:‘bar‘,
				            stack: ‘植树数量‘,
				            data:[34, 12, 56, 27, 42, 87, 62]
				        }
				    ]
				};
                  
                echart.setOption(option);  
			});
		</script>
	</head>
	<body>
		<div id="bar"></div>
	</body>
</html>

3、实现结果

(1)X轴从零刻度开始

技术分享图片

(2)X轴不从零刻度开始

技术分享图片

4、问题说明

     在xAxis中的boundaryGap属性,设置为false代表是零刻度开始,设置为true代表离零刻度间隔一段距离

再分享一下我老师大神的人工智能教程吧。零基础!通俗易懂!风趣幽默!希望你也加入到我们人工智能的队伍中来!https://www.cnblogs.com/captainbed

echarts-X轴不从0刻度开始

标签:gap   href   mil   select   key   series   ring   技术分享   led   

原文地址:https://www.cnblogs.com/odejsjhshw/p/10150690.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!