echarts使用之---市级地图使用

下载各省市的地图json

http://datav.aliyun.com/tools/atlas/index.html

引入 echarts.min.js 文件

html:

<div class="mainbox">
    <div class="map-box" id="map"></div>
</div>

css:　　

<style>
    .map-box{ margin: 30px auto; width: 1200px; height: 500px;}
</style>

js:　　

此处是引入的本地Json

<script type="text/javascript">  
    var echartCn = echarts.init(document.getElementById('map'));   
    var name = '常德';     
    var markPointData = [
           {"name": "石门县","dsnum":5,"bdnum":1,"pxnum":4,"jlnum":4,"ztnum":4,'latitude':29.58424,'longitude':111.37966},
            {"name": "安乡县", "dsnum":5,"bdnum":1,"pxnum":4, "jlnum":4,"ztnum":4, 'latitude':29.41326,'longitude':112.16732},
            {"name": "澧县","dsnum":5,"bdnum":1,"pxnum":4,"jlnum":4, "ztnum":4,'latitude':29.63317,'longitude':111.75866},
            {"name": "临澧县","dsnum":5,"bdnum":1,"pxnum":4,"jlnum":4, "ztnum":4,'latitude':29.44163,'longitude':111.65161},
            {"name": "津市市","dsnum":5,"bdnum":1,"pxnum":4,"jlnum":4, "ztnum":4,'latitude':29.60563,'longitude':111.87756},
            {"name": "桃源县","dsnum":5,"bdnum":1,"pxnum":4,"jlnum":4, "ztnum":4,'latitude':28.90474,'longitude':111.48892},
            {"name": "武陵区","dsnum":5,"bdnum":1,"pxnum":4,"jlnum":4, "ztnum":4,'latitude':29.02876,'longitude':111.69791},
            {"name": "鼎城区","dsnum":5,"bdnum":1,"pxnum":4,"jlnum":4, "ztnum":4,'latitude':29.01859,'longitude':111.68078},
            {"name": "汉寿县","dsnum":5,"bdnum":1,"pxnum":4,"jlnum":4, "ztnum":4,'latitude':28.90299,'longitude':111.96691},];
    var option1 = null;
    echartCn.showLoading(); //加载动画
function initChangde(result){    
    echartCn.hideLoading(); //关闭加载动画
    echarts.registerMap(name, result);  
    option1= {
            grid: {
                left: '0%',
                top:'50%',
                right: '0%',
                // bottom: '0',
                containLabel: true
            },
            tooltip: {
                trigger: 'item',
                enterable: true, //鼠标是否可进入提示框
                formatter: function (params) {
                    return params.name;
                }
            },               
            geo: {
                // type: 'map',
                show: true,
                map: name,
                zoom: 1.2,   //地图初始大小，这里是关键，一定要放在 series中  因为geo在series中会加载，所以zoom放在此处
                roam: false,
                label: {
                    normal: {
                        show: true,
                        color:'#ccc'
                    },
                    emphasis: {
                        textStyle: {
                            color: '#fff'
                        }
                    }
                },
                itemStyle: {
                    normal: {
                        borderColor: '#40c8e3',
                        borderWidth: 1,
                        areaColor: 'rgba(59, 189, 223,.6)',
                    },
                    emphasis: {
                        areaColor: 'rgba(34, 159, 211)',
                        borderColor: 'rgba(21, 125, 199)',
                        borderWidth: 2,
                        label: {
                            color: '#fff',
                            show: false
                        }
                    }
                }

            },                
            series: [{
                type: 'effectScatter',      
                coordinateSystem: 'geo',
                // animation: true,
                // rippleEffect: {
                //     brushType: 'stroke'
                // },
                tooltip: {
                    trigger: 'item', 
                    show:true,
                    enterable: true, //鼠标是否可进入提示框
                    formatter: function (params) {
                        return params.name;
                    }
                }, 
                symbol: 'path://M509.867 189.867L608 411.733l243.2 25.6-181.333 162.134 51.2 238.933-211.2-121.6-211.2 121.6 51.2-238.933L168.533 435.2l243.2-25.6 98.134-219.733z',
                symbolSize:8,
                data: markPointData.map(function (itemOpt) { //散点生成
                        return {
                            name: itemOpt.name,
                            value:[
                             itemOpt.longitude,
                             itemOpt.latitude,
                            ],//返回的参数
                            tooltip: {
                                trigger: 'item',
                                backgroundColor: "rgba(21, 130, 203,0.9)", //设置背景图片 rgba格式
                                borderRadius: 2,
                                enterable: true, //鼠标是否可进入提示框
                                transitionDuration: 1, //提示框移动动画过渡时间
                                formatter: function() {  
                                    var res = '<p style="text-align:center;color:#fff;">'+itemOpt.name+'</p>';                                   
                                    if(itemOpt){
                                        res+='人数：'+itemOpt.dsnum+'</br>';
                                    } 
                                    return res;
                                },
                                backgroundColor:'rgba(57,57,87,0.9)',
                                borderRadius: 2,
                                textStyle:{
                                    // 颜色
                                    color: '#FFFFFF',
                                    align: 'left',
                                    fontSize: 12,
                                    fontStyle: 'normal',
                                    fontWeight: 'normal'    
                                },
                            },    
                            label: {
                                normal: {
                                    show: false,
                                },
                                emphasis: {
                                    show: false,
                                }
                            }
                        };
                })

            }]
        }
  
        echartCn.setOption(option1); 
}
 
 
</script> 
//引入本地json
<script src="./js/changde.json?callback=initChangde"></script>