static/index5.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 = {

            "烟台市": {
                '莱州市': 'lzfk',
            },

            "聊城市": {
                '东昌府区': 'lcbk',

            }

        };
        var city2 = {
            "jinan": "济南市",
            "qingdao": "青岛市",
            "zibo": "淄博市",
            "zaozhuang": "枣庄市",
            "dongying": "东营市",
            "yantai": "烟台市",
            "weifang": "潍坊市",
            "jining": "济宁市",
            "taian": "泰安市",
            "weihai": "威海市",
            "rizhao": "日照市",
            "linyi": "临沂市",
            "dezhou": "德州市",
            "liaocheng": "聊城市",
            "binzhou": "滨州市",
            "heze": "菏泽市"
        };
        var name = city2[window.location.hash.replace("#", "")],
            data = [];
        $.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  liaocc="聊城中储粮物流有限公司";
           var  yantt="中储粮莱州丰和物流有限公司";
            if(ename=="聊城"){
                ename=liaocc;
            }else if(ename=="烟台"){
                ename=yantt;
            }
    	    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));
                            return;
                } 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;
                    }
                }
            });
        })
</script>

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