使用ECharts绘制图表时，可能会发现图表真正的绘图区域和图表容器之间有一些间隔，有时看上去不太协调。查看相关API可以得知，可以通过调整几个属性值控制绘图区域与容器之间的间距。 因此，需要了解直角坐标系下如何绘制网格（grid）及其作用、如何绘制直角坐标系下的x轴（xAxis）和y轴（yAxis） 。 在ECharts的直角坐标系下，有两个重要的组件：网格（grid）和坐标轴（axis）。 ECharts中的网格是直角坐标系下定义网格布局和大小及其颜色的组件，用于定义直角坐标系整体布局。ECharts中的网格组件中所有参数的属性如表所示。
定义网格布局和大小的6个参数如图所示。 由ECharts网格组件参数表和下图可知，共有6个主要参数定义网格布局和大小。其中，x与y用于定义网格的左上角的位置；x2与y2用于定义网格的右下角的位置；width与height用于定义网格的宽度和高度；指定width后将忽略x2，指定height后将忽略y2
利用某一时间未来一周气温变化数据绘制折线图，并为图表配置网格组件，如图所示。 从图可以看出，本例中的网格边界线为4条边上的宽度为5px的粗线条。
图示的源代码如下：
<html>
<head>
<meta charset="utf-8">
<!--引入ECharts脚本-->
<script src="js/echarts.js"></script>
</head>
<body>
<!---为ECharts准备一个具备大小（宽高）的DOM-->
<div id="main" style="width: 900px; height: 600px"></div>
<script type="text/javascript">
//基于准备好的DOM，初始化ECharts图表
var myChart = echarts.init(document.getElementById("main"));
//指定图表的配置项和数据
var option = {
grid: { //配置网格组件
show: true, //设置网格组件是否显示
x: 15, y: 66, //设置网格左上角的位置
width: '93%', height: '80%', //设置网格的宽度和高度
x2: 100, y2: 100, //设置网格右下角的位置
borderWidth: 5, //设置网格边界线的宽度
borderColor: 'red', //设置网格的边界颜色
backgroundColor: '#f7f7f7', //设置背景整个网格的颜色
},
title: { //配置标题组件
text: '未来一周气温变化',
},
tooltip: { //配置提示框组件
trigger: 'axis'
},
legend: { //配置图例组件
data: ['最高气温', '最低气温']
},
toolbox: { //配置工具箱组件
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true }, saveAsImage: { show: true }
}
},
calculable: true,
xAxis: [ //配置x轴坐标系
{
show: false, smooth: true,
type: 'category', boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}
],
yAxis: [ //配置y轴坐标系
{
show: false, type: 'value',
axisLabel: { formatter: '{value} °C' }
}
],
series: [ //配置数据系列
{
name: '最高气温', smooth: true,
type: 'line', data: [11, 11, 15, 13, 12, 13, 10],
markPoint: {
data: [
{ type: 'max', name: '最大值' },
{ type: 'min', name: '最小值' }
]
},
markLine: { //设置标记线
data: [
{ type: 'average', name: '平均值' }
]
}
},
{
name: '最低气温', smooth: true,
type: 'line', data: [1, -2, 2, 5, 3, 2, 0],
markPoint: { //设置标记点
data: [
{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }
]
},
markLine: { //设置标记线
data: [
{ type: 'average', name: '平均值' }
]
}
}
]
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
