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...