中国地图

 

 

function randomData() {  
     return Math.round(Math.random()*500);  
}
var mydata = [  
    {
        name: '北京',
        value: '100' ,
        itemStyle: 
        {
            "areaColor": 'red',
            "emphasis": {
                areaColor: 'green'                            
            }
    }},{name: '天津',value: randomData() },  
    {name: '上海',value: randomData() },{name: '重庆',value: randomData() },  
    {name: '河北',value: randomData() },{name: '河南',value: randomData() },  
    {name: '云南',value: randomData() },{name: '辽宁',value: randomData() },  
    {name: '黑龙江',value: randomData() },{name: '湖南',value: randomData() },  
    {name: '安徽',value: randomData() },{name: '山东',value: randomData() },  
    {name: '新疆',value: randomData() },{name: '江苏',value: randomData() },  
    {name: '浙江',value: randomData() },{name: '江西',value: randomData() },  
    {name: '湖北',value: randomData() },{name: '广西',value: randomData() },  
    {name: '甘肃',value: randomData() },{name: '山西',value: randomData() },  
    {name: '内蒙古',value: randomData() },{name: '陕西',value: randomData() },  
    {name: '吉林',value: randomData() },{name: '福建',value: randomData() },  
    {name: '贵州',value: randomData() },{name: '广东',value: randomData() },  
    {name: '青海',value: randomData() },{name: '西藏',value: randomData() },  
    {name: '四川',value: randomData() },{name: '宁夏',value: randomData() },  
    {name: '海南',value: randomData() },{name: '台湾',value: randomData() },  
    {name: '香港',value: randomData() },{name: '澳门',value: randomData() }  
];

var optionMap = {  
    backgroundColor: '#FFFFFF',  
    title: {  
        text: '中国地图',  
        subtext: '',  
        x:'center'  
    },  
    tooltip : {  
        trigger: 'item'  
    },  
    
    //左侧小导航图标
    // visualMap: {  
    //     show : true,  
    //     x: 'left',  
    //     y: 'center',  
    //     splitList: [   
    //         {start: 500, end:600},{start: 400, end: 500},  
    //         {start: 300, end: 400},{start: 200, end: 300},  
    //         {start: 100, end: 200},{start: 0, end: 100},  
    //     ],  
    //     color: ['#5475f5', '#9feaa5', '#85daef','#74e2ca', '#e6ac53', '#9fb5ea']  
    // },  
    
    //配置属性
    series: [{  
        name: '数据',  
        type: 'map',  
        mapType: 'china',   
        roam: true,  
        label: {  
            normal: {  
                show: true  //省份名称  
            },  
            emphasis: {  
                show: false  
            }  
        },  
        data:mydata  //数据
    }]  
};  
//初始化echarts实例
var myChart = echarts.init(document.getElementById('map_1'));

//使用制定的配置项和数据显示图表
myChart.setOption(optionMap);

升级版地图,在此基础上添加散点图,效果如下:

 

 代码:

    repRegionStrategy()
     
    function repRegionStrategy(){
        $.get('js/china.json', function (chinaJson) {                    
            echarts.registerMap('china', chinaJson); // 注册地图
            var pRChart = echarts.init(document.getElementById('chinaMap'));
            var data = [
                {name: '锦州', value: 54},
                {name: '南昌', value: 54},
                {name: '柳州', value: 54}
            ];
            var data1 = [
                {name: '淄博', value: 85},
                {name: '鞍山', value: 86},
                {name: '溧阳', value: 86}
            ];
            var data2 = [
                {name: '金华', value: 157},
                {name: '岳阳', value: 169},
                {name: '长沙', value: 175}
            ];

            var geoCoordMap = {
                '锦州':[121.15,41.13],
                '南昌':[115.89,28.68],
                '柳州':[109.4,24.33]
            };
            var geoCoordMap1 = {
                '淄博':[118.05,36.78],
                '鞍山':[122.85,41.12],
                '溧阳':[119.48,31.43]
            };
            var geoCoordMap2 = {
                '金华':[119.64,29.12],
                '岳阳':[113.09,29.37],
                '长沙':[113,28.21]
            };

            var convertData = function (geoCoordMap,data) {
                var res = [];
                for (var i = 0; i < data.length; i++) {
                    var geoCoord = geoCoordMap[data[i].name];
                    if (geoCoord) {
                        res.push({
                            name: data[i].name,
                            value: geoCoord.concat(data[i].value)
                        });
                    }
                }
                return res;
            };
            option = {
                tooltip: {//鼠标放上去提示
                    formatter: function (params) {
                        return params.name
                    }
                }, 
                legend: {
                    data: ['筹备', '在建', '现房'],
                    orient: 'vertical',
                    left:0,
                    bottom:0
                },
                geo: { // 这个是重点配置区
                      map: 'china', // 表示中国地图
                      roam: true,
                      showLegendSymbol: true, // 存在legend时显示 
                      label: {
                            normal: {
                                show: false,
                                textStyle: {
                                    color: '#333'
                                }
                            },
                            emphasis: {//鼠标放上去时的状态
                                show: false,
                                textStyle: {
                                    color: '#333'
                                }
                            }
                        },
                        itemStyle: {
                            normal: {
                                areaColor: '#fff',
                                borderColor: '#338fff',
                                borderWidth: 1
                            },
                            emphasis: {
                                areaColor: '#3c55b7'
                            }
                        }
                    },
                series: [
                    {
                         type: 'map',
                         mapType: 'china', // 自定义扩展图表类型
                         geoIndex: 0
                    },
                    {
                        name: '筹备',
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        data: convertData(geoCoordMap, data),
                        encode: {
                            value: 2
                        },
                        symbolSize: function (val) {
                            return 8
                        },
                        label: {
                            formatter: '{b}',
                            position: 'right'
                        },
                        itemStyle: {
                            color: '#40a9ff'
                        },
                        emphasis: {
                            label: {
                                show: true
                            }
                        }
                    },
                    {
                        name: '在建',
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        data: convertData(geoCoordMap1, data1),
                        encode: {
                            value: 2
                        },
                        symbolSize: function (val) {
                            return 8
                        },
                        label: {
                            formatter: '{b}',
                            position: 'right'
                        },
                        itemStyle: {
                            color: '#73d13d'
                        },
                        emphasis: {
                            label: {
                                show: true
                            }
                        }
                    },
                    {
                        name: '现房',
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        data: convertData(geoCoordMap2, data2),
                        encode: {
                            value: 2
                        },
                        symbolSize: function (val) {
                            return 8
                        },
                        label: {
                            formatter: '{b}',
                            position: 'right'
                        },
                        itemStyle: {
                            color: '#ff7875'
                        },
                        emphasis: {
                            label: {
                                show: true
                            }
                        }
                    }
                ]    
            };
         pRChart.setOption(option,true);
     });
    }