echarts4.0 中国省界底图

    echarts中做地图一直用的百度在线地图做底图,现在有个项目中客户服务器是局域网没有外网,因此需要做离线地图,需要中国的省界以及各省会城市的标注。考虑到arcgis离线地图需要做切片,或者得自己做中国省界的geoJson文件,相对都也比较复杂,想起来echarts4.0有内部自带的china的geoJson对象,只需通过加载point点的形式添加各省会城市的标注即可。代码备份一下。

var data = [
     {name: '拉萨', value: 24},
     {name: '上海', value: 25},
     {name: '福州', value: 29},
     {name: '南宁', value: 37},
     {name: '广州', value: 38},
     {name: '太原', value: 39},
     {name: '昆明', value: 39},
     {name: '海口', value: 44},
     {name: '银川', value: 52},
     {name: '南昌', value: 54},
     {name: '西宁', value: 57},
     {name: '呼和浩特', value: 10},
     {name: '成都', value: 58},
     {name: '西安', value: 61},
     {name: '重庆', value: 66},
     {name: '南京', value: 67},
     {name: '贵阳', value: 71},
     {name: '北京', value: 79},
     {name: '乌鲁木齐', value: 84},
     {name: '杭州', value: 84},
     {name: '兰州', value: 99},
     {name: '天津', value: 105},
     {name: '郑州', value: 113},
     {name: '哈尔滨', value: 114},
     {name: '石家庄', value: 147},
     {name: '长沙', value: 175},
     {name: '合肥', value: 229},
     {name: '武汉', value: 273},
     {name: '长春', value: 10},
     {name: '沈阳', value: 10},
     {name: '台北', value: 10},
     {name: '香港', value: 10},
     {name: '澳门', value: 10}
];
var geoCoordMap = {
    '拉萨':["91.11","29.97"],
    '上海':[121.48,31.22],
    '福州':[119.3,26.08],
    '南宁':[108.33,22.84],
    '广州':[113.23,23.16],
    '太原':[112.53,37.87],
    '昆明':[102.73,25.04],
    '海口':[110.35,20.02],
    '银川':[106.27,38.47],
    '南昌':[115.89,28.68],
    '西宁':[101.74,36.56],
    '呼和浩特':[111.65,40.82],
    '成都':[104.06,30.67],
    '西安':[108.95,34.27],
    '重庆':[106.54,29.59],
    '南京':[118.78,32.04],
    '贵阳':[106.71,26.57],
    '北京':[116.46,39.92],
    '乌鲁木齐':[87.68,43.77],
    '杭州':[120.19,30.26],
    '兰州':[103.73,36.03],
    '天津':[117.2,39.13],
    '郑州':[113.65,34.76],
    '哈尔滨':[126.63,45.75],
    '石家庄':[114.48,38.03],
    '长沙':[113,28.21],
    '合肥':[117.27,31.86],
    '武汉':[114.31,30.52],
    '长春':[125.33,43.82],
    '沈阳':[123.43,41.79],
    '台北':[121.54,25.06],
    '香港':[114.16,22.29],
    '澳门':[113.545,22.1979]
};

var convertData = function (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;
};


myChart.setOption(option = {
    title : {
        text: '全国数据请求量',
        subtext: 'Show Data',
        left: 'center',
        top: 'top',
        textStyle: {
            color: '#fff'
        }
    },
    tooltip: {
        trigger: 'item',
        formatter: function(params){
            return params.name
        }
    },
    legend: {
        left: 'left',
        data: ['强', '中', '弱'],
        textStyle: {
            color: '#ccc'
        }
    },
    backgroundColor: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 1,
        y2: 1,
        colorStops: [{
            offset: 0, color: '#0f2c70' // 0% 处的颜色
        }, {
            offset: 1, color: '#091732' // 100% 处的颜色
        }],
        globalCoord: false // 缺省为 false
    },
    geo: {
        map: 'china',
        show: true,
        roam: true,
        label: {
            emphasis: {
                show: false
            }
        },
        itemStyle: {
            normal: {
                areaColor: '#091632',
                borderColor: '#1773c3',
                shadowColor: '#1773c3',
                shadowBlur: 20
            }
        }
    },
    series: [
        {
            name: '城市',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: convertData(data),
            symbolSize: function (val) {
                return 5;
            },
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: true,
                    color: 'white'
                },
                emphasis: {
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    color: '#EF8A8F'
                }
            }
        }
    ]
});

结果如图所示:

猜你喜欢

转载自blog.csdn.net/zhengjie0722/article/details/81777029