九宫格布局是一种常用的布局方式，ECharts中的大部分组件都支持九宫格布局。 标题组件（title），顾名思义，就是图表的标题，它是ECharts中的一个比较简单的组件。 图例组件（legend）也是ECharts中的一种常用组件，它以不同的颜色区别系列标记的名字。为了完善整个图表，需要配置和使用ECharts中的标题组件和图例组件。
在ECharts 2.x中，单个ECharts实例最多只能拥有一个标题组件（title），每个标题组件可以配置主标题、副标题。 而在ECharts 3.x或ECharts 4.x中，可以配置任意多个标题组件，这在需要对标题进行排版时，或单个实例中的多个图表都需要标题时会比较有用，其中，标题（title）组件的属性如表所示。
标题组件属性示意图如图所示。
标题组件支持九宫格布局，其实，ECharts中很多组件也都支持九宫格布局。 九宫格布局是将一个区域分为9个部分，如图所示。最上面一行共分为3个格子，可通过x、y（在ECharts 2.x中使用x、y，在ECharts 3.0开始使用left、top）这两个属性，分别设置为('left','top')、('center','top')、('right','top’)。 中间的一行也分为3个格子，分别是('left','center')、('center','center')、('right','center’)。 最下面的一行也分为3个格子，分别是('left','bottom')、('center','bottom')、('right','bottom')。当然，九宫格布局也可以通过一对数值进行定位。
利用某一时间的未来一周气温变化数据绘制折线图，并为图表配置标题组件，如图所示。 从图可以看出，该图为一个折线图，并在图表的左上角配置了主标题和副标题。
图例的源代码如下：
<html>
<head>
<meta charset="utf-8">
<!--引入ECharts脚本-->
<script src="js/echarts.js"></script>
</head>
<body>
<!---为ECharts准备一个具备大小（宽高）的DOM-->
<div id="main" style="width: 650px; height: 600px"></div>
<script type="text/javascript">
//基于准备好的DOM，初始化ECharts图表
var myChart = echarts.init(document.getElementById("main"));
//指定图表的配置项和数据
mytextStyle = { //定义自己的文本格式变量
color: "blue", //设置文字颜色
fontStyle: "normal", //italic斜体oblique倾斜
fontWeight: "normal", //设置文字粗细bold|bolder|lighter|100|200|300|400...
fontFamily: "黑体", //设置字体系列
fontSize: 14, //设置字体大小
};
//指定图表的配置项和数据
option = {
grid: { //配置网格组件
show: true, //设置网格组件是否显示
x: 15, y: 66, //设置网格左上角的位置
borderColor: '#FA8072', //设置网格的边界颜色
},
title: { //配置标题组件
show: true, //设置标题组件是否显示
text: "未来一周气温变化", //设置主标题
subtext:"折线图", //设置副标题
target: "blank", //'self'当前窗口打开，'blank'新窗口打开
subtarget: "blank", //设置副标题打开链接的窗口
textAlign: "center", //设置文本水平对齐
textBaseline: "top", //设置文本垂直对齐
textStyle: mytextStyle, //设置标题样式
//subtextStyle: mytextStyle, //设置副标题样式
padding: 5, //设置标题内边距
itemGap: 10, //设置主副标题间距
//设置所属图形的Canvas分层，zlevel大的Canvas会放在zlevel小的Canvas的上面
zlevel: 0,
z: 2, //设置所属组件的z分层，z值小的图形会被z值大的图形覆盖
left: "10%", //设置组件离容器左侧的距离，'left'，'center'，'right'，'20%'
top: "10", //设置组件离容器上侧的距离，'top'，'middle'，'bottom'，'20%'
right: "auto", //设置组件离容器右侧的距离，'20%'
bottom: "auto", //设置组件离容器下侧的距离，'20%'
backgroundColor: "yellow", //设置标题背景色
borderColor: "#ccc", //设置边框颜色
borderWidth: 2, //设置边框线宽
shadowColor: "red", //设置阴影颜色
shadowOffsetX: 0, //设置阴影水平方向上的偏移距离
shadowOffsetY: 0, //设置阴影垂直方向上的偏移距离
shadowBlur: 10 //设置阴影的模糊大小
},
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, 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>
利用某个月20天内气温变化、空气质量指数、金价走势和股票A走势数据，在一个DOM容器中绘制散点图，并分别为4个图表配置标题组件，如图所示。 由图可知，图中一共含有4个散点图，并且每一个图表都配置了标题，一共配置了4个标题。
图例源代码如下：
<html>
<head>
<meta charset="utf-8">
<!--引入ECharts脚本-->
<script src="js/echarts.js"></script>
</head>
<body>
<!---为ECharts准备一个具备大小（宽高）的DOM-->
<div id="main" style="width: 600px; height: 600px"></div>
<script type="text/javascript">
//基于准备好的DOM，初始化ECharts图表
var myChart = echarts.init(document.getElementById("main"));
//指定图表的配置项和数据
var titles = ['气温变化', '空气质量指数', '金价走势', '股票A走势'];
var dataAll = [ //数据
[[10.0, 8.04], [8.0, 6.95], [13.0, 7.58], [9.0, 8.81], [11.0, 8.33],
[14, 9.96], [6, 7.24], [4, 4.26], [12, 10.84], [7, 4.82], [5.0, 5.68]],
[[10, 9.14], [8.0, 8.14], [13, 8.74], [9, 8.77], [11, 9.26], [14.0, 8.1],
[6.0, 6.13], [4.0, 3.10], [12.0, 9.13], [7, 7.26], [5.0, 4.74]],
[[4.0, 4.6], [5.0, 5.7], [6.0, 6.4], [7.0, 8.1], [8.0, 7.1], [9.0, 8.4],
[10.0, 9.8], [11.0, 9.9], [12.0, 8.5], [13.0, 9.2], [15.0, 11.0]],
[[2.0, 2.8], [3.0, 3.6], [4.0, 4.1], [5.0, 5.4], [6.0, 6.7], [7.0, 7.4],
[8.0, 7.5], [9.0, 7.5], [12.0, 9.6], [15.0, 10.1], [18.0, 11.9]]
];
var markLineOpt = {
animation: false,
lineStyle: {
normal: { type: 'solid' }
},
data: [[{
coord: [0, 3], symbol: 'none' //设置起点或终点的坐标
}, {
coord: [20, 13], symbol: 'none'
}]]
}
var option = {
title: [ //配置标题组件
{ text: titles[0], textAlign: 'center', left: '25%', top: '1%' },
{ text: titles[1], left: '73%', top: '1%', textAlign: 'center' },
{ text: titles[2], textAlign: 'center', left: '25%', top: '50%' },
{ text: titles[3], textAlign: 'center', left: '73%', top: '50%' }
],
grid: [ //配置网格组件
{ x: '7%', y: '7%', width: '38%', height: '38%' }, { x2: '7%', y: '7%', width: '38%', height: '38%' },
{ x: '7%', y2: '7%', width: '38%', height: '38%' }, { x2: '7%', y2: '7%', width: '38%', height: '38%' }
],
tooltip: { //配置提示框组件
formatter: 'Group {a}:({c})'
},
xAxis: [ //配置x轴坐标系
{ gridIndex: 0, min: 0, max: 20 }, { gridIndex: 1, min: 0, max: 20 },
{ gridIndex: 2, min: 0, max: 20 }, { gridIndex: 3, min: 0, max: 20 }
],
yAxis: [ //配置y轴坐标系
{ gridIndex: 0, min: 0, max: 15 }, { gridIndex: 1, min: 0, max: 15 },
{ gridIndex: 2, min: 0, max: 15 }, { gridIndex: 3, min: 0, max: 15 }
],
series: [ //配置数据系列
{ //设置数据系列1
name: 'I', type: 'scatter',
xAxisIndex: 0, yAxisIndex: 0,
data: dataAll[0],
//markLine:markLineOpt
},
{ //设置数据系列2
name: 'II', type: 'scatter',
xAxisIndex: 1, yAxisIndex: 1,
data: dataAll[1], //markLine:markLineOpt
},
{ //设置数据系列3
name: 'III', type: 'scatter',
xAxisIndex: 2, yAxisIndex: 2,
data: dataAll[2], //markLine:markLineOpt
},
{ //设置数据系列4
name: 'IV', type: 'scatter',
xAxisIndex: 3, yAxisIndex: 3,
data: dataAll[3], //markLine:markLineOpt
}
]
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
