共计 2066 个字符，预计需要花费 6 分钟才能阅读完成。
ECharts 默认状况下上下左右是有一些空白区域的，红色背景下图表没被撑满就会显得丑丑的
相似这样：
去除后是这样：
难看了很多
解决方案：
通过 grid 属性来管制直角坐标系内绘图网格周围边框地位，具体有如下配置项：
x：直角坐标系内绘图网格与左侧间隔，数值单位 px，反对百分比（字符串），如：50%
x2：直角坐标系内绘图网格与右侧间隔，数值单位 px，反对百分比（字符串），如：50%
y：直角坐标系内绘图网格与顶部间隔，数值单位 px，反对百分比（字符串），如：50%
y2：直角坐标系内绘图网格与底部间隔，数值单位 px，反对百分比（字符串），如：50%
示例代码：
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>hangge.com</title>
<script src="echarts-all.js"></script>
<script type="text/javascript">
window.onload = function() {
// 基于筹备好的 dom，初始化 echarts 图表
var myChart = echarts.init(document.getElementById('main'));
// 图表配置
var option = {
backgroundColor:'#EFEFEF',
tooltip : {trigger: 'axis'},
xAxis : [
{
type : 'category',
boundaryGap : false,
data : ['周一','周二','周三','周四','周五','周六','周日']
}
],
yAxis : [
{
type : 'value',
axisLabel : {formatter: '{value} °C'
}
}
],
series : [
{
name:'最高气温',
type:'line',
data:[11, 11, 15, 13, 12, 13, 10]
},
{
name:'最低气温',
type:'line',
data:[1, -2, 2, 5, 3, 2, 0]
}
],
grid: {
x: 50,
y: 25,
x2: 30,
y2: 35
},
};
// 为 echarts 对象加载数据
myChart.setOption(option);
// 窗口缩放后从新调整图标尺寸
window.onresize = function (){myChart.resize();
}
}
</script>
</head>
<style>
#main {
position: absolute;
top: 15px;
bottom: 15px;
left: 15px;
right: 15px;
}
</style>
<body>
<!-- 用于显示图表的 div -->
<div id="main"></div>
</script>
</body>
原文地址：https://www.hangge.com/blog/c…
grid 属性反对的选项：
官网文档地址：https://echarts.apache.org/ex…
正文完
