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