第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

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

ECharts 文本樣式

在 ECharts 圖表中除了核心的各式各樣的圖表，剩下的應(yīng)該就是那些文本文字了，文字的描述也是直接關(guān)系到整個(gè)圖表的意義，文字的樣式有同樣決定了圖表的美觀程度，優(yōu)秀的圖表類型選擇加上合適的文本樣式才能組成最漂亮的圖表。這個(gè)小節(jié)我們就從各個(gè)方面去看一下如何對(duì)圖表中的文本進(jìn)行美化吧。

1. 簡(jiǎn)介

在 ECharts 的各個(gè)組件、圖表中，充斥著許多與文本相關(guān)的配置，比如 title 組件的 textStyle、subTextStyle 屬性； legend 組件的 textStyle 屬性；line 圖表的 label 屬性等等?？梢哉f，但凡與文本有關(guān)的功能，都可以參考本文的配置說明。

2. 配置項(xiàng)

針對(duì)文本項(xiàng)，ECharts 提供了一套通用的配置屬性，包含：

配置名 類型 默認(rèn)值 說明
color string #333 標(biāo)題文字顏色
fontStyle string normal 標(biāo)題文字字體風(fēng)格，可選值： normal、italic、oblique
fontWeight string | number normal 標(biāo)題文字字體粗細(xì)度，與 css 的 font-weight 屬性類似，可選值：normal、bold、bolder、lighter，或數(shù)字 100、 200、 300 等
fontFamily string sans-serif 標(biāo)題文字字體，與 css 的 font-family 屬性類似，可選值：serif、Arial、Microsoft YaHei 等
fontSize number 12 標(biāo)題文本大小
lineHeight number 文本行高
width number 文本寬度，一般不需要指定
height number 文本高度，一般不需要指定
textBorderColor string transparent 文本描邊顏色，支持如 backgroundColor 顏色值
textBorderWidth number 0 文本描邊寬度
textShadowColor string transparent 文本陰影色
textShadowBlur number 0 文本陰影長(zhǎng)度
textShadowOffsetX number 0 文本陰影的水平偏移量
textShadowOffsetY number 0 文本陰影的垂直偏移量

3. 示例

3.1 fontFamily 配置

與 CSS 中的 font-family 相似，ECharts 的 fontFamily 屬性同樣支持瀏覽器中包含的所有字體類型，也同樣可以設(shè)置為自定義字體。基于這種能力，可以實(shí)現(xiàn)在 ECharts 文本組件上勾畫自定義圖標(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>
		<link href="//cdn.bootcss.com/font-awesome/5.11.2/css/all.min.css" rel="stylesheet" />
	</head>
	<body>
		<!-- 強(qiáng)制觸發(fā)瀏覽器加載字體文件 -->
		<i class="fa fa-user" style="font-size: 0;"></i>
		<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: {
					// 自定義字體需要使用 unicode 編碼格式表示
					// 如本例中的 `\uf007`
					text: '字體測(cè)試 \uf007',
					textStyle: {
						fontSize: 25,
						// 若字體名稱中帶有空格，需要使用 `"` 包圍
						fontFamily: '"Font Awesome 5 Free"',
					},
				},
			};
			// 如果渲染時(shí)字體文件還沒加載完，自定義字體會(huì)被顯示為空
			// 所以這里需要加上延遲渲染
			setTimeout(() => {
				myChart.setOption(option);
			}, 0);
		</script>
	</body>
</html>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

實(shí)例效果：

圖片描述

需要注意幾個(gè)關(guān)鍵點(diǎn)：

  1. 對(duì)于字體圖表，需要使用 unicode 格式表示，如上例中的 \uf007；
  2. 若自定義字體名稱帶有空格，名稱需要使用 " 或 ' 包裹起來，如上例的 fontFamily: '"Font Awesome 5 Free"；
  3. canvas 中的文本不具備自動(dòng)刷新的能力，如果在渲染之前字體文件還沒加載完成，則無法正確渲染自定義字體內(nèi)容。所以在上例中，一需要使用 <i class="fa fa-user" style="font-size: 0;"></i> 觸發(fā)瀏覽器加載字體文件；二需要在調(diào)用 setOption 處使用 setTimeout 實(shí)現(xiàn)延遲渲染。

3.2 文本描邊

可通過 textBorderColor、textBorderWidth 屬性實(shí)現(xiàn)文字描邊效果，示例：

實(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: '字體測(cè)試\n第二行效果',
					left: '30%',
					top: '30%',
					textStyle: {
						fontSize: 20,
						textBorderWidth: 10,
						textBorderColor: '#ddd',
						lineHeight: 40,
					},
				},
			};
			// 如果渲染時(shí)字體文件還沒加載完，自定義字體會(huì)被顯示為空
			// 所以這里需要加上延遲渲染
			setTimeout(() => {
				myChart.setOption(option);
			}, 0);
		</script>
	</body>
</html>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

示例效果：

圖片描述

3.4 陰影效果

與 rect 類型的組件相似，文本組件也支持陰影效果，可通過 textShadowColor、textShadowBlur、textShadowOffsetX、textShadowOffsetY 屬性控制，示例：

實(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 shadow 測(cè)試',
					left: '30%',
					top: '30%',
					textStyle: {
						fontSize: 25,
						textShadowColor: '#000',
						textShadowBlur: 8,
						textShadowOffsetX: 20,
						textShadowOffsetY: 20,
					},
				},
			};
			myChart.setOption(option);
		</script>
	</body>
</html>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

示例效果：

圖片描述

4. 小結(jié)

圖片描述
本節(jié)主要介紹 ECharts 中各類文本樣式的配置方法。文本樣式是一種使用廣泛，卻不難理解的配置，各個(gè)項(xiàng)都能在 CSS 上找到對(duì)應(yīng)的概念，所以不必花太多時(shí)間學(xué)習(xí)，需要用到的時(shí)候回過頭來仔細(xì)比對(duì)各個(gè)配置屬性即可。