Echarts實(shí)現(xiàn)圖表聯(lián)動(dòng)（多圖聯(lián)動(dòng)、圖表間聯(lián)動(dòng)）
一、背景
Echarts.js目前已經(jīng)提供了connect功能，只要圖標(biāo)的legend一樣，那么就能實(shí)現(xiàn)聯(lián)動(dòng)。
下面兩個(gè)鏈接是介紹Echarts connect的用法的。
ECharts 聯(lián)動(dòng)效果
官方文檔中connect的使用方法
二、原始例子
通過重新繪制
官方文檔提供的案列
在這個(gè)樣例中，隨著鼠標(biāo)在坐標(biāo)軸上的移動(dòng)，餅圖會(huì)不斷的變化，其關(guān)鍵在于這一段代碼。
myChart.on('updateAxisPointer', function (event) {
var xAxisInfo = event.axesInfo[0];
if (xAxisInfo) {
var dimension = xAxisInfo.value + 1;
myChart.setOption({
series: {
id: 'pie',
label: {
formatter: ': {@[' + dimension + ']} (opkdopnojk%)'
},
encode: {
value: dimension,
tooltip: dimension
}
}
});
}
});
本質(zhì)上是通過鼠標(biāo)事件，不斷獲取xAxisInfo，然后根據(jù)獲取到的xAxisInfo.value(dimension)重新繪制餅圖。這個(gè)可視化過程中數(shù)據(jù)是以數(shù)據(jù)集形式呈現(xiàn)的，所以用的encode，具體介紹可以在如何使用 dataset 管理數(shù)據(jù)看到。
如果要看event都有什么，通過console.log(event)即可獲取,比如一道第一個(gè)橫軸坐標(biāo)2012時(shí)，輸出內(nèi)容如下，其value為0.
通過事件
Echarts實(shí)踐介紹
輪流高亮例子
其關(guān)鍵在于
myEcart.dispatchAction({
type:'highlight',
seriesIndex:0,
dataIndex:app.currentIndex
});
Echarts的action還有很多，在echarts官網(wǎng)的API中可以輸入action進(jìn)行檢索。
之所以可以使用這個(gè)實(shí)現(xiàn)多圖的聯(lián)動(dòng)，實(shí)質(zhì)是一個(gè)圖上發(fā)生鼠標(biāo)移動(dòng)事件后，調(diào)用另一個(gè)圖，使其產(chǎn)生動(dòng)作。比如myechart1和myechart2，如果獲取到了myechart1的params信息，通過這些信息可以對(duì)應(yīng)到myechart2的dataIndex、SeriesIndex，那么，就可以使用這樣的形式實(shí)現(xiàn)聯(lián)動(dòng)。
三、 實(shí)現(xiàn)方法
記住這兩個(gè)東西就好
myEchart.setOption \\ 重新繪制
myEchart.dispatchAction \\echarts action
四、 具體例子
以下是一個(gè)對(duì)原始例子進(jìn)行的一些改進(jìn)之后的效果圖：
全部源碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 為ECharts準(zhǔn)備一個(gè)具備大?。▽捀撸┑腄om -->
<div id="main" style="width: 900px;height:600px;"></div>
<script type="text/javascript">
// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項(xiàng)和數(shù)據(jù)
var option = {
legend: {},
tooltip: {
//trigger: 'axis',
showContent: false,
},
dataset: {
source: [
['product', '2012', '2013', '2014', '2015', '2016', '2017'],
['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1]
]
},
xAxis: {type: 'category',
triggerEvent: true,
//axisPointer: {show:true}
},
yAxis: {gridIndex: 0},
grid: {top: '55%'},
series: [
{type: 'line', smooth: true, seriesLayoutBy: 'row', symbolSize: 10},
{type: 'line', smooth: true, seriesLayoutBy: 'row', symbolSize: 10},
{type: 'line', smooth: true, seriesLayoutBy: 'row', symbolSize: 10},
{type: 'line', smooth: true, seriesLayoutBy: 'row', symbolSize: 10},
{
type: 'pie',
id: 'pie',
radius: '30%',
center: ['50%', '25%'],
label: {
formatter: ': {@[2012]} (opkdopnojk%)'
},
encode: {
itemName: 'product',
value: '2012',
tooltip: '2012'
}
}
]
};
setTimeout(function () {
myChart.on('mouseover',function(params){
if(params.componentType == "xAxis"){
var xAxisInfo = params.value;
myChart.setOption({
series: {
id: 'pie',
label: {
formatter: ': {@[' + xAxisInfo + ']} (opkdopnojk%)'
},
encode: {
value: xAxisInfo,
tooltip: xAxisInfo
}
}
});
}
if(params.componentType == "series" && params.seriesType == 'line'){
var xAxisInfo = params.value[0];
myChart.setOption({
series: {
id: 'pie',
label: {
formatter: ': {@[' + xAxisInfo + ']} (opkdopnojk%)'
},
encode: {
value: xAxisInfo,
tooltip: xAxisInfo
}
}
});
}
setTimeout(function(){
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 4,
dataIndex: params.seriesIndex
});
},300);
});
myChart.on('mouseout',function(params){
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 4,
dataIndex: params.seriesIndex
});
});
},0);
// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>
那兩個(gè)if主要是用于獲取信息，如果不是兩個(gè)圖畫在同一個(gè)myEchart里其實(shí)沒有那么麻煩，實(shí)際上可以忽略不看。鼠標(biāo)移動(dòng)到某一和線圖的點(diǎn)的時(shí)候，并圖中對(duì)應(yīng)的塊將會(huì)高亮。
實(shí)現(xiàn)的關(guān)鍵在于通過鼠標(biāo)事件，獲取到了params的相關(guān)信息，通過
myChart.dispatchAction({
type:'highlight',
seriesIndex:'4',
dataIndex:params.seriesIndex
});
實(shí)現(xiàn)餅圖部分的高亮。這個(gè)例子中兩個(gè)圖是在同一個(gè)myechart中，如果我們畫在兩個(gè)不同的圖像中如何實(shí)現(xiàn)高亮呢？
簡化來寫就是這樣
myChart1.on('mouseover',function(params){
myChart2.dispatchAction({
type:'highlight',
seriesIndex:4,
dataIndex:params.seriesIndex
});
});
具體需要根據(jù)params的對(duì)應(yīng)情況來實(shí)行高亮。
|
