品牌TOP在地图上的显示ECharts Gallery

20:11:45图表已生成
代码
const geoCoordMap = {
    '北京': [116.46, 39.92],
    '上海': [121.48, 31.22],
    '天津': [117.2, 39.13],
    '重庆': [106.54, 29.59],
    '香港': [113.2, 22.75],
    '澳门': [114.52, 22.86],
    '台北': [121.55, 25.05],
    '石家庄': [114.48, 38.03],
    '唐山': [118.02, 39.63],
    '秦皇岛': [119.57, 39.95],
    '邯郸': [114.47, 36.6],
    '鄂尔多斯': [109.781327, 39.608266],
    '舟山': [122.207216, 29.985295],
    '齐齐哈尔': [123.97, 47.33],
    '青岛': [120.33, 36.07],
    '泉州': [118.58, 24.93],
    '日照': [119.46, 35.42],
    '南通': [121.05, 32.08],
    '拉萨': [91.11, 29.97],
    '梅州': [116.1, 24.55],
    '攀枝花': [101.718637, 26.582347],
    '威海': [122.1, 37.5],
    '承德': [117.93, 40.97],
    '潮州': [116.63, 23.68],
    '烟台': [121.39, 37.52],
    '福州': [119.3, 26.08],
    '厦门': [118.1, 24.46],
    '莆田': [119.01, 25.46],
    '漳州': [117.65, 24.52],
    '张家口': [114.87, 40.82],
    '湖州': [120.1, 30.86],
    '汕头': [116.69, 23.39],
    '宁波': [121.56, 29.86],
    '湛江': [110.359377, 21.270708],
    '连云港': [119.16, 34.59],
    '葫芦岛': [120.836932, 40.711052],
    '东莞': [113.75, 23.04],
    '南宁': [108.33, 22.84],
    '惠州': [114.4, 23.09],
    '蓬莱': [120.75, 37.8],
    '广州': [113.23, 23.16],
    '延安': [109.47, 36.6],
    '太原': [112.53, 37.87],
    '中山': [113.38, 22.52],
    '昆明': [102.73, 25.04],
    '丽江': [100.23, 26.86],
    '盘锦': [122.070714, 41.119997],
    '深圳': [114.07, 22.62],
    '珠海': [113.52, 22.3],
    '咸阳': [108.72, 34.36],
    '佛山': [113.11, 23.05],
    '江门': [113.06, 22.61],
    '大连': [121.62, 38.92],
    '临汾': [111.5, 36.08],
    '沈阳': [123.38, 41.8],
    '苏州': [120.62, 31.32],
    '茂名': [110.88, 21.68],
    '嘉兴': [120.76, 30.77],
    '长春': [125.35, 43.88],
    '银川': [106.27, 38.47],
    '张家港': [120.555821, 31.875428],
    '锦州': [121.15, 41.13],
    '南昌': [115.89, 28.68],
    '景德镇': [117.187, 29.27],
    '柳州': [109.4, 24.33],
    '吉林': [126.57, 43.87],
    '泸州': [105.39, 28.91],
    '西宁': [101.74, 36.56],
    '呼和浩特': [111.65, 40.82],
    '成都': [104.06, 30.67],
    '大同': [113.3, 40.12],
    '镇江': [119.44, 32.2],
    '桂林': [110.28, 25.29],
    '张家界': [110.479191, 29.117096],
    '西安': [108.95, 34.27],
    '牡丹江': [129.58, 44.6],
    '佳木斯': [130.33, 46.81],
    '遵义': [106.9, 27.7],
    '绍兴': [120.58, 30.01],
    '扬州': [119.42, 32.39],
    '常州': [119.95, 31.79],
    '潍坊': [119.1, 36.62],
    '台州': [121.420757, 28.656386],
    '南京': [118.78, 32.04],
    '贵阳': [106.71, 26.57],
    '无锡': [120.29, 31.59],
    '本溪': [123.73, 41.3],
    '马鞍山': [118.48, 31.56],
    '宝鸡': [107.15, 34.38],
    '徐州': [117.2, 34.26],
    '包头': [110, 40.58],
    '绵阳': [104.73, 31.48],
    '乌鲁木齐': [87.68, 43.77],
    '克拉玛依': [84.77, 45.59],
    '吐鲁番': [89.19, 42.96],
    '杭州': [120.19, 30.26],
    '淄博': [118.05, 36.78],
    '鞍山': [122.85, 41.12],
    '开封': [114.35, 34.79],
    '济南': [117, 36.65],
    '温州': [120.65, 28.01],
    '九江': [115.97, 29.71],
    '兰州': [103.73, 36.03],
    '沧州': [116.83, 38.33],
    '郑州': [113.65, 34.76],
    '哈尔滨': [126.63, 45.75],
    '芜湖': [118.38, 31.33],
    '荆州': [112.239741, 30.335165],
    '宜昌': [111.3, 30.7],
    '洛阳': [112.44, 34.7],
    '株洲': [113.16, 27.83],
    '保定': [115.48, 38.85],
    '湘潭': [112.91, 27.87],
    '金华': [119.64, 29.12],
    '岳阳': [113.09, 29.37],
    '长沙': [113, 28.21],
    '廊坊': [116.7, 39.53],
    '合肥': [117.27, 31.86],
    '武汉': [114.31, 30.52],
    '襄阳': [112.13, 32.01],
    '黄冈': [114.89, 30.46],
    '孝感': [113.92, 30.93],
    '蚌埠': [117.39, 32.92],
    '大庆': [125.03, 46.58],
    '海口': [110.35, 20.02],
    '三亚': [109.511909, 18.252847],
    '三沙': [112.365072, 16.846693],

    '黄山': [118.174807, 30.133213],
    '庐山': [115.961218, 29.548669],
    '雁荡山': [121.082565, 28.389185],

    '泰山': [117.122594, 36.251522],
    '华山': [110.088721, 34.5322],
    '衡山': [112.726471, 27.257672],
    '恒山': [113.739308, 39.678923],
    '嵩山': [113.035959, 34.488748],

    '五台山': [113.596796, 38.984466],
    '普陀山': [122.390477, 29.983976],
    '峨眉山': [103.447858, 29.584531],
    '九华山': [117.810475, 30.488241],

    '武当山': [117.810475, 30.488241],
    '龙虎山': [116.995158, 28.078519],

    '天山': [93.12248, 43.478822],
    '昆仑山': [81.671941, 35.478739],
    '长白山': [128.094283, 42.112236],
    '武夷山': [117.993295, 27.631218],
    '青城山': [103.579549, 30.903367],
    '终南山': [109.072308, 33.948998],

    '万里长城': [116.016022, 40.364252],
    '三峡大坝': [111.059428, 30.840983],
    '日月潭': [120.921823, 23.869305],
    '秦始皇兵马俑': [109.291943, 34.394395],

    '河北': [114.336873, 38.21885],
    '河南': [113.453802, 34.895028],
    '云南': [102.599397, 25.248948],
    '辽宁': [123.241164, 41.948112],
    '黑龙江': [126.479088, 45.985284],
    '湖南': [112.800698, 28.474291],
    '安徽': [117.170056, 31.99595],
    '山东': [116.912494, 36.812038],
    '新疆': [87.476819, 43.894927],
    '江苏': [118.715429, 32.246466],
    '浙江': [120.040035, 30.350837],
    '江西': [115.808656, 28.774611],
    '湖北': [114.116105, 30.764814],
    '广西': [108.265765, 23.020403],
    '甘肃': [103.66644, 36.218003],
    '山西': [112.349964, 38.044464],
    '内蒙古': [111.614073, 40.951504],
    '陕西': [108.780889, 34.408508],
    '福建': [119.156964, 26.182279],
    '贵州': [106.499624, 26.844365],
    '广东': [113.233035, 23.224606],
    '青海': [101.605943, 36.752842],
    '西藏': [90.972306, 29.838888],
    '四川': [103.924003, 30.796585],
    '宁夏': [106.094884, 38.624116],
    '海南': [110.179083, 19.921006],
    '台湾': [121.36464, 25.248948]
};
const icons = ['http://img30.360buyimg.com/popshop/jfs/t2989/240/151377693/3895/30ad9044/574d36dbN262ef26d.jpg',
    'http://img30.360buyimg.com/popshop/jfs/t3511/131/31887105/4943/48f83fa9/57fdf4b8N6e95624d.jpg',
    'http://img30.360buyimg.com/popshop/jfs/t2989/240/151377693/3895/30ad9044/574d36dbN262ef26d.jpg',
    'http://img30.360buyimg.com/popshop/jfs/t5662/36/8888655583/7806/1c629c01/598033b4Nd6055897.jpg',
    'http://img30.360buyimg.com/popshop/jfs/t2701/34/484677369/7439/ee13e8fa/5716e2c4Nc925baf3.jpg',
    'http://img30.360buyimg.com/popshop/jfs/t2398/233/975959106/6263/a786f5b8/563b33ffN9c288c6c.jpg',
    'http://img30.360buyimg.com/popshop/jfs/t2572/102/189476501/7717/16cc5814/563b33d4N6c59780c.jpg',
    'http://img30.360buyimg.com/popshop/jfs/t2119/133/2264148064/4303/b8ab3755/56b2f385N8e4eb051.jpg'


];

const convertData = function(data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
            res.push({
                value: geoCoord.concat(data[i].value),
                name: data[i].name,
                symbol: 'image://' + icons[_.random(0, icons.length)],
                symbolSize: [50, 20],
                top: []
            });
        }
    }
    return res;
};

const randomData = () => Math.round(Math.random() * 1000)

const mock = [{
    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()
}, {
    name: '澳门',
    value: randomData()
}];

option = {
    backgroundColor: '#404a59',
    title: {
        text: '品牌TOP',
        subtext: '纯属虚构',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        triggerOn: 'click',
        padding: [5, 10],
        showDelay: 100,
        backgroundColor: 'rgba(37,42,48, 0.8)',
        extraCssText: 'box-shadow: 0 0 5px rgba(0,0,0,0.9)',
        formatter: (data) => {
            let _html = '';
            if (!data.data.top.length) return `<img src='https://misc.360buyimg.com/mtd/pc/index/gb/images/loading.gif'/>`;
            data.data.top.forEach((item) => {
                _html += `<div style="width:100%">${item.name} :<span style="padding-left:8px;float:right"> ${item.value}</span></div>`
            })
            return _html
        }
    },
    geo: {
        map: 'china',
        label: {
            emphasis: {
                show: false
            }
        },
        roam: true,
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    toolbox: {
        show: true,
        orient: 'vertical',
        left: 'right',
        top: 'center',
        feature: {
            dataView: {
                readOnly: false
            },
            saveAsImage: {}
        }
    },
    series: [{
        name: 'a',
        type: 'scatter',
        coordinateSystem: 'geo',
        roam: true,
        label: {
            normal: {
                show: true,
                formatter: function(params) {
                    return params.name;
                },
                position: 'left',
                padding: [4, 5],
                borderRadius: 3,
                borderWidth: 1,
                borderColor: 'rgba(0,0,0,0.5)',
                color: '#ddd',
                fontSize: 12,
            },
            emphasis: {
                show: true
            }
        },
        data: convertData(mock)

    }]
};

setTimeout(function() {

    myChart.on('click', function(params) {
        /**
         * 异步获取 详细 top
         */
        console.log(params)
        const newData = [{
            name: 'apple',
            value: '2,234'
        }, {
            name: '小米',
            value: '1,768'
        }, {
            name: '华为',
            value: '434'
        }, {
            name: 'oppo',
            value: '37'
        }, {
            name: '魅族',
            value: '77'
        }];
        option.series[0].data[params.dataIndex].top = newData;
        setTimeout(() => {
            myChart.setOption(option, true)
        }, 2000)

    });

}, 0);
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
