vue+echarts实现流动中国地图(二)

本文介绍了如何使用Vue和ECharts组件实现一个流动的中国地图效果。作者分享了在`mounted()`生命周期钩子中配置代码的过程,并提到了初始化div的方法。虽然对整个代码的理解还不够深入,但已成功运行并显示了预期效果。
摘要由CSDN通过智能技术生成

1.接上一章,整理出来网上的一个例子,那个例子的截图如下:

在这里插入图片描述
2.之前因为没有整理好代码一直没有实现这个例子。现在整理好了。接上一章写,在mounted(){}中写如下:

mounted(){
        let data = [
            { "name": "北京", "dataCount": [0, 1, 0, 0, 0, 0, 1], "id": "247" }, {
            "name": "天津",
            "dataCount": [0, 0, 0, 0, 0, 0, 0],
            "id": "248"
        }, { "name": "河北", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "249" }, {
            "name": "山西",
            "dataCount": [0, 0, 0, 0, 0, 0, 0],
            "id": "250"
        }, { "name": "内蒙古", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "251" }, {
            "name": "辽宁",
            "dataCount": [0, 0, 0, 0, 0, 0, 0],
            "id": "252"
        }, { "name": "吉林", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "253" }, {
            "name": "黑龙江",
            "dataCount": [0, 0, 0, 0, 0, 0, 0],
            "id": "254"
        }, { "name": "上海", "dataCount": [0, 1, 0, 0, 0, 0, 0], "id": "255" }, {
            "name": "江苏",
            "dataCount": [0, 0, 0, 0, 0, 0, 0],
            "id": "256"
        }, { "name": "浙江", "dataCount": [0, 1, 0, 0, 0, 0, 0], "id": "257" }, {
            "name": "安徽",
            "dataCount": [0, 0, 0, 0, 0, 0, 0],
            "id": "258"
        }, { "name": "福建", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "259" }, {
            "name": "江西",
            "dataCount": [0, 0, 0, 0, 0, 0, 0],
            "id": "260"
        }, { "name": "山东", "dataCount": [14235, 820, 0, 35, 0, 0, 4], "id": "261" }, {
            "name": "河南",
            "dataCount": [0, 0, 0, 0, 0, 0, 0],
            "id": "262"
        }, { "name": "湖北", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "263" }, {
            "name": "湖南",
            "dataCount": [0, 0, 0, 0, 0, 0, 0],
            "id": "264"
        }, { "name": "广东", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "265" }, {
            "name": "广西",
            "dataCount": [0, 0, 0, 0, 0, 0, 0],
            "id": "266"
        }, { "name": "海南", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "267" }, {
            "name": "重庆",
            "dataCount": [0, 0, 0, 0, 0, 0, 0],
            "id": "268"
        }, { "name": "四川", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "269" }, {
            "name": "贵州",
            "dataCount": [0, 0, 0, 0, 0, 0, 0],
            "id": "270"
        }, { "name": "云南", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "271" }, {
            "name": "西藏",
            "dataCount": [0, 0, 0, 0, 0, 0, 0],
            "id": "272"
        }, { "name": "陕西", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "273" }, {
            "name": "甘肃",
            "dataCount": [0, 0, 0, 0, 0, 0, 0],
            "id": "274"
        }, { "name": "青海", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "275" }, {
            "name": "宁夏",
            "dataCount": [0, 0, 0, 0, 0, 0, 0],
            "id": "276"
        }, { "name": "新疆", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "277" }, {
            "name": "台湾",
            "dataCount": [0, 0, 0, 0, 0, 0, 0],
            "id": "278"
        }, { "name": "香港", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "279" }, {
            "name": "澳门",
            "dataCount": [0, 0, 0, 0, 0, 0, 0],
        }]
        let chinaGeoCoordMap ={
                    '黑龙江': [127.9688, 45.368,1],
                    '内蒙古': [110.3467, 41.4899,1],
                    '吉林': [125.8154, 44.2584,1],
                    '北京': [116.4551, 40.2539,2],
                    '辽宁': [123.1238, 42.1216,1],
                    '河北': [114.4995, 38.1006,1],
                    '天津': [117.4219, 39.4189,1],
                    '山西': [112.3352, 37.9413,1],
                    '陕西': [109.1162, 34.2004,1],
                    '甘肃': [103.5901, 36.3043,1],
                    '宁夏': [106.3586, 38.1775,1],
                    '青海': [101.4038, 36.8207,1],
                    '新疆': [87.9236, 43.5883,1],
                    '西藏': [91.11, 29.97,1],
                    '四川': [103.9526, 30.7617,1],
                    '重庆': [108.384366, 30.439702,1],
                    '山东': [117.1582, 36.8701,1],
                    '河南': [113.4668, 34.6234,1],
                    '江苏': [118.8062, 31.9208,1],
                    '安徽': [117.29, 32.0581,1],
                    '湖北': [114.3896, 30.6628,1],
                    '浙江': [119.5313, 29.8773,1],
                    '福建': [119.4543, 25.9222,1],
                    '江西': [116.0046, 28.6633,1],
                    '湖南': [113.0823, 28.2568,1],
                    '贵州': [106.6992, 26.7682,1],
                    '云南': [102.9199, 25.4663,1],
                    '广东': [113.12244, 23.009505,1],
                    '广西': [108.479, 23.1152,1],
                    '海南': [110.3893, 19.8516,1],
                    '上海': [121.4648, 31.2891,1],
                    '台湾': [120.991676054688, 24.7801149726563,1],
                    '澳门': [113.33, 22.11,1],
         
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值