echarts柱状图与中国地图联动，鼠标移入柱状图，地图响应地显示数据
程序员文章站
2022-04-28 09:05:01
...
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的对象越来越多，没有及时清理。如果有看到的大神知道解决方法的话还请多多指导，下面留言我会看到的- _ -
上一篇： codeigniter发送邮件并打印调试信息的方法
下一篇： 并发编程简介