vue项目中通过echarts实现地图路径展示

最新推荐文章于 2024-08-05 05:00:00 发布

huxiaowen_

最新推荐文章于 2024-08-05 05:00:00 发布

阅读量2.9k

点赞数 2

本文链接：https://blog.csdn.net/huxiaowen_/article/details/106502305

版权

本文介绍如何在Vue项目中利用Echarts库创建一个显示地图路径的功能。首先，需要设置一个容器来放置地图，并引入china.js地图数据。然后，创建一个map-options.js文件配置地图选项。最后，展示实现效果。

摘要由CSDN通过智能技术生成

首先先定义装地图的盒子，还需先引入china.js；新建一个map-options.js如下
在这里插入图片描述

//map-option.js
var cities = [{
    "name": "广东",
    "value": [113.2563, 23.1297]
}, {
    "name": "河南",
    "value": [113.6806, 34.7553]
}, {
    "name": "山东",
    "value": [117.001, 36.6885]
}, {
    "name": "辽宁",
    "value": [123.439, 41.8068]
}, {
    "name": "江苏",
    "value": [118.8046, 32.0641]
}, {
    "name": "浙江",
    "value": [120.2004, 30.2793]
}, {
    "name": "陕西",
    "value": [108.9523, 34.3366]
}, {
    "name": "上海",
    "value": [121.4771, 31.2278]
}, {
    "name": "台湾",
    "value": [120.8961, 23.9694]
}, {
    "name": "天津",
    "value": [117.2081, 39.1428]
}, {
    "name": "北京",
    "value": [116.3852, 39.9156]
}, {
    "name": "江西",
    "value": [115.8545, 28.683]
}, {
    "name": "湖南",
    "value": [112.9603, 28.223]
}, {
    "name": "吉林",
    "value": [126.5907, 43.8725]
}, {
    "name": "四川",
    "value": [104.0712, 30.6613]
}, {
    "name": "山西",
    "value": [112.559, 37.8746]
}, {
    "name": "湖北",
    "value": [114.2973, 30.5921]
}, {
    "name": "云南",
    "value": [102.7176, 25.0482]
}, {
    "name": "福建",
    "value": [119.3082, 26.0718]
}, {
    "name": "广西",
    "value": [108.3592, 22.8205]
}, {
    "name": "黑龙江",
    "value": [126.6484, 45.7622]
}, {
    "name": "新疆",
    "value": [87.6007, 43.8223]
}, {
    "name": "重庆",
    "value": [106.5343, 29.5813]
}, {
    "name": "宁夏",
    "value": [106.2196, 38.4879]
}, {
    "name": "河北",
    "value": [114.513, 38.0648]
}, {
    "name": "安徽",
    "value": [117.2868, 31.8534]
}, {
    "name": "甘肃",
    "value": [103.8428, 36.0568]
}, {
    "name": "青海&