echarts在项目中的使用

1.场景

　　在echarts的map中展示数据，项目中有个实验室地图模块，展示重庆所有区县的所拥有的实验室机构，当鼠标点击区县时，会弹出信息框，展示该区县所有的实验室机构以及联系电话列表展示，点击实验室机构名称可跳转到机构详情页面

2.所使用技术

　　echarts的map组件、java的StringBuff拼接地图实验室的json格式数据、加载重庆市区县地图数据的json文件、freemarker做页面展示

3.代码

　　freemarker页面　

<#import "/WEB-INF/template/website/base_website.ftl" as base>
<@base.html title="实验室地图"; templateId>
<#if templateId=="head">
　　　<!--引入echarts-->
    <script type="text/javascript" src="${Context}/js/website/echarts.min.js"></script>
    <style type="text/css">
            .hover-div{ width: 350px; padding: 10px; background-color: #FFFFFF;}
            .hover-div .title{ overflow: hidden; font-size: 12px; color: #1DA7A9;}
            .hover-div .l{ float: left;}
            .hover-div .r{ float: right;}
            .hover-div ul{ padding: 10px 0;}
            .hover-div li{ overflow: hidden; font-size: 12px; color: #666666; line-height: 25px;}
            .hover-div .tip{ font-size: 12px; color: #999999;}
    </style>  
</#if>    
    
<#if templateId=="body">
        <!--guide-->
        <div class="guide">
            <div class="view-center">
                <span>当前位置：</span>
                <a href="##">检验检测机构信息</a>
                <a>></a>
                <a>实验室地图</a>
            </div>
        </div>
        <div class="main">
            <div class="view-center bg-FFF pl-60px pr-60px">
                
                <div class="lab-module">
                    <div class="tab-button">
                        <a class="active" href="laboratoryMap.action">实验室地图</a>
                        <a href="laboratorList.action">实验室名单</a>
                    </div>
                    <div class="map-box">
　　　　　　　　　　　　　　<!--地图容器-->
                        <div id="map" style="height: 100%;"></div>
                    </div>
                </div>
                
            </div>
        </div>
        
        <div style=" height: 260px;"></div>    
        <div id="mapMain" style="position: fixed;z-index: 99999;top: 50%;left: 50%;border: 1px solid #c7c7c7;margin-top: -100px;margin-left: -150px;"></div>
    </#if>                    
    <script type="text/javascript">
                $(function(){
                     $("body").click(function(){
                       $("#mapMain").html("");
                    });
                });
　　　　　　　　　　//点击实验室名称跳转详情页面方法
                function mapfun(id){
                    event.stopPropagation();
                    window.location.href="${Context}/website/member/memberDisplay.action?userId="+id;
                }
　　　　　　　　　　//拼接点击地图区县时弹出的信息框方法
                function loadList(data,oEvent){   
                    var html = "<div class='hover-div'>"
                    
                        html += "    <div class='title'>";
                        html +=    "        <span class='l'>实验室名称</span>";
                        html +=    "        <span class='r'>联系电话</span>";
                        html +=    "    </div>";
                        html +=    "    <ul>";
                    for(var i = 0; i < data.length; i++){
                        html += " <li><span class='l' onclick= 'mapfun(""+data[i].id+"")'>"+data[i].name+"</span><span class='r'>"+data[i].tel+"</span></li>";
                    }    
                        html +=    "    </ul>";
                        
                        html +=    "    <div class='tip'>该区县共 "+data.length+" 家</div>";
                        html +=    "</div>";
                    $("#mapMain").html(html);
                        oEvent.event.cancelBubble = true;
                        oEvent.event.stopPropagation();    
                    return html;
                }
                //初始化地图容器
                var myChart = echarts.init(document.getElementById('map'));
　　　　　　　　　 //读取地图原始数据
                $.get('${Context}/js/website/chongqing.json', function (geoJson) {
                            echarts.registerMap('chongqing', geoJson);
                            myChart.on('click', function (params,ev) {
                                var oEvent = params.event;
                                var data = [];
                                var name = params.name;
　　　　　　　　　　　　　　　　　　　//${dataSource} 是从后台穿过来的json字符串数据
                                data = ${dataSource}[name];    
                                return loadList(data,oEvent);
                    });
　　　　　　　　　　　　//匹配json文件中的数据，缺一不可
                    myChart.setOption(option = {
                        title: {
                        },
                        series: [
                            {
                                name: '重庆',
                                type: 'map',
                                mapType: 'chongqing', // 自定义扩展图表类型
                                itemStyle:{
                                    normal:{label:{show:true}},
                                    emphasis:{label:{show:true}}
                                },
                                data:[
                                    {name:'万州区',value:'cq'},
                                    {name:'涪陵区',value:'cq'},
                                    {name:'渝中区',value:'cq'},
                                    {name:'大渡口区',value:'cq'},
                                    {name:'江北区',value:'cq'},
                                    {name:'沙坪坝区',value:'cq'},
                                    {name:'九龙坡区',value:'cq'},
                                    {name:'南岸区',value:'cq'},
                                    {name:'北碚区',value:'cq'},
                                    {name:'綦江区',value:'cq'},
                                    {name:'大足区',value:'cq'},
                                    {name:'渝北区',value:'cq'},
                                    {name:'巴南区',value:'cq'},
                                    {name:'黔江区',value:'cq'},
                                    {name:'长寿区',value:'cq'},
                                    {name:'江津区',value:'cq'},
                                    {name:'合川区',value:'cq'},
                                    {name:'永川区',value:'cq'},
                                    {name:'南川区',value:'cq'},
                                    {name:'璧山区',value:'cq'},
                                    {name:'铜梁区',value:'cq'},
                                    {name:'潼南区',value:'cq'},
                                    {name:'荣昌区',value:'cq'},
                                    {name:'梁平县',value:'cq'},
                                    {name:'城口县',value:'cq'},
                                    {name:'丰都县',value:'cq'},
                                    {name:'秀山土家族苗族自治县',value:'cq'},
                                    {name:'垫江县',value:'cq'},
                                    {name:'武隆县',value:'cq'},
                                    {name:'忠县',value:'cq'},
                                    {name:'石柱土家族自治县',value:'cq'},
                                    {name:'开县',value:'cq'},
                                    {name:'云阳县',value:'cq'},
                                    {name:'奉节县',value:'cq'},
                                    {name:'彭水苗族土家族自治县',value:'cq'},
                                    {name:'酉阳土家族苗族自治县',value:'cq'},
                                    {name:'巫山县',value:'cq'},
                                    {name:'巫溪县',value:'cq'}
                                ]
                            }
                        ]
                    });
                });
    </script>    
</@>
    

　　　json数据文件

　　　　

　　后台提供实验室地图数据

　　

/**
     * 实验室地图页面
     * @return
     * @throws Exception
     */
    public String laboratoryMap() throws Exception{
        HibernateBean bean = HibernateBeanFactory.createBean();
        String sql = "select * from client_user where isEnable=1 and membershipAuthority = 1";
        Map<String, Object>  map = new HashMap<String, Object>();
        String qx = "SELECT NAME FROM china WHERE parent_code = '500200' OR parent_code = '500100'";
        qxList = bean.findBySql(qx, map);
        StringBuffer sb = new StringBuffer("{");
        for (int i = 0; i < qxList.size(); i++) {
            sql +=" and county = :county";
            map.put("county", qxList.get(i)[0].toString());
            cuserList = bean.findBySql(sql, ClientUser.class, map);
            sb.append('"'+qxList.get(i)[0].toString()+'"' +":[");
            if(cuserList.size()==0){
                if(i==qxList.size()-1){
                    sb.append("]");
                }else{
                    sb.append("],");
                }
                
            }else{
                for (int j = 0; j < cuserList.size(); j++) {
                    if(i==qxList.size()-1){
                        sb.append("{"id":"+'"'+cuserList.get(j).getUserId()+'"'+","name":"+'"'+cuserList.get(j).getUnitName()+'"'+","tel":"+'"'+cuserList.get(j).getCellPhone()+'"'+"}]");
                    }
                    if(j == cuserList.size()-1){
                        sb.append("{"id":"+'"'+cuserList.get(j).getUserId()+'"'+","name":"+'"'+cuserList.get(j).getUnitName()+'"'+","tel":"+'"'+cuserList.get(j).getCellPhone()+'"'+"}],");
                    }else{
                        sb.append("{"id":"+'"'+cuserList.get(j).getUserId()+'"'+","name":"+'"'+cuserList.get(j).getUnitName()+'"'+","tel":"+'"'+cuserList.get(j).getCellPhone()+'"'+"},");    
                    }
                }
            }   
        }
        sb.append("}");
        dataSource = sb.toString();
        return "success";
    }

　　得到的数据格式如下：

{"万州区":[{"id":"402881f0622e776701622e779ef70000","name":"南京科技","tel":"15923522574"}],"涪陵区":[],"渝中区":[],"大渡口区":[],"江北区":[],"沙坪坝区":[],"九龙坡区":[],"南岸区":[],"北碚区":[],"綦江区":[],"大足区":[],"渝北区":[],"巴南区":[],"黔江区":[],"长寿区":[],"江津区":[],"合川区":[],"永川区":[],"南川区":[],"璧山区":[],"铜梁区":[],"潼南区":[],"荣昌区":[],"梁平县":[],"城口县":[],"丰都县":[],"垫江县":[],"武隆县":[],"忠县":[],"开县":[],"云阳县":[],"奉节县":[],"巫山县":[],"巫溪县":[],"石柱土家族自治县":[],"秀山土家族苗族自治县":[],"酉阳土家族苗族自治县":[],"彭水苗族土家族自治县":[]}

4、补充

　　如果地图展示区县名称和数据库不一致，修改json文件中的数据，保持和数据一致，当你打开浏览器查看地图时，发现地图上的区县名称没变，那么请先清除页面缓存，方可行