中国地图 - heshujun223

 

 

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);
     });
    }