ECharts多圖表聯(lián)動功能的實現(xiàn)過程
當需要展示的數(shù)據(jù)比較多時，放在一個圖表進行展示的效果并不佳，此時，可以考慮使用兩個圖表進行聯(lián)動展示。
ECharts提供了多圖表聯(lián)動（connect）的功能，連接的多個圖表可以共享組件事件并實現(xiàn)保存圖片時的自動拼接。多圖表聯(lián)動支持直角系下tooltip的聯(lián)動
實現(xiàn)EChart中的多圖表聯(lián)動，可以使用以下兩種方法。
（1）分別設(shè)置每個ECharts對象為相同的group值，并通過在調(diào)用ECharts對象的connect方法時，傳入group值，從而使用多個ECharts對象建立聯(lián)動關(guān)系，格式如下。
myChart1.group = 'group1'; //給第1個ECharts對象設(shè)置一個group值
myChart2.group = 'group1'; //給第2個ECharts對象設(shè)置一個相同的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');
利用某學(xué)院2019年和2020年的專業(yè)招生情況繪制柱狀圖聯(lián)動圖表，如圖所示。
由圖可知，共有上下兩個柱狀圖，分別表示2019、2020兩個年度的招生情況匯總。由于建立了多圖表聯(lián)動，所以當鼠標滑過2019年或2020年的人工智能專業(yè)柱體上時，系統(tǒng)會同時在2019年、2020年的人工智能專業(yè)上自動彈出相應(yīng)的詳情提示框（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設(shè)置透明度0.1
title: { text: '某學(xué)院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)絡(luò)技術(shù)"],axisLabel:{interval: 0}
}],
yAxis: [{ type: 'value', }],
series: [{ //配置第1個圖表的數(shù)據(jù)系列
name: '2019年招生',
type: 'bar', barWidth: 40, //設(shè)置柱狀圖中每個柱子的寬度
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設(shè)置透明度0.1
title: { text: '某學(xué)院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)絡(luò)技術(shù)"],axisLabel:{interval: 0}
}],
yAxis: [{ type: 'value', }],
series: [{ //配置第2個圖表的數(shù)據(jù)系列
name: '2020年招生',
type: 'bar', barWidth: 40, //設(shè)置柱狀圖中每個柱子的寬度
data: [325, 98, 53, 48, 222, 256, 123, 111],
}]
};
myChart1.setOption(option1); //為myChart1對象加載數(shù)據(jù)
myChart2.setOption(option2); //為myChart2對象加載數(shù)據(jù)
//多圖表聯(lián)動配置方法1：分別設(shè)置每個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>
利用某大學(xué)各專業(yè)2016－2020年的招生情況繪制餅圖與柱狀圖的聯(lián)動圖表，如圖所示。
由圖可知，上方的餅圖和下方的柱狀圖（柱狀圖也可以通過工具箱轉(zhuǎn)為折線圖）。當鼠標滑過餅圖的某個扇區(qū)時，餅圖出現(xiàn)的詳情提示框顯示相應(yīng)扇區(qū)所對應(yīng)年份的招生人數(shù)及其所占各年總招生人數(shù)的比例，同時柱狀圖（或折線圖）也會相應(yīng)地出現(xiàn)詳情提示框，顯示對應(yīng)年份各個專業(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設(shè)置透明度0.1
title: { text: '某大學(xué)各專業(yè)歷年招生情況分析', x: 'center', y: 12 },
tooltip: { trigger: "item", formatter: "{a}<br/>:{c}(ublnpf9mb%)" },
legend: {
orient: 'vertical', x: 15, y: 15,
data: ['2016', '2017', '2018', '2019', '2020']
},
series: [{ //配置第1個圖表的數(shù)據(jù)系列
name: '總?cè)藬?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設(shè)置透明度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：分別設(shè)置每個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>
總結(jié)
到此這篇關(guān)于ECharts多圖表聯(lián)動實現(xiàn)的文章就介紹到這了,更多相關(guān)ECharts多圖表聯(lián)動內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文主要介紹了關(guān)于小程序網(wǎng)絡(luò)請求的封裝的相關(guān)資料。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04
淺析JavaScript中l(wèi)et與const命令的區(qū)別
這篇文章主要為大家詳細介紹了JavaScript中l(wèi)et命令與const命令的用法及區(qū)別,文中的示例代碼講解詳細,具有一定的借鑒價值,需要的可以參考下2023-09-09
Bootstrap零基礎(chǔ)學(xué)習第一課之模板
這篇文章主要為大家詳細介紹了Bootstrap零基礎(chǔ)學(xué)習第一課：模板，感興趣的小伙伴們可以參考一下2016-07-07
這篇文章主要介紹了js Calender控件使用詳解,需要的朋友可以參考下2015-01-01
如何解決日期函數(shù)new Date()瀏覽器兼容性問題
這篇文章主要介紹了如何解決日期函數(shù)new Date()瀏覽器兼容性問題,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值,需要的朋友可以參考下2019-09-09
微信小程序吸底區(qū)域適配iPhoneX的實現(xiàn)
這篇文章主要介紹了微信小程序吸底區(qū)域適配iPhoneX的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧2020-04-04
本文為大家介紹下使用js正則控制input標簽輸入的值：只允許輸入數(shù)字、只允許輸入漢字、只允許輸入英文字母等等，具體祥看本文，希望對大家有所幫助2013-07-07
javascript實現(xiàn)根據(jù)時間段顯示問候語的方法
這篇文章主要介紹了javascript實現(xiàn)根據(jù)時間段顯示問候語的方法,涉及javascript時間與字符串的相關(guān)操作技巧,需要的朋友可以參考下2015-06-06
uni-app微信小程序登錄并使用vuex存儲登錄狀態(tài)的思路詳解
這篇文章主要介紹了uni-app微信小程序登錄并使用vuex存儲登錄態(tài)的思路，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-11-11
event.X和event.clientX的區(qū)別分析
解釋一下event.X和event.clientX有什么區(qū)別？event.clientX返回事件發(fā)生時,mouse相對于客戶窗口的X坐標 event.X也一樣但是如果設(shè)置事件對象的定位屬性值為relative2011-10-10