echarts,xAxis类型为time时,boundaryGap坐标轴两边留白策略设置无效。

发布于 2022-01-07 13:47:53 字数 1822 浏览 838 评论 3

echarts官网的api中有这么一段:
xAxis.boundaryGap
坐标轴两边留白策略,类目轴和非类目轴的设置和表现不一样。
类目轴中 boundaryGap 可以配置为 true 和 false。默认为 true,这时候刻度只是作为分隔线,标签和数据点都会在两个刻度之间的带(band)中间。
非类目轴,包括时间,数值,对数轴,boundaryGap是一个两个值的数组,分别表示数据最小值和最大值的延伸范围,可以直接设置数值或者相对的百分比,在设置 min 和 max 后无效。 示例:
boundaryGap: ['20%', '20%']

可是为什么x轴的type:time类型时候就无效呢???

源码如下:

option = {
  	"title":{"text":"玩家充值","link":"javascript: void(0)","target":"self","subtext":"单位:元","x":"left"},
			 toolbox: {
				show: true,
				orient:'vertical',
				right:'25',
				feature: {
					magicType: {
						 type: ['line', 'bar', 'stack', 'tiled']	//折线与柱形转化
						
					},
					//dataView: {},				//数据视图
					restore: {},				//还原
					saveAsImage: {}				//保存为图片
				}
			},
			"tooltip":{"trigger":"axis","axisPointer":{"type":"line"},formatter:''},
			"legend":{
				"left":"center",
				"data":["捕鱼","斗地主","牛牛"] 
				},
			"grid":{"left":"3%","right":"4%","bottom":"3%","containLabel":true},
			"xAxis":{"type":"time",
					 "boundaryGap":['20%', '20%']
					},
			"yAxis":{"type":"value"},
			"series":[
				{"name":"斗地主","type":"bar","stack":"总量","data":[["2017-12-04 00:00:00",130.888],["2017-12-05 00:00:00",380.3698],["2017-12-06 00:00:00",320],["2017-12-07 00:00:00",320]]},
				{"name":"捕鱼","type":"bar","stack":"总量","data":[["2017-12-04 00:00:00",125],["2017-12-05 00:00:00",410],["2017-12-06 00:00:00",520],["2017-12-07 00:00:00",320]]},
				{"name":"牛牛","type":"bar","stack":"总量","data":[["2017-12-04 00:00:00",275],["2017-12-05 00:00:00",220],["2017-12-06 00:00:00",498],["2017-12-07 00:00:00",320]]}]
};

显示结果如下:

两边并没有留白?
求大佬赐教,跪谢。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

半世蒼涼 2022-01-07 16:54:37

楼主的代码,在我这里运行,没有发生楼主所展示的现象, "boundaryGap":['20%', '20%'] 有效,结果正常。注意:

1.   我引进的 echarts.min.js 取自这个网址: 

https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js

2.   我预先限定了 id = “main” 的 html元素  <div> 的宽和高。

<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
     <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
      option = {
  	"title":{"text":"玩家充值","link":"javascript: void(0)","target":"self","subtext":"单位:元","x":"left"},
			 toolbox: {
				show: true,
				orient:'vertical',
				right:'25',
				feature: {
					magicType: {
						 type: ['line', 'bar', 'stack', 'tiled']	
						
					},
					restore: {},			
					saveAsImage: {}			
				}
			},
			"tooltip":{"trigger":"axis","axisPointer":{"type":"line"},formatter:''},
			"legend":{
				"left":"center",
				"data":["捕鱼","斗地主","牛牛"] 
				},
			"grid":{"left":"3%","right":"4%","bottom":"3%","containLabel":true},
			"xAxis":{"type":"time",
					 "boundaryGap":['20%', '20%']
					},
			"yAxis":{"type":"value"},
			"series":[
				{"name":"斗地主","type":"bar","stack":"总量","data":[["2017-12-04 00:00:00",130.888],["2017-12-05 00:00:00",380.3698],["2017-12-06 00:00:00",320],["2017-12-07 00:00:00",320]]},
				{"name":"捕鱼","type":"bar","stack":"总量","data":[["2017-12-04 00:00:00",125],["2017-12-05 00:00:00",410],["2017-12-06 00:00:00",520],["2017-12-07 00:00:00",320]]},
				{"name":"牛牛","type":"bar","stack":"总量","data":[["2017-12-04 00:00:00",275],["2017-12-05 00:00:00",220],["2017-12-06 00:00:00",498],["2017-12-07 00:00:00",320]]}]
};

        myChart.setOption(option);
    </script>
</body>
</html>

 

为你鎻心 2022-01-07 15:47:56

添加:boundaryGap: true,

xAxis: {
       
 .......    
 boundaryGap: true,

 ......
 },

 

初见你 2022-01-07 15:39:19

非类目轴,包括时间,数值,对数轴,boundaryGap是一个两个值的数组,分别表示数据最小值和最大值的延伸范围,可以直接设置数值或者相对的百分比,在设置 min 和 max 后无效。

当设置成 function 形式时,可以根据计算得出的数据最大最小值设定坐标轴的最小值。如:

min: function(value) {
    return value.min - 20;
}

其中 value 是一个包含 min 和 max 的对象,分别表示数据的最大最小值,这个函数应该返回坐标轴的最小值。

设置个最小值

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文