在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     };

以上就是全部步骤的代码，有些地方还不是很清楚，但到达想要的效果后再继续研究。

巴特西

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

最新文章

热门文章