static/index2.html

<!--#include file="inc/header.html"-->
	<script src="/src/echarts.min.js"></script>
	<!-- <script src="/src/shandong.js"></script> -->
	<div class="con-wrap map-area">
		<!-- <h1>山东省分公司</h1> -->
		<div class="con" id="mapcontainer">
			<div id="main-map"></div>
            <div id="mapLw-show"></div>
            <ul id="list-show"></ul>
		</div>
	</div>
	<script type="text/javascript">
		var chart;
        var city = {
            "济南市": {
                '历城区': 'jnbk',
                '莱芜市': 'lwfk',
            },
            "莱芜市": {
                "莱城区": 'lwfk',
                /*"钢城区": 'lwfk',*/
            },
            "青岛市": {
                '城阳区': 'qdbk',
                '平度市': 'pdfk',
                '莱西市': 'lxfk',
            },
            "淄博市": {
                '桓台县': 'zbbk',
                '高青县': 'gqfk',
            },
            "枣庄市": {
                '市中区': 'zzbk',
                '滕州市': 'zfk',
                '山亭区': 'stfk',
                '台儿庄区': 'tezfk',
            },
            "东营市": {
                '垦利县': 'dybk',
                '广饶县': 'grfk',
            },
            "烟台市": {
                '莱阳市': 'ytbk',
                '莱州市': 'lzfk',
            },
            "潍坊市": {
                '青州市': 'wfbk',
                '昌邑市': 'cyfk',
                '安丘市': 'wfgjls',
            },
            "济宁市": {
                '兖州区': 'jningbk',
                '金乡县': 'jxfk',
                '汶上县': 'syxgs',
            },
            "泰安市": {
                '泰山区': 'tabk',
                '岱岳区': 'zzlz',
                '肥城市': 'fcfk',
                '东平县': 'dpfk',
                '宁阳县': 'nyfk',
            },
            "威海市": {
                '文登区': 'whbk',
                '乳山市': 'rsfk',
                '荣成市': 'rcfk',
            },
            "日照市": {
                '岚山区': 'rzbk',
                '莒县': 'xfk',
            },
            "临沂市": {
                '兰山区': 'lybk',
                '临沭县': 'lfk',
                '蒙阴县': 'myfk',
                '沂水县': 'ysfk',
                '沂南县': 'ynfk',
                '平邑县': 'pyfk',
                '莒南县': 'nfk',

                '兰陵县': 'csfk',
                // '南桥收纳库': 'nqsnk',

                '郯城县': 'tcfk',
            },
            "德州市": {
                '德城区': 'dzbk',
                '武城县': 'wcfk',
                '禹城市': 'ycgfgs',
                '乐陵市': 'llfk',
            },
            "聊城市": {
                '东昌府区': 'lcbk',
                '阳谷县': 'ygyxgs',
                '冠县': 'gxfk',
                '莘县': 'sxyxgs',
                '高唐县': 'gtfk',
            },
            "滨州市": {
                '惠民县': 'bzbk',
                '阳信县': 'yxfk',
            },
            "菏泽市": {
                '曹县': 'hzbk',
                '东明县': 'dmfk',
                '巨野县': 'jyfk',
                '成武县': 'gyjscd',

                '单县': 'dxfk',
                // '黄岗收储点': 'igscd',
                '郓城县': 'ycfk',
                // '杨楼收储点': 'ylscd',
                // '古营集收储点': 'gyjscd',
                '牡丹区': 'hjscd',
                // '韩集收储点': 'hjscd',
            }
        };
		$.get('/src/map/shandong.json', function (json) {
		    echarts.registerMap('shandong', json);
		    chart = echarts.init(document.getElementById('main-map'));
		    chart.setOption({
	    		title: {
	    			text: '中储粮山东分公司',
	    			subtext: '',
	    			left: 'center'
	    		},
	    		tooltip: {
	    			trigger: 'item',
	    			formatter: '{b}'
	    		},
        		series: [{
    				name: 'shandong',
                    map: 'shandong',
    				type: 'map',
    				selectedMode: 'single',
    				label: {
    					normal: {
    						show: true,
    						textStyle: {
    							color: '#1A9856'
    						}
    					},
    					emphasis: {
    						show: true,
    						textStyle: {
    							color: '#fff'
    						}
    					}
    				},
    				itemStyle: {
    					normal: {
    						areaColor: '#ccc',
    						borderColor: '#333'
    					},
    					emphasis: {
    						areaColor: '#007B3A',
    						borderColor: '#666'
    					}
    				},
    				data: [{}]
    			}]
		    });
		    chart.on('click',function(param) {
		    	var name = param.name;
                var data = [];
                // if(name == "莱芜市") {
                //     window.location.href="/map/grain/lwfk.html";
                //     return;
                // }
                if(name == "济南市") {
                    $.get('/src/map/莱芜市.json', function (json) {
                        echarts.registerMap('莱芜市', json);
                        $('#mapLw-show').show();
                        lwChart = echarts.init(document.getElementById('mapLw-show'));
                        lwChart.setOption({
                            title: {
                                text: '',
                                subtext: '',
                                left: 'center'
                            },
                            tooltip: {
                                trigger: 'item',
                                formatter: '{b}'
                            },
                            legend: {
                                orient: 'vertical',
                                top: 'bottom',
                                left: 'right',
                                itemHeight: 20,
                                itemWidth: 20,
                                shadowBlur: '10',
                                selectedMode: 'single'
                            },
                            series: [{
                                name: '莱芜市',
                                map: '莱芜市',
                                type: 'map',
                                selectedMode: 'single',
                                label: {
                                    normal: {
                                        show: true,
                                        textStyle: {
                                            color: '#1A9856'
                                        }
                                    },
                                    emphasis: {
                                        show: true,
                                        textStyle: {
                                            color: '#fff'
                                        }
                                    }
                                },
                                itemStyle: {
                                    normal: {
                                        areaColor: '#ccc',
                                        borderColor: '#333'
                                    },
                                    emphasis: {
                                        areaColor: '#007B3A',
                                        borderColor: '#666'
                                    }
                                },
                                data: [
                                    {name: '莱城区', value: Math.round(Math.random()*1000)},
                                    /*{name: '钢城区', value: Math.round(Math.random()*1000)},*/
                                ]
                            }]
                        });
                        lwChart.on('click',function(param) {
                            if(param.name=='钢城区'){

                            }else{
                                window.location.href="/map/grain/lwfk.html";
                            }

                        })
                        return;
                    })
                } else {
                    $('#mapLw-show').hide();
                }
                $.each(city[name], function(ind, ele){
                    var obj = {};
                    obj.name = ind;
                    obj.value = Math.round(Math.random()*1000);
                    data.push(obj);
                })
		    	$.get('/src/map/'+ name +'.json', function (json) {
		    	    echarts.registerMap(name, json);
                    var ename=name.substr(0, 2)+"地区";
                    //var username=$.cookie("username");
		    	    chart = echarts.init(document.getElementById('main-map'));
		    	    chart.setOption({
    		    		title: {
    		    			text: ename,
    		    			subtext: '',
    		    			left: 'center'
    		    		},
                        legend: {
                            orient: 'vertical',
                            top: 'bottom',
                            left: 'right',
                            itemHeight: 20,
                            itemWidth: 20,
                            shadowBlur: '10',
                            selectedMode: 'single'
                        },
    		    		tooltip: {
    		    			trigger: 'item',
    		    			formatter: '{b}'
    		    		},
    	        		series: [{
    	    				name: name,
                            map: name,
    	    				type: 'map',
    	    				selectedMode: 'single',
                            // showLegendSymbol: true,
    	    				label: {
    	    					normal: {
    	    						show: true,
    	    						textStyle: {
    	    							color: '#1A9856'
    	    						}
    	    					},
    	    					emphasis: {
    	    						show: true,
    	    						textStyle: {
    	    							color: '#fff'
    	    						}
    	    					}
    	    				},
    	    				itemStyle: {
    	    					normal: {
    	    						areaColor: '#ccc',
    	    						borderColor: '#333'
    	    					},
    	    					emphasis: {
    	    						areaColor: '#007B3A',
    	    						borderColor: '#666'
    	    					}
    	    				},
    	    				data: data
    	    			}]
		    	    });
		    	    chart.on('click',function(param) {
                        var html;
                        if (param.name == '兰陵县') {
                            html = "";
                            html += '<li><a href="/map/grain/csfk.html">兰陵县分公司</a></li>';
                            html += '<li><a href="/map/grain/nqsnk.html">南桥收纳库</a></li>';
                            $('#list-show').empty().show().append($(html));
                            return;
                        } else if(param.name == '单县') {
                            html = "";
                            html += '<li><a href="/map/grain/dxfk.html">单县分公司</a></li>';
                            html += '<li><a href="/map/grain/igscd.html">黄岗收储点</a></li>';
                            $('#list-show').empty().show().append($(html));
                            return;
						} else if(param.name == '东昌府区') {
                            html = "";
                            html += '<li><a href="/map/grain/lcbk.html">聊城直属库有限公司</a></li>';
                            html += '<li><a href="/map/grain/lcwl.html">聊城物流</a></li>';
                            $('#list-show').empty().show().append($(html));
                            return;
                        } else if(param.name == '莱州市') {
                            html = "";
                            html += '<li><a href="/map/grain/lzfk.html">莱州分公司</a></li>';
                            html += '<li><a href="/map/grain/lzfiwl.html">丰和物流</a></li>';
                            $('#list-show').empty().show().append($(html));
                        } else if (param.name == '郓城县') {
                            html = "";
                            html += '<li><a href="/map/grain/ycfk.html">郓城县分公司</a></li>';
                            html += '<li><a href="/map/grain/ylscd.html">杨楼收储点</a></li>';
                            html += '<li><a href="/map/grain/gyjscd.html">古营集收储点</a></li>';
                            $('#list-show').empty().show().append($(html));
                            return;
                        } else if (param.name == '牡丹区') {
                            html = "";
                            html += '<li><a href="/map/grain/hjscd.html">牡丹区分公司</a></li>';
                            html += '<li><a href="/map/grain/hjscd.html">韩集收储点</a></li>';
                            $('#list-show').empty().show().append($(html));
                            return;
                        } else {
                            var hrefname = city[param.seriesName][param.name];
                            if( hrefname ) {
                        		window.location.href="/map/grain/"+ hrefname +".html";
                                $('#list-show').hide();
                            } else {
                                chart.dispatchAction({
                                    type: 'mapUnSelect',
                                    name: param.name
                                })
                                $('#list-show').hide();
                                return;
                            }
                        }
                    });
                })
            });
        });
        // if(localStorage){
        //  localStorage.removeItem("cityName");
        // }
        // // 基于准备好的dom，初始化echarts实例
        // var myChart = echarts.init(document.getElementById('main-map'));
        // // 指定图表的配置项和数据
        // var option = option =
        // {
        //  title:
        //  {
        //      text: '中储粮山东省分公司',
        //      subtext: '',
        //      left: 'center'
        //  },
        //  tooltip:
        //  {
        //      trigger: 'item',
        //      formatter: '{b}'
        //  },
        //  series:
        //  [
        //      {
        //          name: '中国',
        //          type: 'map',
        //          mapType: '山东',
        //          selectedMode: 'single',
        //          label: {
        //              normal: {
        //                  show: true,
        //                  textStyle: {
        //                      color: '#1A9856'
        //                  }
        //              },
        //              emphasis: {
        //                  show: true,
        //                  textStyle: {
        //                      color: '#fff'
        //                  }
        //              }
        //          },
        //          itemStyle: {
        //              normal: {
        //                  areaColor: '#ccc',
        //                  borderColor: '#333'
        //              },
        //              emphasis: {
        //                  areaColor: '#007B3A',
        //                  borderColor: '#666'
        //              }
        //          },
        //          data: [{
        //              name: '澳门',
        //              selected: false
        //          }]
        //      },
        //  ],
        // };
        // myChart.setOption(option);
        // myChart.on('mapselectchanged',function(param) {
        //  window.currentArea=param;
        //  console.log(window.currentArea);
        //  var name=window.currentArea.name;
        //  var urlname="";
        //  switch(name){
        //      case "济南市":
        //          urlname="jinan";
        //          break;
        //      case "聊城市":
        //          urlname="liaocheng";
        //          break;
        //      case "德州市":
        //          urlname="dezhou";
        //          break;
        //      case "菏泽市":
        //          urlname="heze";
        //          break;
        //      case "济宁市":
        //          urlname="jining";
        //          break;
        //      case "枣庄市":
        //          urlname="zaozhuang";
        //          break;
        //      case "临沂市":
        //          urlname="linyi";
        //          break;
        //      case "日照市":
        //          urlname="rizhao";
        //          break;
        //      case "泰安市":
        //          urlname="taian";
        //          break;
        //      case "莱芜市":
        //          urlname="laiwu";
        //          break;
        //      case "淄博市":
        //          urlname="zibo";
        //          break;
        //      case "潍坊市":
        //          urlname="weifang";
        //          break;
        //      case "青岛市":
        //          urlname="qingdao";
        //          break;
        //      case "滨州市":
        //          urlname="binzhou";
        //          break;
        //      case "东营市":
        //          urlname="dongying";
        //          break;
        //      case "烟台市":
        //          urlname="yantai";
        //          break;
        //      case "威海市":
        //          urlname="weihai";
        //          break;
        //  };
        //  window.location.href="/map/city/"+urlname+".html";
        // });
</script>

<div class="bottom-wrap">&copy; 2018 中储粮-单仓档案管理系统 版权所有</div>
</body>
</html>