這篇文章主要講解了“如何實現ECharts多圖表聯動功能”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“如何實現ECharts多圖表聯動功能”吧！
當需要展示的數據比較多時，放在一個圖表進行展示的效果并不佳，此時，可以考慮使用兩個圖表進行聯動展示。
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年的人工智能專業柱體上時，系統會同時在2019年、2020年的人工智能專業上自動彈出相應的詳情提示框（tooltip）。
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src='js/echarts.js'></script>
</head>
<body>
<div id="main1" ></div>
<div id="main2" ></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, 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', 'DarkGreen', 'red', 'Purple'],
backgroundColor: 'rgba(128, 128, 128, 0.1)', //rgba設置透明度0.1
title: { text: '某學院2020年專業招生情況匯總表', left: 40, top: 8 },
tooltip: { show: true },
legend: { data: ['2020年招生'], left: 422, top: 8 },
xAxis: [{
data: ["大數據", "云計算", "Oracle", "ERP", "人工智能",
"軟件開發", "移動開發", "網絡技術"],axisLabel:{interval: 0}
}],
yAxis: [{ type: 'value', }],
series: [{ //配置第2個圖表的數據系列
name: '2020年招生',
type: 'bar', barWidth: 40, //設置柱狀圖中每個柱子的寬度
data: [325, 98, 53, 48, 222, 256, 123, 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" ></div>
<div id="main2" ></div>
<script type="text/javascript">
//基于準備好的dom，初始化ECharts圖表
var myChart1 = echarts.init(document.getElementById("main1"));
var option1 = { //指定第1個圖表option1的配置項和數據
color: ['red', 'Lime', 'blue', 'DarkGreen', 'DarkOrchid', 'Navy'],
backgroundColor: 'rgba(128, 128, 128, 0.1)', //配置背景色，rgba設置透明度0.1
title: { text: '某大學各專業歷年招生情況分析', x: 'center', y: 12 },
tooltip: { trigger: "item", formatter: "{a}<br/>:{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', '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: ['大數據', '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個圖表的數據系列
{
name: '大數據', 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); //使用指定的配置項和數據顯示堆疊柱狀圖
//多圖表聯動配置方法1：分別設置每個echarts對象的group值
myChart1.group = 'group1';
myChart2.group = 'group1';
echarts.connect('group1');
//多圖表聯動配置方法2：直接傳入需要聯動的echarts對象myChart1，myChart2
//echarts.connect([myChart1,myChart2]);
</script>
</body>
</html>感謝各位的閱讀，以上就是“如何實現ECharts多圖表聯動功能”的內容了，經過本文的學習后，相信大家對如何實現ECharts多圖表聯動功能這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
