最近中文字幕高清中文字幕无,亚洲欧美高清一区二区三区,一本色道无码道dvd在线观看 ,一个人看的www免费高清中文字幕

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

ECharts 標(biāo)題組件

之前在 《ECharts 圖表組成》 小節(jié)中我們已經(jīng)對(duì) 圖表的各個(gè)組件有了基本的認(rèn)識(shí)，從本小節(jié)開始我們將逐個(gè)介紹這幾個(gè)組件，本節(jié)我們就來看看這至關(guān)重要的一環(huán)，沒有他你甚至連這個(gè)圖表表示的是什么都不清楚，他的存在就像是網(wǎng)站的標(biāo)題那樣，但是 “標(biāo)題雖好可不要貪長” 哦，盡量簡潔明了。

1. 簡介

官方解釋：

title 即標(biāo)題組件，包含主標(biāo)題與副標(biāo)題，ECharts 3.0 版本后支持多個(gè)標(biāo)題組件。

慕課解釋：

標(biāo)題組件對(duì)應(yīng)下圖紅色框部分：

圖片描述

title 組件使用頻率比較高，功能也比較完備，除了可以自定義樣式、位置等基礎(chǔ)功能外，還支持超鏈接模式，主標(biāo)題、副標(biāo)題功能等，下面展開討論。

2. 配置清單

完整配置項(xiàng)：

配置名 類型 默認(rèn)值 說明
id string 指定后可用于 option 或 API 中引用該組件
show bool true 是否顯示標(biāo)題組件
text string 主標(biāo)題文本，支持 \n 換行
link string 主標(biāo)題文本超鏈接
target string blank 指定主標(biāo)題打開鏈接的窗口，與 標(biāo)簽的 target 屬性相似，但只支持 self、blank 值
textStyle object 主標(biāo)題樣式配置，詳見下文
subtext string 子標(biāo)題文本，支持 \n 換行
sublink string 子標(biāo)題文本超鏈接
subtarget string blank 指定子標(biāo)題打開鏈接的窗口
subtextStyle object 子標(biāo)題樣式配置
textAlign string auto 文本水平對(duì)齊方法，可選值： auto、left、center、right
textVerticalAlign string auto 文本垂直對(duì)齊方法，可選值： auto、top、middle、bottom
triggerEvent boolean false 組件是否觸發(fā)事件
padding number | Array<number> 5 標(biāo)題內(nèi)邊距
itemGap number 10 主副標(biāo)題間距，單位 px
zLevel number 0 一級(jí)層疊值
z number 6 二級(jí)層疊值
left number | string auto 組件離容器左側(cè)的距離，支持三種值：數(shù)值如 20，指定像素距離；百分比如 20%，指定相對(duì)容器寬度的百分比；字符串，包括：left、center、right、auto
top number | string auto 組件離容器頂部的距離，支持三種值：數(shù)值如 20，指定像素距離；百分比如 20%，指定相對(duì)容器高度的百分比；字符串，包括：top、middle、bottom、auto
bottom number | string auto 組件離容器底部的距離，支持三種值：數(shù)值如 20，指定像素距離；百分比如 20%，指定相對(duì)容器高度的百分比；字符串，包括：top、middle、bottom、auto
right number | string auto 組件離容器右側(cè)的距離，支持三種值：數(shù)值如 20，指定像素距離；百分比如 20%，指定相對(duì)容器寬度的百分比；字符串，包括：left、center、right、auto
backgroundColor string rgba(0,0,0,0) 組件背景色，支持 RGB 如 rgb(255, 255, 255)、RGBA 如 rgb(255, 255, 255, 0.5)、十六進(jìn)制如 #fff
borderColor string #ccc 組件邊框顏色，支持與 backgroundColor 一樣的值
borderWidth number 0 組件邊框線寬
borderRadius number | Array 0 邊框圓角半徑，單位為 px，支持傳入數(shù)值分別制定各個(gè)角度的版本，如： [5, 5, 0, 0] //（順時(shí)針左上，右上，右下，左下）
shadowBlur number 0 指定組件陰影模糊值大小，需要設(shè)置 show 為 true，且背景色不為 transparent 才能生效
shadowColor string 陰影顏色值，默認(rèn)為組件的 backgroundColor 值
shadowOffsetX number 0 陰影的水平偏移量
shadowOffsetY number 0 陰影的垂直偏移量

其中，標(biāo)題樣式 textStyle 及副標(biāo)題樣式 subtextStyle 可參閱 ECharts 文本樣式 一節(jié)。

3. 示例

3.1 基礎(chǔ)示例

定義 title 組件，只需通過傳入 title 對(duì)象即可完成配置，示例：

實(shí)例演示
預(yù)覽 復(fù)制
復(fù)制成功！
<!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>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

示例效果：

圖片描述

3.2 邊框

可通過 borderColor、borderWidth、borderRadius 屬性配置標(biāo)題邊框，示例：

實(shí)例演示
預(yù)覽 復(fù)制
復(fù)制成功！
<!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>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

示例效果：

圖片描述

3.3 陰影效果

可通過 shadowColor、shadowBlur、shadowOffsetX、shadowOffsetY 屬性配置標(biāo)題外框的陰影效果：

實(shí)例演示
預(yù)覽 復(fù)制
復(fù)制成功！
<!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>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

示例效果：

圖片描述

需注意，此處配置的是整個(gè)標(biāo)題組件塊的引用效果，必須設(shè)置 borderWidth > 0。也可以單獨(dú)設(shè)置文字的陰影效果，詳情可查閱 ECharts 文本樣式。

3.4 多標(biāo)題支持

ECharts 3 之后支持在一個(gè)實(shí)例上配置多個(gè)標(biāo)題組件，方法是在 title 配置項(xiàng)上傳入數(shù)組，數(shù)組項(xiàng)與單個(gè) title 配置相同，示例：

實(shí)例演示
預(yù)覽 復(fù)制
復(fù)制成功！
<!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>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

示例效果：

圖片描述

4. 個(gè)人經(jīng)驗(yàn)

ECharts 的不同組件的配置風(fēng)格的一致性是很高的，比如本文中的 title 組件，就有很多配置屬性可以復(fù)用到其他組件當(dāng)中，比如 left、top 等位置屬性可以復(fù)用到其他幾乎所有組件；textStyle 對(duì)象還可以復(fù)用到其他帶文本的組件，如 yAxis 的 nameStyle； borderColor 等邊框則可以復(fù)用到其他帶邊框的組件，如 grid。高一致性能使得學(xué)習(xí)曲線逐漸平滑，所以 ECharts 的學(xué)習(xí)，越到后面也就會(huì)越輕松。

5. 小結(jié)

圖片描述
本節(jié)主要介紹 Echarts 中標(biāo)題組件(title) 的用法，并通過實(shí)例方式展示如何實(shí)現(xiàn)標(biāo)題的邊框效果、陰影效果、多標(biāo)題功能。