ECharts多圖表聯(lián)動功能的實現(xiàn)過程

更新時間：2021年06月15日 14:28:48 作者：凌洪濤

echarts是非常好用的圖表插件,下面這篇文章主要給大家介紹了關于ECharts多圖表聯(lián)動功能的相關資料,需要的朋友可以參考下

當需要展示的數(shù)據(jù)比較多時，放在一個圖表進行展示的效果并不佳，此時，可以考慮使用兩個圖表進行聯(lián)動展示。

ECharts提供了多圖表聯(lián)動（connect）的功能，連接的多個圖表可以共享組件事件并實現(xiàn)保存圖片時的自動拼接。多圖表聯(lián)動支持直角系下tooltip的聯(lián)動

實現(xiàn)EChart中的多圖表聯(lián)動，可以使用以下兩種方法。

（1）分別設置每個ECharts對象為相同的group值，并通過在調(diào)用ECharts對象的connect方法時，傳入group值，從而使用多個ECharts對象建立聯(lián)動關系，格式如下。

myChart1.group = 'group1'; //給第1個ECharts對象設置一個group值
myChart2.group = 'group1'; //給第2個ECharts對象設置一個相同的group值
echarts.connect('group1'); //調(diào)用ECharts對象的connect方法時，傳入group值

（2）直接調(diào)用ECharts的connect方法，參數(shù)為一個由多個需要聯(lián)動的ECharts對象所組成的數(shù)組，格式如下。

echarts.connect([myChart1,myChart2]);

若想要解除已有的多圖表聯(lián)動，則可以調(diào)用disConnect方法，格式如下。

echarts.disConnect('group1');

利用某學院2019年和2020年的專業(yè)招生情況繪制柱狀圖聯(lián)動圖表，如圖所示。

由圖可知，共有上下兩個柱狀圖，分別表示2019、2020兩個年度的招生情況匯總。由于建立了多圖表聯(lián)動，所以當鼠標滑過2019年或2020年的人工智能專業(yè)柱體上時，系統(tǒng)會同時在2019年、2020年的人工智能專業(yè)上自動彈出相應的詳情提示框（tooltip）。

<html>

<head>
	<meta charset="utf-8">
	<script type="text/javascript" src='js/echarts.js'></script>
</head>

<body>
	<div id="main1" style="width: 600px; height:400px"></div>
	<div id="main2" style="width: 600px; height:400px"></div>
	<script type="text/javascript">
		//基于準備好的dom，初始化ECharts圖表
		var myChart1 = echarts.init(document.getElementById("main1"));
		var option1 = {  //指定第1個圖表的配置項和數(shù)據(jù)
			color: ['LimeGreen', 'DarkGreen', 'red', 'blue', 'Purple'],
			backgroundColor: 'rgba(128, 128, 128, 0.1)',  //rgba設置透明度0.1
			title: { text: '某學院2019年專業(yè)招生情況匯總表', left: 40, top: 5 },
			tooltip: { tooltip: { show: true }, },
			legend: { data: ['2019年招生'], left: 422, top: 8 },
			xAxis: [{
				data: ["大數(shù)據(jù)", "云計算", "Oracle", "ERP", "人工智能",
					"軟件開發(fā)", "移動開發(fā)", "網(wǎng)絡技術"],axisLabel:{interval: 0}
			}],
			yAxis: [{ type: 'value', }],
			series: [{  //配置第1個圖表的數(shù)據(jù)系列
				name: '2019年招生',
				type: 'bar', barWidth: 40,  //設置柱狀圖中每個柱子的寬度
				data: [125, 62, 45, 56, 123, 205, 108, 128],
			}]
		};
		//基于準備好的dom,初始化ECharts圖表
		var myChart2 = echarts.init(document.getElementById("main2"));
		var option2 = {  //指定第2個圖表的配置項和數(shù)據(jù)
			color: ['blue', 'LimeGreen', 'DarkGreen', 'red', 'Purple'],
			backgroundColor: 'rgba(128, 128, 128, 0.1)',  //rgba設置透明度0.1
			title: { text: '某學院2020年專業(yè)招生情況匯總表', left: 40, top: 8 },
			tooltip: { show: true },
			legend: { data: ['2020年招生'], left: 422, top: 8 },
			xAxis: [{
				data: ["大數(shù)據(jù)", "云計算", "Oracle", "ERP", "人工智能",
					"軟件開發(fā)", "移動開發(fā)", "網(wǎng)絡技術"],axisLabel:{interval: 0}
			}],
			yAxis: [{ type: 'value', }],
			series: [{  //配置第2個圖表的數(shù)據(jù)系列
				name: '2020年招生',
				type: 'bar', barWidth: 40,  //設置柱狀圖中每個柱子的寬度
				data: [325, 98, 53, 48, 222, 256, 123, 111],
			}]
		};
		myChart1.setOption(option1);  //為myChart1對象加載數(shù)據(jù)
		myChart2.setOption(option2);  //為myChart2對象加載數(shù)據(jù)
		//多圖表聯(lián)動配置方法1：分別設置每個echarts對象的group值
		myChart1.group = 'group1';
		myChart2.group = 'group1';
		echarts.connect('group1');
	//多圖表聯(lián)動配置方法2：直接傳入需要聯(lián)動的echarts對象myChart1，myChart2
	//echarts.connect([myChart1,myChart2]);
	</script>
</body>

</html>

利用某大學各專業(yè)2016－2020年的招生情況繪制餅圖與柱狀圖的聯(lián)動圖表，如圖所示。

由圖可知，上方的餅圖和下方的柱狀圖（柱狀圖也可以通過工具箱轉為折線圖）。當鼠標滑過餅圖的某個扇區(qū)時，餅圖出現(xiàn)的詳情提示框顯示相應扇區(qū)所對應年份的招生人數(shù)及其所占各年總招生人數(shù)的比例，同時柱狀圖（或折線圖）也會相應地出現(xiàn)詳情提示框，顯示對應年份各個專業(yè)的招生人數(shù)的詳細數(shù)據(jù)。

源代碼如下：

<html>

<head>
	<meta charset="utf-8">
	<script type="text/javascript" src='js/echarts.js'></script>
</head>

<body>
	<div id="main1" style="width: 600px; height:400px"></div>
	<div id="main2" style="width: 600px; height:400px"></div>
	<script type="text/javascript">
		//基于準備好的dom，初始化ECharts圖表
		var myChart1 = echarts.init(document.getElementById("main1"));
		var option1 = {  //指定第1個圖表option1的配置項和數(shù)據(jù)
			color: ['red', 'Lime', 'blue', 'DarkGreen', 'DarkOrchid', 'Navy'],
			backgroundColor: 'rgba(128, 128, 128, 0.1)',  //配置背景色，rgba設置透明度0.1
			title: { text: '某大學各專業(yè)歷年招生情況分析', x: 'center', y: 12 },
			tooltip: { trigger: "item", formatter: "{a}<br/>:{c}(vrznzvz%)" },
			legend: {
				orient: 'vertical', x: 15, y: 15,
				data: ['2016', '2017', '2018', '2019', '2020']
			},
			series: [{  //配置第1個圖表的數(shù)據(jù)系列
				name: '總人數(shù):', type: 'pie',
				radius: '70%', center: ['50%', 190],
				data: [
					{ value: 1695, name: '2016' }, { value: 1790, name: '2017' },
					{ value: 2250, name: '2018' }, { value: 2550, name: '2019' },
					{ value: 2570, name: '2020' }]
			}]
		};
		myChart1.setOption(option1);  //使用指定的配置項和數(shù)據(jù)顯示餅圖
		//基于準備好的dom，初始化ECharts圖表
		var myChart2 = echarts.init(document.getElementById("main2"));
		var option2 = {  //指定第2個圖表的配置項和數(shù)據(jù)
			color: ['red', 'Lime', 'blue', 'DarkGreen', 'DarkOrchid', 'Navy'],
			backgroundColor: 'rgba(128, 128, 128, 0.1)',  //配置背景色，rgba設置透明度0.1
			tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },  //配置提示框組件
			legend: {  //配置圖例組件
				left: 42, top: 25,
				data: ['大數(shù)據(jù)', 'Oracle', '云計算', '人工智能', '軟件工程']
			},
			toolbox: {  //配置第2個圖表的工具箱組件
				show: true, orient: 'vertical', left: 550, top: 'center',
				feature: {
					mark: { show: true }, restore: { show: true }, saveAsImage: { show: true },
					magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] }
				}
			},
			xAxis: [{
				type: 'category',
				data: ['2016', '2017', '2018', '2019', '2020']
			}],  //配置第2個圖表的x軸坐標系
			yAxis: [{ type: 'value', splitArea: { show: true } }],  //配置第2個圖表的y軸坐標系
			series: [  //配置第2個圖表的數(shù)據(jù)系列
				{
					name: '大數(shù)據(jù)', type: 'bar', stack: '總量',
					data: [301, 334, 390, 330, 320], barWidth: 45,
				},
				{ name: 'Oracle', type: 'bar', stack: '總量', data: [101, 134, 90, 230, 210] },
				{ name: '云計算', type: 'bar', stack: '總量', data: [191, 234, 290, 330, 310] },
				{ name: '人工智能', type: 'bar', stack: '總量', data: [201, 154, 190, 330, 410] },
				{ name: '軟件工程', type: 'bar', stack: '總量', data: [901, 934, 1290, 1330, 1320] }
			]
		};
		myChart2.setOption(option2);  //使用指定的配置項和數(shù)據(jù)顯示堆疊柱狀圖
		//多圖表聯(lián)動配置方法1：分別設置每個echarts對象的group值
		myChart1.group = 'group1';
		myChart2.group = 'group1';
		echarts.connect('group1');
 	    //多圖表聯(lián)動配置方法2：直接傳入需要聯(lián)動的echarts對象myChart1，myChart2
	    //echarts.connect([myChart1,myChart2]);
	</script>
</body>

</html>

總結

到此這篇關于ECharts多圖表聯(lián)動實現(xiàn)的文章就介紹到這了,更多相關ECharts多圖表聯(lián)動內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

js 對象是否存在判斷
js 對象是否存在，然后進行下一步的操作。
2009-07-07
js刪除對象中的某一個字段的方法實現(xiàn)
這篇文章主要介紹了js刪除對象中的某一個字段的方法實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2021-01-01
JS+CSS實現(xiàn)的簡單折疊展開多級菜單效果
這篇文章主要介紹了JS+CSS實現(xiàn)的簡單折疊展開多級菜單效果,涉及JavaScript頁面元素的遍歷及動態(tài)操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-09-09
JS利用cookies設置每隔24小時彈出框
這篇文章主要介紹了利用cookies設置每隔24小時彈出框的實例代碼,需要的朋友可以參考下
2017-04-04
JS?if?else語句(條件判斷語句)的詳細使用
條件語句用于基于不同的條件來執(zhí)行不同的動作,下面這篇文章主要給大家介紹了關于JS?if?else語句(條件判斷語句)的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-09-09
mui框架移動開發(fā)初體驗詳解
本篇文章主要介紹了mui框架移動開發(fā)初體驗詳解小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-10-10
JS寫的數(shù)字拼圖小游戲代碼[學習參考]
昨天沒事做，就用JS寫了個數(shù)字拼圖的小游戲，自娛自樂。可惜關于逆序數(shù)的問題還沒解決，現(xiàn)在有時是拼不成的，大家見諒了。
2008-10-10
SSM+layUI 根據(jù)登錄信息顯示不同的頁面方法
今天小編就為大家分享一篇SSM+layUI 根據(jù)登錄信息顯示不同的頁面方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
JS實現(xiàn)導出Excel的五種方法詳解【附源碼下載】
這篇文章主要介紹了JS實現(xiàn)導出Excel的五種方法,結合實例形式較為詳細的分析了基于table表格導出Excel文件的相關操作技巧,并附源碼供讀者下載參考,需要的朋友可以參考下
2018-03-03
原生js實現(xiàn)可兼容PC和移動端的拖動滑塊功能詳解【測試可用】
這篇文章主要介紹了原生js實現(xiàn)可兼容PC和移動端的拖動滑塊功能,結合實例形式詳細分析了javascript事件響應及頁面元素屬性動態(tài)操作實現(xiàn)滑塊拖動功能的相關操作技巧,需要的朋友可以參考下
2019-08-08