亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

范文杰_fe · 更新于 2020-09-27

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) 的用法，并通過實例方式展示如何實現標題的邊框效果、陰影效果、多標題功能。