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

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

ECharts 工具欄

通過前面的學習，我們發現我們可以創建一個幾乎完美的圖表，但是做到如此 ECharts 還是覺得遠遠不夠，他認為一個好的圖表不僅要能完美的展示數據，還應該有一些附加的功能幫助用戶更好的更方便的完成一些其他的事情，比如：導出圖片，動態切換圖表類型等等。這些功能在 ECharts 的工具欄組件都能完成，讓我們看一下吧。

1. 簡介

ECharts 的工具欄組件在主要的圖表功能之外，為用戶提供了圖片導出、數據視圖切換、圖表類型切換、數據區域縮放、還原、數據框選六類功能按鈕。

2. 配置方法

工具欄組件可通過 toolbox 屬性進行配置，形如：

const options = {
	toolbox: {
		show: true,
		feature: {},
		...
	}
};

完整的配置項列表請參考 官網，其中 feature 用于配置工具欄的功能按鈕，支持如下子屬性：

  • feature.saveAsImage: “圖片導出”功能配置，特別的可通過該項設定導出圖片的格式、分辨率、需要忽略的組件等；
  • feature.store: “還原”功能配置，可通過該項設定工具按鈕視覺效果；
  • feature.dataView: “數據視圖切換”功能配置，特別的可通過該項定義從數據視圖到配置項，或從配置項到數據視圖的轉換函數；
  • feature.dataZoom: “數據區域縮放”功能配置，特別的可通過該項設定數據縮放時的過濾效果；
  • feature.magicType: “圖表類型切換”功能配置，特別的可通過該項設定支持切換的類型、切換時附加的配置項等；
  • feature.brush: “數據框選”功能配置，可用于設定按鈕視覺效果。

下面展開討論。

3. 導出圖片

工具欄組件的“圖片導出”按鈕可將圖表導出為靜態圖片，支持 jpeg、png、svg 三種格式，可通過 toolbox.feature.saveAsImage 項進行配置，其中比較重要的配置項有：

  • type：用于設定導出圖片的格式，當 renderer = canvas 時，支持 jpeg、png，默認為 png；當 renderer = svg 時僅支持 svg 格式；
  • name：導出的文件名，默認為配置項中的 title.text 值；
  • excludeComponents：導出時需要忽略的組件列表，默認值為 [‘toolbox’]；
  • pixelRatio：導出圖片的分辨率。

例如對于下述配置：

實例演示
預覽 復制
復制成功！
<!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'));

			const option = {
				toolbox: {
					feature: { saveAsImage: { pixelRatio: 1, type: 'jpeg', excludeComponents: ['legend'] } },
				},
				legend: {
					data: ['預算', '實際開銷'],
					left: 0,
				},
				radar: {
					indicator: [
						{ name: '銷售', max: 6500 },
						{ name: '管理', max: 16000 },
						{ name: '信息技術', max: 30000 },
						{ name: '客服', max: 38000 },
						{ name: '研發', max: 52000 },
						{ name: '市場', max: 25000 },
					],
				},
				series: [
					{
						type: 'radar',
						data: [
							{
								value: [4300, 10000, 28000, 35000, 50000, 19000],
								name: '預算',
							},
							{
								value: [5000, 14000, 28000, 31000, 42000, 21000],
								name: '實際開銷',
							},
						],
					},
				],
			};
			myChart.setOption(option);
		</script>
	</body>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

導出效果：

圖片描述

Tips：
pixelRatio 定義導出圖片的縮放比例，例如上例中圖表容器的寬高為 style="width: 600px; height: 400px;"，若 pixelRatio = 1 則導出圖片分辨率為 600x400；若pixelRatio = 2 則為 1200x800；若 pixelRatio = 0.5 則為 300x200。下限為 0，當數值超過 35 時，導出圖片可能為空。

除工具欄按鈕外，開發者還可以通過 echartsInstance.getDataURL 接口將圖表內容導出為 base64 串，該接口接受如下參數：

(opts: {
	// 導出的格式，可選 png, jpeg, svg
	type?: string,
	// 導出的圖片分辨率比例，默認為 1。
	pixelRatio?: number,
	// 導出的圖片背景色，默認使用 option 里的 backgroundColor
	backgroundColor?: string,
	// 忽略組件的列表
	excludeComponents?: Array<string>,
}) => string;

結合 getDataURL 接口，下述代碼片段同樣可實現導出為本地圖片文件功能：

function saveAsImg(chart) {
	const img = chart.getDataURL({
		backgroundColor: '#fff',
		excludeComponents: ['legend'],
		pixelRatio: 1,
	});
	const anchor = document.createElement('a');
	anchor.href = img;
	anchor.setAttribute('download', 'test.jpeg');
	anchor.click();
}

導出效果：

圖片描述

導出功能對 bmap 插件失效，無法導出百度地圖層。

4. 數據視圖

數據視圖工具用于修改數據視圖，通過 toolbox.feature.dataView 項配置，點擊后可以以表格形式展示圖表中包含的數據信息；表格本身還支持簡單編輯功能，編輯后會即時更新圖表視圖。例如：

實例演示
預覽 復制
復制成功！
<!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'));

			const option = {
				toolbox: {
					feature: {
						// 提供 dataView 空對象即可啟動 dataView 功能
						dataView: {},
					},
				},
				radar: {
					indicator: [
						{ name: '銷售', max: 6500 },
						{ name: '管理', max: 16000 },
						{ name: '信息技術', max: 30000 },
						{ name: '客服', max: 38000 },
						{ name: '研發', max: 52000 },
						{ name: '市場', max: 25000 },
					],
				},
				series: [
					{
						type: 'radar',
						data: [
							{
								value: [4300, 10000, 28000, 35000, 50000, 19000],
								name: '預算',
							},
							{
								value: [5000, 14000, 28000, 31000, 42000, 21000],
								name: '實際開銷',
							},
						],
					},
				],
			};
			myChart.setOption(option);
		</script>
	</body>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

示例效果：

圖片描述

toolbox.feature.dataView 有兩個比較重要的配置項：

  • optionToContent: 自定義數據視圖函數，可以通過該選項配置更豐富的展示方法，函數簽名： (option:Object) => HTMLDomElement|string；
  • contentToOption: 用于定義如何將數據視圖結果轉換為圖表配置項。

通過這兩個函數，可以做出許多復雜絢麗的效果，例如使用 react 渲染數據視圖：

實例演示
預覽 復制
復制成功！
<!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>
		<div id="dataview">hello world</div>

		<script src="//cdn.bootcss.com/echarts/4.5.0/echarts.js"></script>
		<script crossorigin src="//unpkg.com/react@16/umd/react.production.min.js"></script>
		<script crossorigin src="//unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
		<script type="text/javascript">
			const myChart = echarts.init(document.getElementById('main'));
			// 使用react組件形式編寫的數據視圖
			function DataView(props) {
				const rows = props.series;
				return React.createElement(
					'table',
					{
						className: 'table',
					},
					rows.map(function (row) {
						return React.createElement(
							'tr',
							null,
							React.createElement('td', null, row.name),
							row.value.map(function (cell) {
								return React.createElement('td', null, cell);
							})
						);
					})
				);
			}

			const option = {
				toolbox: {
					feature: {
						dataView: {
							optionToContent(opt) {
								const {
									series: [{ data }],
								} = opt;
								// 動態創建一個容器節點
								const root = document.createElement('div');
								// 需要先將react組件渲染到容器節點上
								ReactDOM.render(React.createElement(DataView, { series: data }), root);
								return root;
							},
						},
					},
				},
				radar: {
					indicator: [
						{ name: '銷售', max: 6500 },
						{ name: '管理', max: 16000 },
						{ name: '信息技術', max: 30000 },
						{ name: '客服', max: 38000 },
						{ name: '研發', max: 52000 },
						{ name: '市場', max: 25000 },
					],
				},
				series: [
					{
						type: 'radar',
						data: [
							{
								value: [4300, 10000, 28000, 35000, 50000, 19000],
								name: '預算',
							},
							{
								value: [5000, 14000, 28000, 31000, 42000, 21000],
								name: '實際開銷',
							},
						],
					},
				],
			};
			myChart.setOption(option);
		</script>
	</body>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

Tips：

  1. 若 optionToContent 返回的是頁面中已經存在 DOM 元素時，ECharts 會將該元素剪切到數據視圖中，這以為著原來位置會丟失這部分 DOM！例如對于 optionToContent: document.getElementById('dataview')，一旦執行數據視圖功能，原來位置上的 dataview 元素將會被刪除。
  2. 數據視圖工具只對使用 series.data 配置數據的方式有效，不能應用在 dataset 上。

5. 動態類型切換

圖表類型切換工具允許用戶在運行狀態下動態變更圖表類型，目前支持在 line、bar 兩種圖表間切換；以及在 stack(堆疊)、tiled(平鋪) 兩種狀態間切換。動態類型工具可通過 toolbox.feature.magicType 項進行配置，核心配置項有：

  1. type：允許切換的類型列表，支持 line、bar、stack、tiled 四個關鍵字，其中 stack 用于在折線圖或柱狀圖上附加堆疊效果；tiled 用于取消堆疊效果，兩者互斥；
  2. option：各個類型的專有配置項。在切換到某類型的時候會合并相應的配置項；
  3. seriesIndex：各個類型對應的系列列表。

下面示例綜合體現上述配置項的用法：

實例演示
預覽 復制
復制成功！
<!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'));

			const option = {
				toolbox: {
					feature: {
						magicType: {
							type: ['line', 'bar', 'stack', 'tiled'],
							option: {
								// 類型切換時，下述配置項將被merge到對應類型的圖表 series 中
								line: { smooth: true },
								bar: { label: { show: true } },
								stack: { label: { show: true, color: 'red' } },
							},
							seriesIndex: {
								line: [0],
							},
						},
					},
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
				},
				yAxis: {
					type: 'value',
					axisLabel: {
						formatter: '{value} °C',
					},
				},
				series: [
					{
						name: '最高氣溫',
						type: 'line',
						data: [11, 11, 15, 13, 12, 13, 10],
					},
					{
						name: '最低氣溫',
						type: 'line',
						data: [1, -2, 2, 5, 3, 2, 0],
					},
				],
			};
			myChart.setOption(option);
		</script>
	</body>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

示例效果：

圖片描述

Tips：
類型切換功能可能會帶入一些副作用，例如上例中從 bar 切換到 line 時，第一個序列的顏色發生了變化。

6. 數據區域縮放

縮放工具基于 datazoom 組件實現，配置上有兩個重點，一是通過 xAxisIndex 或 yAxisIndex 指定縮放工具作用的軸；二是通過 filterMode 設定數值的過濾邏輯。兩類配置的詳細介紹可參考 datazoom 一節，此處不再贅述。

7. 重置

用戶通過數據視圖工具或數據區域縮放工具修改圖表狀態后，可使用重置按鈕設置回初始狀態。重置功能的配置屬性比較簡單，均用于修改圖標樣式，請直接查閱官網，此處不贅述。

Tips：
重置功能有很多限制：

  1. 只適用于通過數據視圖工具、數據區域縮放工具兩類操作造成的影響，其他更新操作，如 appendData、setOption 接口觸發的變更都不在此列。
  2. 沒有歷史堆棧功能，執行重置后只會回到初始狀態。例如，如果多次使用數據視圖工具修改數據值，雖然按理說已經產生了多個中間態，但一旦重置，只能回到最開始傳入的配置狀態。

8. 小結

圖片描述
本節結合多個實例，講述 Echarts 工具欄組件(toolbox)的各類應用方法，包括導出圖片、數據視頻、圖表類型切換、區域縮放、重置等功能項的用法及注意事項。