ECharts多圖表聯動功能的實現過程
阿新 • • 發佈：2021-06-17
當需要展示的資料比較多時，放在一個圖表進行展示的效果並不佳，此時，可以考慮使用兩個圖表進行聯動展示。
ECharts提供了多圖表聯動（connect）的功能，連線的多個圖表可以共享元件事件並實現儲存圖片時的自動拼接。多圖表聯動支援直角系下tooltip的聯動
實現EChart中的多圖表聯動，可以使用以下兩種方法。
（1）分別設定每個ECharts物件為相同的group值，並通過在呼叫ECharts物件的connect方法時，傳入group值，從而使用多個ECharts物件建立聯動關係，格式如下。
myChart1.group = 'group1'; //給第1個ECharts物件設定一個group值
myChart2.group = 'group1'; //給第2個ECharts物件設定一個相同的group值
echarts.connect('group1'); //呼叫ECharts物件的connect方法時，傳入group值
（2）直接呼叫ECharts的connect方法，引數為一個由多個需要聯動的ECharts物件所組成的陣列，格式如下。
echarts.connect([myChart1,myChart2]);
若想要解除已有的多圖表聯動，則可以呼叫disConnect方法，格式如下。
echarts.disConnect('group1');
利用某學院2019年和2020年的專業招生情況繪製柱狀圖聯動圖表，如圖所示。
由圖可知，共有上下兩個柱狀圖，分別表示2019、2020兩個年度的招生情況彙總。由於建立了多圖表聯動，所以當滑鼠滑過2019年或2020年的人工智慧專業柱體上時，系統會www.cppcns.com同時在2019年、2020年的人工智慧專業上自動彈出相應的詳情提示框（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個圖表的配置項和資料 color: ['LimeGreen','DarkGreen','red','blue','Purple'],backgroundColor: 'rgba(128,128,0.1)',//rgba設定透明度0.1 title: { text: '某學院2019年專業招生情況彙總表',left: 40,top: 5 },tooltip: { tooltip: { show: true },},legend: { data: ['2019年招生'],left: 422,top: 8 },xAxis: [{ data: ["大資料","雲端計算","Oracle","ERP","人工智慧","軟體開發","移動開發","網路技術"],axisLabel:{interval: 0} }],yAxis: [{ type: 'value',}],series: [{ //配置第1個圖表的資料系列 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個圖表的配置項和資料 color: ['blue','LimeGreen',//rgba設定透明度0.1 title: { text: '某學院2020年專業招生情況彙總表',tooltip: { show: true },legend: { data: ['2020年招生'],series: [{ //配置第2個圖表的資料系列 name: '2020年招生',//設定柱狀圖中每個柱子的寬度 data: [325,98,53,48,222,256,111],}] }; myChart1.setOption(option1); //為myChart1物件載入資料 myChart2.setOption(option2); //為myChart2物件載入資料 //多圖表聯動配置方法1：分別設定每個echarts物件的group值 myChart1.group = 'group1'; myChart2.group = 'group1'; echarts.connect('group1'); //多圖表聯動配置方法2：直接傳入需要聯動的echarts物件myChart1，myChart2 //echarts.connect([myChart1,myChart2]); </script> </body> </html>
利用某大學各專業2016－2020年的招生情況繪製餅圖與柱狀圖的聯動圖表，如圖所示。
由圖可知，上方的餅圖和下方的柱狀圖（柱狀圖也可以通過工具箱轉為折線圖）。當滑鼠滑過餅圖的某個扇區時，餅圖出現的詳情提示框顯示相應扇區所對應年份的招生人數及其所佔各年總招生人數的比例，同時柱狀圖（或折線圖）也會相應地出現詳情提示框，顯示對應年份各個專業的招生人數的詳細資料。
原始碼如下：
<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的配置項和資料
color: ['red','Lime','DarkOrchid','Navy'],//配置背景色，rgba設定透明度0.1
title: { text: '某大學各專業歷年招生情況分析',x: 'center',y: 12 },tooltip: { trigger: "item",formatter: "{a}<br/>{b}:{c}({d}%)" },legend: {
orient: 'vertical',x: 15,y: 15,data: ['2016','2017','2018','2019','2020']
},series: [{ //配置第1個圖表的資料系列
name: '總人數:',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); //使用指定的配置項和資料顯示餅圖
//基於準備好的dom，初始化ECharts圖表
var myChart2 = echarts.init(document.getElementById("main2"));
var option2 = { //指定第2個圖表的配置項和資料
color: ['red',//配置背景色，rgba設定透明度0.1
tooltip: { trigger: 'axis',axisPointer: { type: 'shadow' } },//配置提示框元件
legend: { //配置圖例元件
left: 42,top: 25,data: ['大資料','Oracle','雲端計算','人工智慧','軟體工程']
},toolbox: { //配置第2個圖表的工具箱元件
show: true,orient: 'vertical',left: 550,top: 'center',feature: {
mark: { show: true },restore: { show: true },saveAhttp://www.cppcns.comsImage: { show: true },magicType: { show: true,type: ['line','bar','stack','tiled'] }
}
},xAxis: [{
type: 'category','2020']
}],//配置第2個圖表的x軸坐http://www.cppcns.com標系
yAxis: [{ type: 'value',splitArea: { show: true } }],//配置第2個圖表的y軸座標系
series: [ //配置第2個圖表的資料系列
{
name: '大資料',stack: '總量',data: [301,334,390,330,320],barWidth: 45,CtYUl { name: 'Oracle',data: [101,134,90,230,210] },{ name: '雲端計算',data: [191,234,290,310] },{ name: '人工智慧',data: [201,154,190,410] },{ name: '軟體工程',data: [901,934,1290,1330,1320] }
]
};
myChart2.setOption(option2); //使用指定的配置項和資料顯示堆疊柱狀圖
//多圖表聯動配置方法1：分別設定每個echarts物件的group值
myChart1.group = 'group1';
myChart2.group = 'group1';
echarts.CtYUlconnect('group1');
//多圖表聯動配置方法2：直接傳入需要聯動的echarts物件myChart1，myChart2
//echarts.connect([myChart1,myChart2]);
</script>
</body>
</html>
總結
到此這篇關於ECharts多圖表聯動實現的文章就介紹到這了,更多相關ECharts多圖表聯動內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！