欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  科技

在VUE里实现一个简单的地图

程序员文章站 2022-03-27 07:56:59
如何在vue里面实现一个简单的中国地图,并且实现一些简单的个性化修改。 下面是最终实现的效果图。透明的地图加一个背景图。 1、在你的项目里安装echarts的依赖 npm install echarts -s (使用淘宝镜像安装也行) 2、引入echarts 全局引入和局部引入根据自己的情况来定 全 ......

如何在vue里面实现一个简单的中国地图,并且实现一些简单的个性化修改。

下面是最终实现的效果图。透明的地图加一个背景图。

在VUE里实现一个简单的地图

1、在你的项目里安装echarts的依赖

npm install echarts -s

(使用淘宝镜像安装也行)

2、引入echarts

全局引入和局部引入根据自己的情况来定

全局引入:

在main.js里面加入,将其挂载的vue的原型上。

1 import echarts from 'echarts'
2 vue.prototype.$echarts = echarts

局部引入:

直接在用到的地方引入即可 “ import echarts from 'echarts'  ”

3、重点:

地图和echarts的其他图表不太一样,需要引入地图资源(如果引入了地图的js就会自动注册,引的是json文件的话就需要手动注册到echarts上),如果没有引的话是显示不出地图的。而这个也有很多坑。

分享一下china.js的下载链接 。

链接:https://pan.baidu.com/s/1qyyyyjrbuuqzede3irvnzw
提取码:566n

用于不是用vue开发的小伙伴们用,用vue的话可以在node_modules/echarts/map/js/china.js找到这个文件。然后开始引入china.js。

1 import "../../node_modules/echarts/map/js/china.js" //正常运行
2 import "../china.js" //报错

这点我还没弄清楚,两个一模一样的文件,一个是我本地自己下载的,一个是安装echarts的时候安在node_modules里面的。为什么本地下载的就会报错,报china.js里面的this有错。在没有打包的情况下引入node_modules里面的是可以正常运行的,打了包过后的情况我还没测试到,后续可以更新一下。

4、配置地图

在基础工作都做好后开始给我们的地图写配置,以达到我们想要的效果。

给地图准备一个dom

<div id="map" style="width: 500px;height: 500px;"></div>

配置

 1 export default {
 2         name: "home",
 3         mounted() {
 4             this.map();
 5         },
 6         methods: {
 7             map() {
 8                 let map = echarts.init(document.getelementbyid('map'));
 9                 // 绘制图表
10                 map.setoption({
11                     series: [{
12                         name: '数据',
13                         type: 'map',
14                         maptype: 'china',
15                         top:'5%',
16                         //roam: true, //是否需要缩放地图
17                         label: {
18                             normal: {
19                                 show: false //省份名称  
20                             },
21                             emphasis: {
22                                 show: false
23                             }
24                         },
25                         itemstyle: {
26                             normal: {
27                                  bordercolor: 'rgba(0, 0, 0, 0.3)',//区域描边颜色
28                                 color:'rgba(0, 0, 0,0)',//区域名字颜色,这里是透明
29                                 areacolor:'rgba(0, 0, 0,0)',//区域颜色 透明
30                             },
31                         },
32                         emphasis:{
33                             itemstyle: {
34                                 areacolor:'rgba(111, 151, 242,0.3)',//高亮区域的颜色
35                             },
36                         },
37                         data: [{
38                                 name: '北京',//默认显示区域的名字
39                                 selected: true//高亮显示
40                             },
41                             {
42                                 name: '天津',
43                                 selected: true
44                             },
45                             {
46                                 name: '上海',
47                                 selected: true
48                             },
49                             {
50                                 name: '重庆',
51                                 selected: true
52                             },
53                             {
54                                 name: '河北',
55                                 selected: true
56                             },
57                             {
58                                 name: '河南',
59                                 selected: true
60                             },
61                             {
62                                 name: '四川',
63                                 selected: true
64                             }
65                         ]
66                     }]
67 
68                 });
69             }
70         }
71     };

以上就是全部步骤的代码,仅限于初步实现。