1. 程式人生 > >echarts柱狀圖與中國地圖聯動,滑鼠移入柱狀圖,地圖響應地顯示資料

echarts柱狀圖與中國地圖聯動,滑鼠移入柱狀圖,地圖響應地顯示資料

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的物件越來越多,沒有及時清理。如果有看到的大神知道解決方法的話還請多多指導,下面留言我會看到的- _  -

奮鬥奮鬥