您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

ECharts 标题组件

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

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

解释:

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

title 组件使用频率比较高,也比较完备,除了可以样式、位置等基础外,还超模式,主、副等,下面展开讨论。

完整配置项:

其中, textStyle 及副 subtextStyle 可参阅 一节。

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

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		< charset="utf-8" />
		< http-equiv="X-UA-Compatible" content="IE=edge" />
		< name="viewport" content="width=device-width,initial-scale=1.0" />
		<title>Echarts Example</title>
	</head>
	<body>
		<div id="main" style="width: px;height: px"></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 = {
				tool@R_766_2@: {
					feature: {
						saveAsImage: {},
					},
				},
				title: {
					text: 'title 样例',
					left: '30%',
					top: '30%',
				},
			};
			myChart.setOption(option);
		</script>
	</body>
</html>

示例:

可通过 borderColor、borderWidth、borderRadius 配置边框,示例:

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		< charset="utf-8" />
		< http-equiv="X-UA-Compatible" content="IE=edge" />
		< name="viewport" content="width=device-width,initial-scale=1.0" />
		<title>Echarts Example</title>
	</head>
	<body>
		<div id="main" style="width: px;height: px"></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 = {
				tool@R_766_2@: {
					feature: {
						saveAsImage: {},
					},
				},
				title: {
					text: 'title 样例',
					left: '30%',
					top: '30%',
					borderColor: '#ddd',
					borderWidth: ,
					borderRadius: ,
				},
			};
			myChart.setOption(option);
		</script>
	</body>
</html>

示例:

可通过 shadowColor、shadowBlur、shadowOffsetX、shadowOffsetY 配置外框的阴影:

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		< charset="utf-8" />
		< http-equiv="X-UA-Compatible" content="IE=edge" />
		< name="viewport" content="width=device-width,initial-scale=1.0" />
		<title>Echarts Example</title>
	</head>
	<body>
		<div id="main" style="width: px;height: px"></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: ,
					backgroundColor: '#ccc',
					shadowBlur: ,
					shadowColor: '#ddd',
					shadowOffsetX: ,
					shadowOffsetY: ,
				},
			};
			myChart.setOption(option);
		</script>
	</body>
</html>

示例:

需注意,此处配置的是整个组件块的引用,必须设置 borderWidth > 0。也可以单独设置的阴影,详情可查阅 。

ECharts 3 之后在实例上配置多个组件,是在 title 配置项入数组,数组项与单个 title 配置相同,示例:

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		< charset="utf-8" />
		< http-equiv="X-UA-Compatible" content="IE=edge" />
		< name="viewport" content="width=device-width,initial-scale=1.0" />
		<title>Echarts Example</title>
	</head>
	<body>
		<div id="main" style="width: px;height: px"></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: , left: '30%' },
					{ text: 'title 2', top: , left: '30%' },
					{ text: 'title 3', top: , left: '30%' },
					{ text: 'title 4', top: , left: '30%' },
				],
			};
			myChart.setOption(option);
		</script>
	</body>
</html>

示例:

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


联系我
置顶