echarts柱状图与中国地图联动,鼠标移入柱状图,地图响应地显示数据


echarts显示柱状图的时候,旁边放一张中国地图,当鼠标移入柱状图,旁边中国地图对应的区域亮起来。


先放效果图~~



这是原始页面

echarts柱状图与中国地图联动,鼠标移入柱状图,地图响应地显示数据_第1张图片




这是鼠标移上去的样子

echarts柱状图与中国地图联动,鼠标移入柱状图,地图响应地显示数据_第2张图片




这是鼠标离开之后的样子

echarts柱状图与中国地图联动,鼠标移入柱状图,地图响应地显示数据_第3张图片



总之呢,就是给他俩弄一个联动的效果,移入柱状图,地图跟着动起来,并且数据跟着变。



柱状图后台数据库:

echarts柱状图与中国地图联动,鼠标移入柱状图,地图响应地显示数据_第4张图片




地图后台数据库:

echarts柱状图与中国地图联动,鼠标移入柱状图,地图响应地显示数据_第5张图片




思路大概是这样的:当鼠标移入柱状图的时候,获取当前移入的索引,先让柱状图的图标显示出来;然后根据日期进行判断,看当天有哪几个省的人登录了,如果日期相同,就让这几个省的selected状态改为true,并且增加地图标注。(当然,当鼠标从当前柱状图移入到下一个柱状图的时候,这中间也要进行一些判断,详看代码~)




下面上代码:

所需js文件:

    

    

    
    
    


页面布局:

	    

网站访问情况统计

网站访问地址统计



js代码:




以上就是这个案例的全部代码。


但现在这个案例还有一些小问题,就是当鼠标在柱状图之间来回快速移动时,会越来越卡,应该是新建数组那块写的不完善,导致new的对象越来越多,没有及时清理。如果有看到的大神知道解决方法的话还请多多指导,下面留言我会看到的- _  -








你可能感兴趣的:(echarts)