前端开发 / ECharts 标题组件

ECharts 标题组件

之前在 《ECharts 图表组成》 小节中我们已经对 图表的各个组件有了基本的认识,从本小节开始我们将逐个介绍这几个组件,本节我们就来看看这至关重要的一环,没有他你甚至连这个图表表示的是什么都不清楚,他的存在就像是网站的标题那样,但是 “标题虽好可不要贪长” 哦,尽量简洁明了。

1. 简介

官方解释:

title 即标题组件,包含主标题与副标题,ECharts 3.0 版本后支持多个标题组件。

慕课解释:

标题组件对应下图红色框部分:

图片描述

title 组件使用频率比较高,功能也比较完备,除了可以自定义样式、位置等基础功能外,还支持超链接模式,主标题、副标题功能等,下面展开讨论。

2. 配置清单

完整配置项:

配置名 类型 默认值 说明
id string 指定后可用于 option 或 API 中引用该组件
show bool true 是否显示标题组件
text string 主标题文本,支持 \n 换行
link string 主标题文本超链接
target string blank 指定主标题打开链接的窗口,与 标签的 target 属性相似,但只支持 self、blank 值
textStyle object 主标题样式配置,详见下文
subtext string 子标题文本,支持 \n 换行
sublink string 子标题文本超链接
subtarget string blank 指定子标题打开链接的窗口
subtextStyle object 子标题样式配置
textAlign string auto 文本水平对齐方法,可选值: auto、left、center、right
textVerticalAlign string auto 文本垂直对齐方法,可选值: auto、top、middle、bottom
triggerEvent boolean false 组件是否触发事件
padding number | Array<number> 5 标题内边距
itemGap number 10 主副标题间距,单位 px
zLevel number 0 一级层叠值
z number 6 二级层叠值
left number | string auto 组件离容器左侧的距离,支持三种值:数值如 20,指定像素距离;百分比如 20%,指定相对容器宽度的百分比;字符串,包括:left、center、right、auto
top number | string auto 组件离容器顶部的距离,支持三种值:数值如 20,指定像素距离;百分比如 20%,指定相对容器高度的百分比;字符串,包括:top、middle、bottom、auto
bottom number | string auto 组件离容器底部的距离,支持三种值:数值如 20,指定像素距离;百分比如 20%,指定相对容器高度的百分比;字符串,包括:top、middle、bottom、auto
right number | string auto 组件离容器右侧的距离,支持三种值:数值如 20,指定像素距离;百分比如 20%,指定相对容器宽度的百分比;字符串,包括:left、center、right、auto
backgroundColor string rgba(0,0,0,0) 组件背景色,支持 RGB 如 rgb(255, 255, 255)、RGBA 如 rgb(255, 255, 255, 0.5)、十六进制如 #fff
borderColor string #ccc 组件边框颜色,支持与 backgroundColor 一样的值
borderWidth number 0 组件边框线宽
borderRadius number | Array 0 边框圆角半径,单位为 px,支持传入数值分别制定各个角度的版本,如: [5, 5, 0, 0] //(顺时针左上,右上,右下,左下)
shadowBlur number 0 指定组件阴影模糊值大小,需要设置 show 为 true,且背景色不为 transparent 才能生效
shadowColor string 阴影颜色值,默认为组件的 backgroundColor 值
shadowOffsetX number 0 阴影的水平偏移量
shadowOffsetY number 0 阴影的垂直偏移量

其中,标题样式 textStyle 及副标题样式 subtextStyle 可参阅 ECharts 文本样式 一节。

3. 示例

3.1 基础示例

定义 title 组件,只需通过传入 title 对象即可完成配置,示例:

实例演示
预览 复制
复制成功!
<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
		<title>Echarts Example</title>
	</head>
	<body>
		<div id="main" style="width: 600px;height: 400px"></div>

		<script src="//cdn.bootcss.com/echarts/4.5.0/echarts.common.js"></script>
		<script type="text/javascript">
			var myChart = echarts.init(document.getElementById('main'));

			var option = {
				toolbox: {
					feature: {
						saveAsImage: {},
					},
				},
				title: {
					text: 'title 样例',
					left: '30%',
					top: '30%',
				},
			};
			myChart.setOption(option);
		</script>
	</body>
</html>
运行案例 点击 "运行案例" 可查看在线运行效果

示例效果:

图片描述

3.2 边框

可通过 borderColor、borderWidth、borderRadius 属性配置标题边框,示例:

实例演示
预览 复制
复制成功!
<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
		<title>Echarts Example</title>
	</head>
	<body>
		<div id="main" style="width: 600px;height: 400px"></div>

		<script src="//cdn.bootcss.com/echarts/4.5.0/echarts.common.js"></script>
		<script type="text/javascript">
			var myChart = echarts.init(document.getElementById('main'));

			var option = {
				toolbox: {
					feature: {
						saveAsImage: {},
					},
				},
				title: {
					text: 'title 样例',
					left: '30%',
					top: '30%',
					borderColor: '#ddd',
					borderWidth: 3,
					borderRadius: 100,
				},
			};
			myChart.setOption(option);
		</script>
	</body>
</html>
运行案例 点击 "运行案例" 可查看在线运行效果

示例效果:

图片描述

3.3 阴影效果

可通过 shadowColor、shadowBlur、shadowOffsetX、shadowOffsetY 属性配置标题外框的阴影效果:

实例演示
预览 复制
复制成功!
<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
		<title>Echarts Example</title>
	</head>
	<body>
		<div id="main" style="width: 600px;height: 400px"></div>

		<script src="//cdn.bootcss.com/echarts/4.5.0/echarts.common.js"></script>
		<script type="text/javascript">
			var myChart = echarts.init(document.getElementById('main'));

			var option = {
				title: {
					left: '30%',
					top: '30%',
					text: 'title 样例',
					borderWidth: 1,
					backgroundColor: '#ccc',
					shadowBlur: 4,
					shadowColor: '#ddd',
					shadowOffsetX: 20,
					shadowOffsetY: 20,
				},
			};
			myChart.setOption(option);
		</script>
	</body>
</html>
运行案例 点击 "运行案例" 可查看在线运行效果

示例效果:

图片描述

需注意,此处配置的是整个标题组件块的引用效果,必须设置 borderWidth > 0。也可以单独设置文字的阴影效果,详情可查阅 ECharts 文本样式

3.4 多标题支持

ECharts 3 之后支持在一个实例上配置多个标题组件,方法是在 title 配置项上传入数组,数组项与单个 title 配置相同,示例:

实例演示
预览 复制
复制成功!
<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
		<title>Echarts Example</title>
	</head>
	<body>
		<div id="main" style="width: 600px;height: 400px"></div>

		<script src="//cdn.bootcss.com/echarts/4.5.0/echarts.common.js"></script>
		<script type="text/javascript">
			var myChart = echarts.init(document.getElementById('main'));

			var option = {
				title: [
					{ text: 'title 1', top: 10, left: '30%' },
					{ text: 'title 2', top: 40, left: '30%' },
					{ text: 'title 3', top: 70, left: '30%' },
					{ text: 'title 4', top: 100, left: '30%' },
				],
			};
			myChart.setOption(option);
		</script>
	</body>
</html>
运行案例 点击 "运行案例" 可查看在线运行效果

示例效果:

图片描述

4. 个人经验

ECharts 的不同组件的配置风格的一致性是很高的,比如本文中的 title 组件,就有很多配置属性可以复用到其他组件当中,比如 left、top 等位置属性可以复用到其他几乎所有组件;textStyle 对象还可以复用到其他带文本的组件,如 yAxis 的 nameStyle; borderColor 等边框则可以复用到其他带边框的组件,如 grid。高一致性能使得学习曲线逐渐平滑,所以 ECharts 的学习,越到后面也就会越轻松。

5. 小结

图片描述
本节主要介绍 Echarts 中标题组件(title) 的用法,并通过实例方式展示如何实现标题的边框效果、阴影效果、多标题功能。