echarts柱狀圖與中國地圖聯動，滑鼠移入柱狀圖，地圖響應地顯示資料
阿新 • • 發佈：2019-01-02
echarts顯示柱狀圖的時候，旁邊放一張中國地圖，當滑鼠移入柱狀圖，旁邊中國地圖對應的區域亮起來。
先放效果圖~~
這是原始頁面
這是滑鼠移上去的樣子
這是滑鼠離開之後的樣子
總之呢，就是給他倆弄一個聯動的效果，移入柱狀圖，地圖跟著動起來，並且資料跟著變。
柱狀圖後臺資料庫：
地圖後臺資料庫：
思路大概是這樣的：當滑鼠移入柱狀圖的時候，獲取當前移入的索引，先讓柱狀圖的圖示顯示出來；然後根據日期進行判斷，看當天有哪幾個省的人登入了，如果日期相同，就讓這幾個省的selected狀態改為true，並且增加地圖標註。（當然，當滑鼠從當前柱狀圖移入到下一個柱狀圖的時候，這中間也要進行一些判斷，詳看程式碼~）
下面上程式碼：
所需js檔案：
<script src="${ctx}/static/layui_v2/layui.js"></script> <script src="${ctx}/static/js/jquery-1.8.3.js"></script> <script type="text/javascript" src="${ctx}/static/echarts/echarts-all.js" charset="utf-8"></script> <script type="text/javascript" src="${ctx}/static/echarts/codemirror.js" charset="utf-8"></script> <script type="text/javascript" src="${ctx}/static/echarts/javascript.js" charset="utf-8"></script>
頁面佈局：
<div class="row"> <div class="layui-col-md5"> <div class="layui-collapse" > <h2 class="layui-colla-title" style="background-color: #ffffff;">網站訪問情況統計</h2> <div class="layui-colla-content layui-show" > <div id="container" style="height: 350px; margin: 0 auto;width: 100%;"></div> </div> </div> </div> <div class="layui-col-md7"> <div class="layui-collapse"> <h2 class="layui-colla-title" style="background-color: #ffffff;">網站訪問地址統計</h2> <div class="layui-colla-content layui-show" > <div id="container2" style="height: 350px; margin: 0 auto;width: 100%;"></div> </div> </div> </div> </div>
js程式碼：
<script type="text/javascript">
var $;
layui.config({
base : "${ctx}/static/js/"
}).use(['form','jquery','layer','common','element'],function() {
$ = layui.$;
var form = layui.form,
element = layui.element,
common = layui.common;
var loading = layer.load(0,{ shade: [0.3,'#000']});
//柱狀圖表
var psLineChar = echarts.init(document.getElementById('container'));
//查詢
function loadDrugs() {
psLineChar.clear();
psLineChar.showLoading({text: '正在努力的讀取資料中...'});
$.post("${ctx}/main/ajax_echarts_login_info.do", function(data) {
var option = {
title : {
text: '每日訪問量',
subtext: '10天訪問情況統計'
},
tooltip : {
trigger: 'item',
showDelay: 200,
hideDelay: 200,
transitionDuration: 1
},
legend: {
data:['訪問量']
},
toolbox: {
show : true,
feature : {
magicType : {
title: {
line : '折線圖切換',
bar : '柱形圖切換'
}
},
type: ['line','bar'],//展示型別，折線/柱狀
dataView: {show: true,readOnly: true},//資料檢視
restore: {show: true},//重置
dataZoom: {show: true},//資料縮放檢視
saveAsImage: {show: true}//儲存為圖片
}
},
//是否允許拖拽柱形圖
calculable : false,
xAxis : [
{
type : 'category',
data : data.xAxisData//用後臺查到的X軸資料
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'訪問量',
type:'bar',
data:data.seriesData,
//資料標註
markPoint : {
data : []
},
itemStyle:{
normal:{
color:'Teal'
},
emphasis:{
color:'orange'
}
}
}
]
};
psLineChar.setOption(option, true);
});
psLineChar.hideLoading();
};
//中國地圖圖表
var chinaMap = echarts.init(document.getElementById('container2'));
//查詢
function loadChinaMap() {
//chinaMap.clear();
chinaMap.showLoading({text: '正在努力的讀取資料中...'});
$.post("${ctx}/main/ajax_echarts_login_info_map.do", function(data) {
var loginP = data.loginProvince;
var loginC = data.loginCount;
var loginD = data.loginDate;
var list = [];
for(var i = 0; i < loginC.length; i++){
var row = {};
row.name = loginP[i];
row.value = loginC[i];
row.selected = false;
list.push(row);
}
var option = {
title : { //標題
text: '訪問地址分佈',
subtext: '最近10天資料',
x:'center'
},
tooltip : { //提示框
trigger: 'item'//當trigger為’item’時只會顯示該點的資料，為’axis’時顯示該列下所有座標軸所對應的資料。
},
dataRange: { //值域控制元件
min: 0,
max: 100,
x: 'left',
y: 'bottom',
text:['高','低'], // 文字，預設為數值文字
calculable : true //是否啟用值域漫遊
},
toolbox: { //工具箱
show: true,
orient : 'vertical',
x: 'right',
y: 'center',
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},//資料檢視
restore : {show: true},//還原
saveAsImage : {show: true}//儲存為圖片
}
},
series : [
{
name: '登陸人數',
roam: true, //是否滾輪縮放
scaleLimit: {max:10, min:0.5},//滾輪縮放大小限制
type: 'map',
selectedMode: 'multiple',//選中模式
zoom: 1.1,//地圖縮放比例
mapType: 'china',
itemStyle: {
normal: { //正常樣式
label: {
show: true
},
color: 'skyblue'//小圓點顏色
},
emphasis: { // 滑鼠選中樣式
label: {
show: true,
textStyle: {
color: 'black'
}
},
color: 'orange'
}
},
//系列中的資料標註內容
data:list,
//地圖標註
markPoint : {
symbolSize : 13, //標註大小
effect : { //炫光特效
show : false
},
itemStyle : {
normal:{
color:'Teal'
}
},
//要標註的城市
data :[]
},
geoCoord: { //各個城市的地理位置，寫死即可
'西藏':[91.11,29.97],
'上海':[121.48,31.22],
'福建':[118.1,26.46],
'浙江':[ 119.96, 29.86 ],
'廣東':[113.23,23.16],
'山西':[112.53,37.87],
'雲南':[101.73,24.04],
'遼寧':[123.38,41.8],
'吉林':[125.35,43.88],
'江西':[115.89,28.68],
'海南':[109.51,19.25],
'廣西':[108.74,23.16],
'內蒙古':[111.65,41.42],
'四川':[104.06,30.67],
'陝西':[108.95,34.27],
'江蘇':[119.78,33.04],
'貴州':[106.71,26.57],
'北京':[116.46,39.92],
'新疆':[86.68,40.77],
'山東':[118,35.65],
'甘肅':[103.73,36.03],
'天津':[117.2,39.13],
'河南':[113.65,33.76],
'黑龍江':[127.63,46.75],
'河北':[115.48,39.03],
'湖南':[112,27.21],
'安徽':[117.27,31.86],
'湖北':[112.31,30.52],
'青海':[97.31,36.03],
'重慶':[107.31,29.52],
'寧夏':[106.31,37.52],
'香港':[114.31,22.52],
'澳門':[114.01,22.02],
'臺灣':[120.81,23.52]
}
}
]
};
chinaMap.setOption(option, true);
//滑鼠移入
function eConsole(param) {
var i = param.dataIndex;// 獲取當前點選索引，
var na = "2017/"+param.name;// 獲取當前點選名
//建立柱狀圖圖示陣列
var list2 = [];
//console.info('11100');
//return ;
var LineList = {};
LineList.name = '總共';
LineList.value = psLineChar.getOption().series[0].data[i];//圖示顯示的值
LineList.xAxis = i;//圖示X軸
LineList.yAxis = psLineChar.getOption().series[0].data[i]+2;//圖示Y軸，因為稍微有點低，所以+2
//console.info(list2);
//獲取到柱狀圖的option選項
var option2 = psLineChar.getOption();
//先判斷，如有有資料，就清空，這樣就一直只會有一個標註了
if(option2.series[0].markPoint.data != null && (option2.series[0].markPoint.data).length>0){
list2.push(LineList);
option2.series[0].markPoint.data = [];
}
option2.series[0].markPoint.data.push(list2[0]);//把拼好的資料放進去，只放第一條
psLineChar.setOption(option2, true);
option.series[0].markPoint.data=[];
//進入時，先把以前的選中效果都清除了
for(var b = 0; b < loginP.length; b++){
list[b].selected = false;
}
for(var a = 0; a < loginD.length; a++){
//list[a].selected = false;
if(na == loginD[a]){
list[a].selected = true;
option.series[0].markPoint.data.push(list[a]);//把選擇的省份加入到地圖標註中
}
}
chinaMap.setOption(option, true);
};
//滑鼠移出
function eOunt(param) {
for(var a = 0; a < loginD.length; a++){
//list[a].selected = false;
}
chinaMap.setOption(option, true);
};
psLineChar.on("hover", eConsole);//滑鼠移入
psLineChar.on("mouseout", eOunt);//滑鼠移出,這一步貌似沒什麼用了...
});
chinaMap.hideLoading();
}
//載入柱狀圖表
loadDrugs();
//載入中國地圖圖表
loadChinaMap();
//載入地圖上的柱狀圖表
//loadMapBar();
//瀏覽器大小改變時重置大小
window.onresize = function () {
psLineChar.resize();
};
layer.close(loading);
});
</script>以上就是這個案例的全部程式碼。
但現在這個案例還有一些小問題，就是當滑鼠在柱狀圖之間來回快速移動時，會越來越卡，應該是新建陣列那塊寫的不完善，導致new的物件越來越多，沒有及時清理。如果有看到的大神知道解決方法的話還請多多指導，下面留言我會看到的- _ -
