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

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

ECharts 創(chuàng)建圖表

經(jīng)過(guò)前面的學(xué)習(xí)，相信大家已經(jīng)在自己的項(xiàng)目中繪制了一個(gè)基本的 ECharts 圖表，但是前面學(xué)習(xí)只是為了讓我們更好的了解安裝的流程。所以該小節(jié)，我們將會(huì)去更加詳細(xì)的了解到 ECharts 的 創(chuàng)建，更新，也會(huì)通過(guò)一個(gè)案例去跟蹤分析整個(gè)過(guò)程，所謂 萬(wàn)事開(kāi)頭難，在這個(gè)過(guò)程中也會(huì)有許許多多需要同學(xué)們注意的地方，希望大家在學(xué)習(xí)的時(shí)候也能靜下心來(lái)完成這重要的一步。

1. 簡(jiǎn)介

ECharts 用法非常簡(jiǎn)單，定義圖表的基本流程是實(shí)例化 echarts 后，調(diào)用 setOption 傳入配置對(duì)象，ECharts 根據(jù)配置對(duì)象的描述渲染各類(lèi)圖表、組件。本節(jié)主要講解初始配置圖表的基本流程，以及實(shí)例化后動(dòng)態(tài)更新圖表內(nèi)容的方法。

2. 創(chuàng)建圖表

2.1 創(chuàng)建圖表的步驟

通常，創(chuàng)建一個(gè) ECharts 圖表需要執(zhí)行如下步驟：

  1. 定義 DOM 節(jié)點(diǎn)作為圖表的容器；
  2. 調(diào)用 echarts.init 方法實(shí)例化 ECharts 對(duì)象；
  3. 調(diào)用 echartInstance.setOption 方法傳入圖表配置。

例如：

實(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>
		<!-- 第一步，設(shè)定圖表容器 DOM 節(jié)點(diǎn) -->
		<div id="main" style="width: 600px; height: 400px;"></div>

		<script src="//cdn.bootcss.com/echarts/4.5.0/echarts.js"></script>
		<script type="text/javascript">
			// 第二步，調(diào)用 init 函數(shù)初始化echarts對(duì)象
			const myChart = echarts.init(document.getElementById('main'));

			const option = {
				toolbox: { feature: { saveAsImage: {} } },
				xAxis: {
					type: 'category',
					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
				},
				yAxis: { type: 'value' },
				series: [
					{
						type: 'line',
						data: [820, 932, 901, 934, 1290, 1330, 1320],
					},
				],
			};
			// 第三步，調(diào)用 setOption 設(shè)定圖表配置
			myChart.setOption(option);
		</script>
	</body>
</html>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

示例效果：

圖片描述

2.1.1 定義容器

圖表容器通常使用 div 標(biāo)簽定義，調(diào)用 init 函數(shù)后 ECharts 會(huì)在節(jié)點(diǎn)中插入多個(gè) canvas 或 svg 標(biāo)簽，用以渲染圖表。容器節(jié)點(diǎn)必須具備初始寬高，常用如下形式定義：

<!-- 使用像素定義寬高 -->
<div id="main" style="width: 600px; height:450px"></div>
<!-- 也支持使用百分比定義寬高 -->
<div id="main" style="width: 100%; height:450px"></div>

提示：

ECharts 3 之后支持直接使用 canvas 元素作為容器，這樣繪制完圖表可以直接將 canvas 作為圖片應(yīng)用到其它地方，例如在 WebGL 中作為貼圖，這跟使用 echartsInstance.getDataURL 生成圖片鏈接相比可以支持圖表的實(shí)時(shí)刷新。

但缺點(diǎn)是無(wú)法根據(jù)組件的 z 屬性將組件分離渲染到不同的 canvas 上，所以有一定的性能損失。

2.1.2 echarts.init 接口

echarts.init 函數(shù)用于創(chuàng)建 ECharts 對(duì)象，不能在同一個(gè)容器上多次調(diào)用，函數(shù)簽名：

(dom: HTMLDivElement|HTMLCanvasElement, theme?: Object|string, opts?: {
    devicePixelRatio?: number
    renderer?: string
    width?: number|string
    height? number|string
}) => ECharts

函數(shù)參數(shù)：

  • dom: 指定容器節(jié)點(diǎn)，通常為 div 標(biāo)簽的 DOM 對(duì)象，例如上例中的 document.getElementById('main')；
  • theme: 圖表主題，支持傳入主題配置對(duì)象或主題名稱(chēng)。配置對(duì)象可參考 light 主題源碼；ECharts 默認(rèn)內(nèi)置 light、dark 兩種主題，用戶(hù)也可以通過(guò) echarts.registerTheme 接口注冊(cè)自定義主題；
  • opts: 附加參數(shù)，支持配置屬性：
{
	// 設(shè)備像素比，默認(rèn)取瀏覽器的值 `window.devicePixelRatio`
	devicePixelRatio: Number,
	// 渲染器，支持 canvas 或 svg
	renderer: String,
	// 可顯式指定實(shí)例寬度，單位為像素。如果傳入值為 null/undefined/'auto'，則取 dom（實(shí)例容器）的寬度。
	width: Number|String|null|undefined,
	// 可顯式指定實(shí)例高度，單位為像素。如果傳入值為 null/undefined/'auto'，則取 dom（實(shí)例容器）的高度。
	height: Number|String|null|undefined,
}

提示：

容器的寬高應(yīng)通過(guò)節(jié)點(diǎn)的樣式定義，盡量避免通過(guò) opts 屬性定義，這樣在調(diào)用 init 前后，作為容器的 DOM 的尺寸才能保持一致。

2.1.3 echartInstance.setOption 接口

實(shí)例化 ECharts 對(duì)象后，需調(diào)用 echartInstance.setOption 接口傳入圖表配置，接口簽名：

(option: Object, notMerge?: boolean, lazyUpdate?: boolean) => void
// 或
(option: Object, opts?: Object) => void

第一種形態(tài)的參數(shù)為：

  • option: 圖表實(shí)例配置；
  • notMerge: 可選，默認(rèn) false，用于設(shè)定是否與之前提供的配置合并；
  • lazyUpdate: 可選，默認(rèn) false，是否延遲更新。

第二種形態(tài)的 opts 參數(shù)接受如下對(duì)象：

{
	// 默認(rèn) `false`，用于設(shè)定是否與之前提供的配置合并
	notMerge: ...,
	// 默認(rèn) `false`，是否延遲更新
	lazyUpdate: ...,
	// 默認(rèn) `false`，指定圖表更新時(shí)是否觸發(fā)事件
	silent: ...
}

其中 option 對(duì)象是必不可少的，用于描述開(kāi)發(fā)者對(duì)圖表的各項(xiàng)需求，包括使用什么組件、有什么數(shù)據(jù)、使用什么圖表、圖表有哪些操作等等。

2.2 配置對(duì)象概述

ECharts 是配置驅(qū)動(dòng)的圖表框架，主要功能都以配置對(duì)象形式聲明，某種程度上可以說(shuō) ECharts 的應(yīng)用都是圍繞配置對(duì)象展開(kāi)的。配置對(duì)象結(jié)構(gòu)如下：

{
		title: object,
		legend: object,
		grid: object,
		xAxis: object,
		yAxis: object,
		polar: object,
		radiusAxis: object,
		angleAxis: object,
		radar: object,
		dataZoom: array,
		visualMap: array,
		tooltip: object,
		axisPointer: object,
		toolbox: object,
		brush: object,
		geo: object,
		parallel: object,
		parallelAxis: object,
		singleAxis: object,
		timeline: object,
		graphic: object,
		calendar: object,
		dataset: object,
		aria: object,
		series: array,
		color: array,
		backgroundColor: string,
		textStyle: object,
		animation: boolean,
		animationThreshold: number,
		animationDuration: number,
		animationEasing: string,
		animationDelay: number,
		animationDurationUpdate: number,
		animationEasingUpdate: string,
		animationDelayUpdate: number,
		blendMode: string,
		hoverLayerThreshold: number,
		useUTC: boolean,
}

ECharts 的使用方法絕大部分都圍繞著這些屬性展開(kāi)。根據(jù)配置作用，可以將上述屬性劃分為以下幾類(lèi)：

  1. 圖表配置，對(duì)應(yīng) series 項(xiàng)。該屬性接受一個(gè)數(shù)組值，每個(gè)數(shù)組項(xiàng)對(duì)應(yīng)一個(gè)圖表，數(shù)組項(xiàng)至少需要提供 type 屬性用于指定圖表類(lèi)型；
  2. 組件配置，包括 title、radar、toolbox 等項(xiàng)。ECharts 將圖表的常見(jiàn)的各項(xiàng)元素按功能組織為組件形式，組件與圖表通常是松耦合的，可以應(yīng)用到多個(gè)圖表上；
  3. 基礎(chǔ)配置，包括 textStyle、color、animation 等項(xiàng)。用以設(shè)定實(shí)例的基本運(yùn)行邏輯。

2.2.1 圖表配置

ECharts 的圖表由 series 數(shù)組指定。series 數(shù)組項(xiàng)接受對(duì)象形式，每個(gè)數(shù)組項(xiàng)對(duì)應(yīng)一個(gè)圖表，數(shù)組項(xiàng)通過(guò) type 聲明圖表類(lèi)型；通過(guò) data 數(shù)組聲明圖表數(shù)據(jù)序列。比如：

series: [
	{
		data: [820, 932, 901, 934, 1290, 1330, 1320],
		type: 'bar',
	},
	{
		data: [620, 1032, 401, 624, 690, 730, 1420],
		type: 'line',
	},
],

上述配置會(huì)渲染出一個(gè)柱形圖，一個(gè)折線圖，效果：

圖片描述

不同類(lèi)型圖表的配置結(jié)構(gòu)有較大區(qū)別，詳情請(qǐng)參考 官網(wǎng)

Tips:

圖表大致上可以分為以下幾類(lèi)：

  1. 直角坐標(biāo)系圖表，包括 line、bar、scatter、boxplot 等；
  2. 極坐標(biāo)系圖表，包括 line、bar、scatter；
  3. 日歷坐標(biāo)系圖表，支持 heatmap、scatter、graph；
  4. 地圖坐標(biāo)系圖表，包括 heatmap、scatter 等；
  5. 無(wú)坐標(biāo)系，不依賴(lài)于坐標(biāo)系環(huán)境的圖表，包括：funnel、pie、treemap、graph 等。

上例圖表依賴(lài)于坐標(biāo)系組件，必須同時(shí)提供圖表系列與坐標(biāo)系的定義才能正常運(yùn)行。對(duì)于這部分圖表，坐標(biāo)系相當(dāng)于一個(gè)容器，圖表的數(shù)據(jù)語(yǔ)義、渲染、邊界都由坐標(biāo)系控制。第 5 類(lèi)圖表則更加內(nèi)聚，不依賴(lài)于其他組件。

2.2.2 組件配置

ECharts 組件大致可分為：

  1. 坐標(biāo)系與坐標(biāo)軸組件，這類(lèi)組件直接參與到圖表定位、渲染過(guò)程中，包括 grid、xAxis、radar、calendar、polar 等；
  2. 信息增強(qiáng)組件，用以傳達(dá)關(guān)于圖表的更多信息，包括title、tooltip、axisPointer；
  3. 交互增強(qiáng)組件，為使用者提供改變圖表視圖的交互能力，包括 toolbox、legend、visualMap、dataZoom、brush、timeline。

Tips：
部分組件不能單獨(dú)使用，需要與關(guān)聯(lián)組件同時(shí)配置才能生效，比如 grid + xAxis + yAxis 組合用于配置直角坐標(biāo)系；polar + angleAxis + radiusAxis 組合用于配置極坐標(biāo)系。

2.2.3 基礎(chǔ)配置

許多配置項(xiàng)在設(shè)計(jì)上具有多級(jí)繼承的特性，方法是在組件、圖表的配置上設(shè)定相同的同名屬性。運(yùn)行時(shí)，ECharts 會(huì)沿著配置鏈路逐層向下 merge，比如 textStyle 屬性，在 title 配置項(xiàng)中有同名屬性 title.textStyle，在下例中：

const option = {
	textStyle: { color: '#fff', fontStyle: 'normal' },
	title: {
		textStyle: { color: '#eee' },
	},
};

最終作用在 title 上的 textStyle 值等于 merge(option.textStyle, option.title.textStyle)，結(jié)果為：

title.textStyle = {
	// 屬性值來(lái)自 option.title.textStyle.color
	color: '#eee',
	// 屬性值來(lái)自 option.textStyle.fontStyle
	fontStyle: 'normal',
};

Tips：
繼承能力能夠?qū)崿F(xiàn)配置項(xiàng)的復(fù)用，當(dāng)某些配置值能夠在多個(gè)組件、圖表上復(fù)用時(shí)，應(yīng)該提出來(lái)在更上層作為基礎(chǔ)配置，可有效減少冗余配置項(xiàng)。

3. 圖表的更新

3.1 配置更新

在實(shí)例運(yùn)行過(guò)程中可多次調(diào)用 setOption 接口，實(shí)現(xiàn)動(dòng)態(tài)更新圖表。接口能夠?qū)ο群筇峁┑亩鄠€(gè) option 參數(shù)做 merge 操作，達(dá)到增量更新的效果，例如上面示例中，首次提供的配置項(xiàng)為：

const option = {
	toolbox: { feature: { saveAsImage: {} } },
	xAxis: {
		type: 'category',
		data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
	},
	yAxis: { type: 'value' },
	series: [
		{
			type: 'line',
			data: [820, 932, 901, 934, 1290, 1330, 1320],
		},
	],
};

myChart.setOption(option);

后續(xù)更新時(shí)，只需要提供發(fā)生變動(dòng)的那一部分的配置項(xiàng)， setOption 會(huì)對(duì)前后配置對(duì)象做 merge 計(jì)算，例如：

const partialOption = {
	series: [{ data: [1280, 762, 901, 934, 1290, 1330, 1320] }],
};
myChart.setOption(partialOption);

// merge 后的結(jié)果：
{
	toolbox: { feature: { saveAsImage: {} } },
	xAxis: {
		type: 'category',
		data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
	},
	yAxis: { type: 'value' },
	series: [
		{
			type: 'line',
			// 原始配置
			// data: [820, 932, 901, 934, 1290, 1330, 1320],
			// merge 后的series數(shù)組
			data: [1280, 762, 901, 934, 1290, 1330, 1320]
		},
	],
}

Tips：
當(dāng) lazyUpdate 為 true 時(shí)，圖表不會(huì)立刻被更新渲染，ECharts 會(huì)等待下一幀發(fā)生時(shí)再?lài)L試執(zhí)行更新，幀的調(diào)度由 zepto 實(shí)現(xiàn)，底層依賴(lài) requestAnimationFrame 接口，詳情可參考 源碼。

merge 特性實(shí)現(xiàn)了形式上的部分更新，ECharts 底層執(zhí)行的實(shí)際上是清空?qǐng)D表之后重新渲染所有組件、圖表 —— 即使我們只是修改了配置上的一小部分。這種處理模型的背后是 ECharts 將配置對(duì)象視作原子對(duì)象，每次調(diào)用 setOption 接口都被認(rèn)為是一個(gè)全新的配置對(duì)象，不對(duì)之前的渲染結(jié)果做任何復(fù)用。ECharts 提供了另一個(gè)性能更佳，但功能受限的更新接口： appendData，詳情請(qǐng)參考下一節(jié)。

3.2 數(shù)據(jù)增量更新

echartInstance.appendData 接口用于向已有的數(shù)據(jù)序列追加更多數(shù)據(jù)項(xiàng)，接口調(diào)用后不會(huì)改變?nèi)魏我唁秩镜慕M件、圖表，只會(huì)在對(duì)應(yīng)圖表上追加數(shù)據(jù)圖案，性能更佳。appendData 接口簽名：

(opts: {
	// 要增加數(shù)據(jù)的系列序號(hào)。
	seriesIndex?: string,
	// 增加的數(shù)據(jù)。
	data?: Array | TypedArray,
}) => void;

Tips：
官網(wǎng)文檔 顯示的返回值是 string，但實(shí)測(cè)幾個(gè)版本都返回 undefined，不知是不是接口與文檔沒(méi)有同步更新好。

基礎(chǔ)示例：

實(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.js"></script>
		<script type="text/javascript">
			const myChart = echarts.init(document.getElementById('main'));
			let len = 0;
			const random = (min = 0, max = 180) => Math.round(Math.random() * (max - min) + min);
			const range = (from, to) => {
				const result = [];
				for (let i = from; i <= to; i++) {
					result.push(`X-${i}`);
				}
				return result;
			};

			const option = {
				// appendData 接口不會(huì)更改初始渲染后的任何組件
				// 所以需要預(yù)留足夠的空間來(lái)容納追加的圖案
				xAxis: { type: 'category', data: range(1, 20) },
				// 同樣的，在 y 軸上也需要設(shè)定好序列的最大值，以容納追加的圖案
				yAxis: { type: 'value', max: 180 },
				series: [
					{
						type: 'bar',
						data: [random(), random()],
					},
				],
			};
			myChart.setOption(option);

			setInterval(() => {
				myChart.appendData({ seriesIndex: 0, data: [random()] });
			}, 300);
		</script>
	</body>
</html>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

示例中調(diào)用 setInterval 不斷追加數(shù)據(jù)項(xiàng)，效果：

圖片描述

appendData 有一個(gè)很大的限制 —— 它不會(huì)改變?nèi)魏我呀?jīng)渲染好的圖形元素，比如上例在渲染追加圖表項(xiàng)時(shí)，即使坐標(biāo)軸預(yù)定的數(shù)值范圍無(wú)法容納新增的數(shù)據(jù)，ECharts 也不會(huì)對(duì)坐標(biāo)軸做任何變動(dòng)，因此在上述示例需要在 xAxis、yAxis 配置上預(yù)留足夠的空間來(lái)容納追加的數(shù)據(jù)。

Tips：
這個(gè)限制導(dǎo)致 appendData 接口對(duì)坐標(biāo)系圖表來(lái)說(shuō)特別雞肋，實(shí)用性低，甚至在官網(wǎng)提供的實(shí)例也很少見(jiàn)到 appendData 的用例。一個(gè)變通方法是混合使用 setOption 與 appendData，例如在直角坐標(biāo)系中，用額外的變量記錄當(dāng)前 x、y 軸的最大最小值，如果新增的數(shù)值超出這個(gè)范圍的時(shí)候就通過(guò) setOption 更新圖表；否則盡量使用 appendData。

appendData 在地圖散點(diǎn)圖上表現(xiàn)的很好，但其他場(chǎng)景上限制多功能弱，帶來(lái)的問(wèn)題多過(guò)便利，所以多數(shù)情況下都會(huì)退化為使用 setOption 接口維護(hù)數(shù)據(jù)狀態(tài)。

此外，appendData 還有如下限制：

  1. 只能應(yīng)用在少數(shù)圖表類(lèi)型上，目前支持： 散點(diǎn)圖(scatter)、線圖(line)、柱形圖(bar)；ECharts GL 版本的 散點(diǎn)圖(scatterGL)、線圖(linesGL) 和 可視化建筑群(polygons3D)。
  2. 不兼容 dataset，使用 appendData 時(shí)圖表的數(shù)據(jù)只能通過(guò) series.data 定義。

Tips：

除 setOption、 appendData 外，Echarts 沒(méi)有再提供其他維護(hù)數(shù)據(jù)內(nèi)容的接口，數(shù)據(jù)的刪除、插入、更改都沒(méi)有官方推薦的方法，需要開(kāi)發(fā)者自行處理。

3.3 寬度自適應(yīng)

ECharts 圖表不具備響應(yīng)式特性，初次渲染后不會(huì)因?yàn)槿萜鞒叽绲淖兓鲎赃m應(yīng)調(diào)節(jié)，需要用戶(hù)自行監(jiān)聽(tīng)屏幕尺寸的變化，并隨之調(diào)用 resize 函數(shù)，函數(shù)簽名：

(opts?: { width?: number | string, height?: number | string, silent?: boolean }) => ECharts;

參數(shù)：

  • width: 顯式指定實(shí)例寬度，單位為像素。如果傳入值為 null/undefined/'auto'，則表示自動(dòng)取 dom（實(shí)例容器）的寬度；
  • height: 顯式指定實(shí)例高度，單位為像素。如果傳入值為 null/undefined/'auto'，則表示自動(dòng)取 dom（實(shí)例容器）的高度；
  • silent: 是否禁止拋出事件。

為了實(shí)現(xiàn)圖表元素響應(yīng)屏幕尺寸的變化，通常可以加入如下代碼片段：

window.addEventListener('resize', myChart.resize);

增加上述代碼片段后，在 SPA 場(chǎng)景下，當(dāng)圖表隨頁(yè)面跳轉(zhuǎn)而析構(gòu)后務(wù)必移除對(duì)應(yīng)的事件監(jiān)聽(tīng)，否則 ECharts 實(shí)例對(duì)象會(huì)一直被事件系統(tǒng)保留引用，導(dǎo)致內(nèi)存泄漏！但是 ECharts 并沒(méi)有暴露示例的析構(gòu)事件，處理時(shí)機(jī)只能由開(kāi)發(fā)者自行把握，以 vue 為例，推薦的用法：

Vue.component('HelloWorld', {
	mounted() {
		this._ec = echarts.init(xxx);
		window.addEventListener('resize', this._ec.resize);
	},
	beforeDestroy() {
		window.removeEventListener('resize', this._ec.resize);
	},
});

4. 小結(jié)

圖片描述
本節(jié)主要講述 Echarts 圖表常規(guī)的創(chuàng)建、配置、動(dòng)態(tài)更新方法，這些是 Echarts 最常用的幾類(lèi)接口，大多數(shù)應(yīng)用都圍繞著他們展開(kāi)，讀者應(yīng)多加學(xué)習(xí)，為正式環(huán)境應(yīng)用打下堅(jiān)實(shí)基礎(chǔ)。