Vue中使用echarts生成地图步骤详解

1.创建容器元素
javascript 复制代码
 <div class="map" id="map" style="width:1000px;height:1000px;"></div>
2.Vue项目引入world.js(我这里的演示是世界地图,不同地图对应js文件不一样)

world.js文件包含:

  1. 地理坐标数据world.js 文件中包含了各个国家和地区的地理坐标数据,这些数据用于在地图上准确地定位和绘制每个国家和地区的形状。

  2. 地图形状:文件中还包含了世界地图上各个国家和地区的轮廓形状数据,这些数据用于在图表中绘制出各个国家和地区的边界。

  3. 地区名称映射world.js 还可能包含地区名称与代码之间的映射关系,这样在配置 ECharts 时可以通过地区名称来引用具体的地理区域。

world.json 文件包含:

  1. 地理区域的名称和代码:文件中还包含了国家和地区的名称以及对应的代码,这些信息用于在地图上标识和区分不同的区域。
javascript 复制代码
对应资源已上传,可自行放置位置
import '@/common/map/world.js' // 引入世界地图
import map from '@/common/map/world.json'
3.引入完毕使用
javascript 复制代码
export default {
    data() {
        return {
            nameMap: map.namemap
        }
    },
    mounted() {
        this.drawMap()

    },
    methods: {
        drawMap() {
            var myChart = this.$echarts.init(document.getElementById('map'));
            let option = {
                // backgroundColor: "#02AFDB",
                title: {
                    left: '40%',
                    top: '0px',
                    textStyle: {
                        color: '#02AFDB',
                        opacity: 0.7
                    }
                },
                visualMap: {
                    max: 390000,
                    min: 100,
                    type: 'continuous', // continuous 类型为连续型  piecewise 类型为分段型
                    show: false, // 是否显示 visualMap-continuous 组件 如果设置为 false,不会显示,但是数据映射的功能还存在
                    // 文本样式
                    textStyle: {
                        fontSize: 14,
                        color: 'black'
                    },
                    realtime: false, // 拖拽时,是否实时更新
                    calculable: false, // 是否显示拖拽用的手柄
                    // 定义 在选中范围中 的视觉元素
                    inRange: {
                        color: ['#5bc2e7', '#6980c5', '#70dfdf', '#f7f1ee', '#3390FF'] // 图元的颜色
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: function (params) {
                        console.log(params)
                        if (params.name) {
                            return params.name + ' : ' + (isNaN(params.value) ? 0 : parseInt(params.value));
                        }
                    }
                },
                series: [{
                    type: 'map',
                    roam: true,
                    mapType: 'world',
                    zoom: 1.2,
                    data: [
                        { name: '俄罗斯', value: 388320 },
                        { name: '乌克兰', value: 368971 },
                        { name: '美国', value: 81713 },
                        { name: '英国', value: 31238 },
                        { name: '德国', value: 22838 },
                        { name: '波兰', value: 14551 },
                        { name: '中国', value: 14290 },
                        { name: '法国', value: 14148 },
                        { name: '土耳其', value: 14031 },
                        { name: '白俄罗斯', value: 8713 },
                        { name: '加拿大', value: 7761 },
                        { name: '以色列', value: 7368 },
                        { name: '澳大利亚', value: 4870 },
                        { name: '意大利', value: 4345 },
                        { name: '比利时', value: 4291 },
                        { name: '日本', value: 4167 },
                        { name: '芬兰', value: 3810 },
                        { name: '瑞士', value: 3541 },
                        { name: '匈牙利', value: 3498 },
                        { name: '立陶宛', value: 3423 },
                        { name: '瑞典', value: 3109 },
                        { name: '叙利亚', value: 2938 },
                        { name: '伊朗', value: 2894 },
                        { name: '爱沙尼亚', value: 2546 },
                        { name: '摩尔多瓦', value: 2399 },
                        { name: '拉脱维亚', value: 2236 },
                        { name: '荷兰', value: 2126 },
                        { name: '印度', value: 1954 },
                        { name: '爱尔兰', value: 1858 },
                        { name: '西班牙', value: 1823 },
                        { name: '挪威', value: 1718 },
                        { name: '奥地利', value: 1697 },
                        { name: '斯洛伐克', value: 1675 },
                        { name: '印度尼西亚', value: 1513 },
                        { name: '捷克共和国', value: 1494 },
                        { name: '葡萄牙', value: 1433 },
                        { name: '尼日利亚', value: 1306 },
                        { name: '巴基斯坦', value: 1277 },
                        { name: '阿富汗', value: 1241 },
                        { name: '丹麦', value: 1218 },
                        { name: '希腊', value: 1205 },
                        { name: '保加利亚', value: 1165 },
                        { name: '新西兰', value: 1112 },
                        { name: '卡塔尔', value: 920 },
                        { name: '韩国', value: 859 },
                        { name: '埃及', value: 835 },
                        { name: '伊拉克', value: 828 },
                        { name: '哈萨克斯坦', value: 731 },
                        { name: '罗马教廷(梵蒂冈城)', value: 725 },
                        { name: '南非', value: 714 },
                        { name: '沙特阿拉伯', value: 708 },
                        { name: '菲律宾', value: 658 },
                        { name: '墨西哥', value: 650 },
                        { name: '阿塞拜疆', value: 582 },
                        { name: '朝鲜', value: 573 },
                        { name: '巴西', value: 567 },
                        { name: '阿拉伯联合酋长国', value: 553 },
                        { name: '古巴', value: 551 },
                        { name: '越南', value: 522 },
                        { name: '亚美尼亚', value: 518 },
                        { name: '孟加拉国', value: 499 },
                        { name: '委内瑞拉', value: 471 },
                        { name: '被占领巴勒斯坦领土', value: 447 },
                        { name: '塞尔维亚', value: 436 },
                        { name: '新加坡', value: 427 },
                        { name: '摩洛哥', value: 415 },
                        { name: '肯尼亚', value: 399 },
                        { name: '马来西亚', value: 378 },
                        { name: '阿尔巴尼亚', value: 367 },
                        { name: '塔吉克斯坦', value: 346 },
                        { name: '塞浦路斯', value: 322 },
                        { name: '斐济', value: 308 },
                        { name: '利比亚', value: 291 },
                        { name: '黎巴嫩', value: 283 },
                        { name: '也门', value: 276 },
                        { name: '泰国', value: 274 },
                        { name: '阿根廷', value: 269 },
                        { name: '卢森堡', value: 268 },
                        { name: '加纳', value: 252 },
                        { name: '克罗地亚', value: 249 },
                        { name: '乔丹', value: 232 },
                        { name: '土库曼斯坦', value: 216 },
                        { name: '乌兹别克斯坦', value: 216 },
                        { name: '苏丹', value: 212 },
                        { name: '塞内加尔', value: 205 },
                        { name: '厄立特里亚', value: 195 },
                        { name: '津巴布韦', value: 190 },
                        { name: '智利', value: 187 },
                        { name: '尼泊尔', value: 180 },
                        { name: '冰岛', value: 178 },
                        { name: '缅甸', value: 176 },
                        { name: '阿尔及利亚', value: 175 },
                        { name: '吉尔吉斯斯坦', value: 157 },
                        { name: '尼加拉瓜', value: 157 },
                        { name: '哥伦比亚', value: 156 },
                        { name: '斯里兰卡', value: 152 },
                        { name: '马耳他', value: 142 },
                        { name: '卢旺达', value: 138 },
                        { name: '埃塞俄比亚', value: 113 },
                        { name: '索马里', value: 110 },
                        { name: '柬埔寨', value: 108 },
                        { name: '马里', value: 105 },
                        { name: '科威特', value: 99 },
                        { name: '秘鲁', value: 83 },
                        { name: '蒙古', value: 79 },
                        { name: '厄瓜多尔', value: 77 },
                        { name: '阿曼', value: 74 },
                        { name: '突尼斯', value: 71 },
                        { name: '马其顿', value: 68 },
                        { name: '乌干达', value: 66 },
                        { name: '文莱达鲁萨兰国', value: 61 },
                        { name: '马尔代夫', value: 57 },
                        { name: '危地马拉', value: 56 },
                        { name: '巴林', value: 55 },
                        { name: '摩纳哥', value: 55 },
                        { name: '坦桑尼亚', value: 51 },
                        { name: '中非共和国', value: 50 },
                        { name: '乌拉圭', value: 50 },
                        { name: '莫桑比克', value: 49 },
                        { name: '马拉维', value: 48 },
                        { name: '巴拿马', value: 48 },
                        { name: '乍得', value: 45 },
                        { name: '多米尼加共和国', value: 43 },
                        { name: '喀麦隆', value: 40 },
                        { name: '伯利兹', value: 35 },
                        { name: '加蓬', value: 35 },
                        { name: '尼日尔', value: 34 },
                        { name: '刚果', value: 33 },
                        { name: '百慕大群岛', value: 31 },
                        { name: '圭亚那', value: 31 },
                        { name: '赞比亚', value: 31 },
                        { name: '刚果', value: 30 },
                        { name: '佐治亚州', value: 29 },
                        { name: '洪都拉斯', value: 29 },
                        { name: '利比里亚', value: 29 },
                        { name: '塞舌尔', value: 29 },
                        { name: '所罗门群岛', value: 27 },
                        { name: '格林纳达', value: 26 },
                        { name: '牙买加', value: 26 },
                        { name: '巴拉圭', value: 26 },
                        { name: '哥斯达黎加', value: 25 },
                        { name: '圣基茨和尼维斯', value: 24 },
                        { name: '纳米比亚', value: 22 },
                        { name: '安哥拉', value: 21 },
                        { name: '科特迪瓦(科特迪瓦)', value: 21 },
                        { name: '老挝', value: 20 },
                        { name: '博茨瓦纳', value: 19 },
                        { name: '布基纳法索', value: 18 },
                        { name: '玻利维亚', value: 18 },
                        { name: '巴巴多斯', value: 18 },
                        { name: '罗马尼亚', value: 18 },
                        { name: '吉布提', value: 17 },
                        { name: '塞拉利昂', value: 17 },
                        { name: '不丹', value: 16 },
                        { name: '萨尔瓦多', value: 16 },
                        { name: '巴哈马', value: 13 },
                        { name: '圣卢西亚', value: 12 },
                        { name: '圣文森特和格林纳丁斯', value: 12 },
                        { name: '密克罗尼西亚', value: 9 },
                        { name: '特立尼达和多巴哥', value: 9 },
                        { name: '赤道几内亚', value: 8 },
                        { name: '海地', value: 8 },
                        { name: '帕劳', value: 8 },
                        { name: '毛里塔尼亚', value: 7 },
                        { name: '布隆迪', value: 6 },
                        { name: '科摩罗', value: 6 },
                        { name: '开曼群岛', value: 6 },
                        { name: '冈比亚', value: 6 },
                        { name: '马达加斯加', value: 6 },
                        { name: '毛里求斯', value: 6 },
                        { name: '多米尼加', value: 5 },
                        { name: '几尼', value: 5 },
                        { name: '基里巴斯', value: 5 },
                        { name: '汤加', value: 5 },
                        { name: '列支敦士登', value: 3 },
                        { name: '莱索托', value: 3 },
                        { name: '多哥', value: 3 },
                        { name: '瓦努阿图', value: 3 },
                        { name: '安提瓜和巴布达', value: 2 },
                        { name: '几内亚比绍', value: 2 },
                        { name: '中国香港特别行政区', value: 1 },
                        { name: '中国澳门特别行政区', value: 1 },
                        { name: '巴布亚新几内亚', value: 1 },
                        { name: '苏里南', value: 1 },
                    ],
                    nameMap: this.nameMap,
                    symbolSize: 12,
                    label: {
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: true,
                            textStyle: { color: 'white' }
                        }
                    },
                    itemStyle: {
                        borderWidth: 0.5, // 描边线宽 为 0 时无描边
                        borderColor: 'rgba(112,187,252,.5)', // 图形的描边颜色 支持的颜色格式同 color,不支持回调函数
                        borderType: 'solid', // rgba(2,37,101,.5)描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'
                        emphasis: {
                            areaColor: 'rgba(2,37,101,.8)',
                            lable: { color: "white" },
                            textStyle: { color: "black" }
                        }
                    }
                }],
            };
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });

        }
    }
}
图示
相关推荐
李长渊哦4 小时前
深入理解 JavaScript 中的全局对象与 JSON 序列化
开发语言·javascript·json
Senar6 小时前
如何判断浏览器是否开启硬件加速
前端·javascript·数据可视化
codingandsleeping6 小时前
一个简易版无缝轮播图的实现思路
前端·javascript·css
拉不动的猪7 小时前
简单回顾下插槽透传
前端·javascript·面试
爱吃鱼的锅包肉8 小时前
Flutter路由模块化管理方案
前端·javascript·flutter
风清扬雨8 小时前
Vue3具名插槽用法全解——从零到一的详细指南
前端·javascript·vue.js
海盗强9 小时前
Vue 3 常见的通信方式
javascript·vue.js·ecmascript
oscar9999 小时前
JavaScript与TypeScript
开发语言·javascript·typescript
橘子味的冰淇淋~10 小时前
【解决】Vue + Vite + TS 配置路径别名成功仍爆红
前端·javascript·vue.js
leluckys10 小时前
flutter 专题 六十三 Flutter入门与实战作者:xiangzhihong8Fluter 应用调试
前端·javascript·flutter