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

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

ECharts 區(qū)域樣式

在《ECharts 文本樣式》小節(jié)，我們學習了如何對圖表中的文本樣式進行美化，需要美化的內容不只是文本，在我們圖表中還有其他的內容需要我們用樣式美化，以便于能更好的觀察數據以及數據的變化，比如：為折線圖增加一個背景之類的。下面我們就對 ECharts 區(qū)域樣式內容進行一個解讀，當然我們還會通過一些實例來幫助我們理解。

1. 簡介

在 ECharts 中，圖表、組件最終會被渲染成線段、多邊形、文本的集合，多邊形在不同組件中雖然被賦予不同的語義，但它們都有相似的表現(xiàn)方法，ECharts 為此提供了一套通用的配置屬性集合，稱之為區(qū)域樣式 —— areaStyle。

areaStyle 基類定義在 src/model/mixin/areaStyle.js 文件中，其他組件繼承擴展，例如 series-line.areaStyle、radar.splitArea.areaStyle、xAxis.splitArea 等。本文不對具體組件中的定義做過多說明，而側重于 areaStyle 對象通用的基礎功能。

2. 配置項

areaStyle 的通用屬性包括：

配置名 類型 默認值 說明
color string|array|object 區(qū)域背景色，支持色值、數組、漸變配置對象，詳情請參考 示例 一節(jié)
shadowBlur number 0 指定區(qū)域陰影模糊值大小，需要設置 show 為 true，且 color 不為 transparent 才能生效
shadowColor string 陰影顏色值，默認為組件的 color 值
shadowOffsetX number 0 陰影的水平偏移量
shadowOffsetY number 0 陰影的垂直偏移量
opacity number 1 圖形透明度。支持從 0 到 1 的數字，為 0 時不繪制該圖形

3. 示例

3.1 使用字符串配置背景色

color 屬性支持傳入色值字符串，格式支持 RGB 如 rgb(255, 255, 255)、RGBA 如 rgb(255, 255, 255, 0.5)、十六進制如 #fff 等，示例：

實例演示
預覽 復制
復制成功！
<!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: {},
					},
				},
				xAxis: {
					type: 'category',
					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
				},
				yAxis: { type: 'value' },
				series: [
					{
						data: [820, 932, 901, 934, 1290, 1330, 1320],
						type: 'line',
						boundaryGap: false,
						areaStyle: { color: '#666' },
					},
				],
			};
			myChart.setOption(option);
		</script>
	</body>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

示例效果：

圖片描述

3.2 使用漸變效果配置背景色

此外，color 屬性還支持傳入漸變配置對象，實現(xiàn)漸變效果，示例：

實例演示
預覽 復制
復制成功！
<!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: {},
					},
				},
				xAxis: {
					type: 'category',
					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
				},
				yAxis: { type: 'value' },
				series: [
					{
						data: [820, 932, 901, 934, 1290, 1330, 1320],
						type: 'line',
						boundaryGap: false,
						areaStyle: {
							// 傳入漸變對象實例
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
								{
									offset: 0,
									color: 'rgb(0, 255, 102)',
								},
								{
									offset: 1,
									color: 'rgb(0, 102, 102)',
								},
							]),
						},
					},
				],
			};
			myChart.setOption(option);
		</script>
	</body>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

示例效果：

圖片描述

漸變效果可通過線性漸變類 echarts.graphic.LinearGradient、徑向漸變類 echarts.graphic.RadialGradient 聲明。

3.3 使用圖像背景

color 屬性還支持傳入 HTMLImageElement 對象，實現(xiàn)背景圖像配置，示例：

實例演示
預覽 復制
復制成功！
<!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>
		<img id="img" src="../assets/imooc-logo.png" alt="" style="width: 0;" />
		<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: {},
					},
				},
				xAxis: {
					type: 'category',
					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
				},
				yAxis: { type: 'value' },
				series: [
					{
						data: [820, 932, 901, 934, 1290, 1330, 1320],
						type: 'line',
						boundaryGap: false,
						areaStyle: {
							color: { image: document.getElementById('img'), repeat: 'repeat' },
						},
					},
				],
			};
			myChart.setOption(option);
		</script>
	</body>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

示例效果：

圖片描述

上例 color 對象接受兩個配置屬性：

  • image：僅支持 HTMLImageElement、 HTMLCanvasElement 對象，所以注意使用時需要通過 document.getElementById 等方法獲取到 dom 實例；
  • repeat：指定圖像的重復渲染模式，與 CSS 類似，支持： no-repeat、repeat-x、repeat-y、repeat

3.4 配置多個背景色

除上述情況外，部分特殊組件的 areaStyle.color 屬性還支持傳入數組，配置多個背景。例如直角坐標軸組件的 xAxis.splitArea.areaStyle.color，示例：

實例演示
預覽 復制
復制成功！
<!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>
		<img id="img" src="../assets/imooc-logo.png" alt="" style="width: 0;" />
		<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: {},
					},
				},
				xAxis: {
					type: 'category',
					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
					splitArea: {
						show: true,
						areaStyle: {
							color: ['#009966', 'transparent', '#66CCFF', 'transparent'],
						},
					},
				},
				yAxis: { type: 'value' },
				series: [
					{
						data: [820, 932, 901, 934, 1290, 1330, 1320],
						type: 'line',
					},
				],
			};
			myChart.setOption(option);
		</script>
	</body>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

示例效果：

圖片描述

支持復數背景色配置的組件匯總如下：

4. 小結

圖片描述
本節(jié)主要討論區(qū)域樣式的配置方法，所謂“區(qū)域樣式”是各類圖表中廣泛存在的功能特性，學習時應助理理解 color 屬性所能支持的各類效果，包括單色值、多色值、漸變、圖像對象四種場景，在實際應用中需要靈活調用。

另外，本文討論的是 areaStyle 的基類，也就是最基礎的功能集。各個組件在繼承、實現(xiàn)時會因組件的特性而略有變化，所以實際應用中可查閱配置文檔，根據文檔的說明進行開發(fā)。