eChars实现哈尔滨市区县地图展示

eChars实现哈尔滨市区县地图展示
本次写的内容是关于eChars实现自定义地图的有关话题，虽然很多人都对eChars如何实现自定义地图进行过技术问答，但由于eChars官网对ECharts 之前提供下载的矢量地图数据来自第三方在线生成GeoJSon数据的关闭，使的我们生成GeoJSon数据变得困难，我尝试过使用工具自定义生成geoJSon
geoJSon地图数据包地址：http://download.csdn.net/download/u011688281/10144151
jsp代码

<% 

//地图
List dtlist = EChartsService.getInstance().dtQxspxmpm(); //查询List数据
System.out.println("==="+dtlist.size());

%>
<div class="yxzg03 yxzg03_add">
     <div id="main" style="width: 900px;height:700px;margin:0 auto"></div>  </div>
 <script type="text/javascript"> 
        $.get('../mapjson/haerbin.json', function (yCjson) {  

             echarts.registerMap('哈尔滨', yCjson);  

        var chart = echarts.init(document.getElementById('main'));  

        option = {  
            title: {  
                text: '',  
                x:'center'  
            },  
            tooltip : {
                 trigger: 'item'
                 }, 
            legend: {
                 orient: 'vertical',
                 x:'left',
                 data:['数量']
              }, 
            dataRange:{  
                x: 'left',
                y: 'bottom',
                splitList: [
                    {start: 1000, label: '1000个以上', color: '#048CA3'},
                    {start: 800, end: 1000, label: '800个 到 1000个', color: '#069CB5'},
                    {start: 600, end: 799, label: '600个 到 799个', color: '#05AAC6'},
                    {start: 400, end: 599, label: '400个 到 599个', color: '#14BCD9'},
                    {start: 300, end: 399, label: '300个 到 399个', color: '#15CCEB'},
                    {end: 300, label: '300个以下', color: '#16D8FA'}
                ],
                color: ['#E0022B', '#E09107', '#A3E00B']
            },  
            series:[  
                {  
                    name:'投资金额',  
                    type:'map',  
                    map:'哈尔滨',  
                    roam: false,
                    itemStyle:{
                        normal:{
                            label:{
                                show:true,
                                textStyle: {
                                   color: "rgb(249, 249, 249)"
                                }
                            }
                        },
                         emphasis:{label:{show:true}}
                    },

                    data:[  
                     <%--   <%

                        if(dtlist!=null&&dtlist.size()>0){

                          for(int j=0;j<dtlist.size();j++){

                            Coordinate coo1=(Coordinate)dtlist.get(j);
                                String name=coo1.getX();
                                double money=Double.valueOf(coo1.getY()).doubleValue();
                        %>  

                            {name:'<%=name%>',value:<%=money%>},

                         <%         
                                    }
                            }
                      %>  --%> //注掉的部分为后台获取数据，为方便展示效果，采用随机数数据的方式
                      {name: '南岗区',value: Math.round(Math.random()*2000)},
                      {name: '松北区',value: Math.round(Math.random()*2000)},
                      {name: '呼兰区',value: Math.round(Math.random()*2000)},
                      {name: '巴彦县',value: Math.round(Math.random()*2000)},
                      {name: '木兰县',value: Math.round(Math.random()*2000)},
                      {name: '通河县',value: Math.round(Math.random()*2000)},
                      {name: '道外区',value: Math.round(Math.random()*2000)},
                      {name: '双城区',value: Math.round(Math.random()*2000)},
                      {name: '阿城区',value: Math.round(Math.random()*2000)},
                      {name: '香坊区',value: Math.round(Math.random()*2000)},
                      {name: '平房区',value: Math.round(Math.random()*2000)},
                      {name: '道里区',value: Math.round(Math.random()*2000)},
                      {name: '阿城区',value: Math.round(Math.random()*2000)},
                      {name: '五常市',value: Math.round(Math.random()*2000)},
                      {name: '尚志市',value: Math.round(Math.random()*2000)},
                      {name: '延寿县',value: Math.round(Math.random()*2000)},
                      {name: '宾县',value: Math.round(Math.random()*2000)},
                      {name: '方正县',value: Math.round(Math.random()*2000)},
                      {name: '依兰县',value: Math.round(Math.random()*2000)}       
                    ]  
                }  
            ],  
        };  
        chart.setOption(option);  
    });  
    </script>  

java
代码

    public List<XXX> dtQxspxmpm(){
        sqlSession = sqlSessionFactory.openSession(false);
        EChartsMapper eChartsMapper = sqlSession.getMapper(EChartsMapper.class);
        List<XXX> list=new ArrayList<XXX>();

            String sql = " ";
             list=  eChartsMapper.txfxTzxmJeHyfb(sql);  
        return list;
    }

实现效果：