echarts，xAxis类型为time时，boundaryGap坐标轴两边留白策略设置无效：报错
"
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]]}]
};显示结果如下：
两边并没有留白？
求大佬赐教，跪谢。
写回答
-
"
非类目轴，包括时间，数值，对数轴，
boundaryGap是一个两个值的数组，分别表示数据最小值和最大值的延伸范围，可以直接设置数值或者相对的百分比，在设置 <a href=""https://www.echartsjs.com/zh/option.html#xAxis.min"">min 和 <a href=""https://www.echartsjs.com/zh/option.html#xAxis.max"">max 后无效。当设置成
function形式时，可以根据计算得出的数据最大最小值设定坐标轴的最小值。如：min: function(value) { return value.min - 20; }其中
value是一个包含min和max的对象，分别表示数据的最大最小值，这个函数应该返回坐标轴的最小值。设置个最小值
######添加：boundaryGap: true,
xAxis: { ....... boundaryGap: true, ...... },
######楼主的代码，在我这里运行，没有发生楼主所展示的现象， "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>
"2020-06-10 09:35:12赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
