在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里实现一个简单的中国地图的更多相关文章
- 一个让echarts中国地图包含省市轮廓的技巧
背景知识及应用简介 本文主要介绍一个使用ECharts地图组件的取巧方法,该技巧源于实际需求中遇到的问题,一般没有该需求的话这个技巧也是用不到的.有前端基础和以及对ECharts有了解的人基本可以读懂 ...
- 使用echarts简单制作中国地图,echarts中国地图
网站需要一张中国地图,并且鼠标经过某个省份,该省份的省份名字显示,而且该省份的地区会变色显示. 第一种方法: 将每个省份的图片定位(先隐藏),拼合成一张中国地图,然后再定位省份名称,鼠标经过省份名字, ...
- 使用Vue自己做一个简单的MarkDown在线编辑器
1.首先要下载mark组件. npm install marked --save 2.在Vcontent.vue中简单写一些样式. <template> <div class=&qu ...
- 使用vue+koa实现一个简单的图书小程序(1)
这个系列的博客用来记录我开发时候遇到的问题以及学习到的知识 边做边学: 前后端分离,高内聚低耦合小程序端使用了mpvue 内部使用了vuejs的语法 来做整个小程序的渲染层 后端使用的是koa2搭建一 ...
- vue.js建立一个简单的表格
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- 使用vue/cli 创建一个简单的项目
首先,电脑安装了node.js官方要求8.9 或更高版本 (推荐 8.11.0+) npm install -g @vue/cli # OR yarn global add @vue/cli 全局安装 ...
- 高级UI特效—用SVG码造一个精美的中国地图
前言 来继续学习SVG,要想深入了解还是要多动手进行实战.关于svg基础可以去看一下我的上一篇文章<SVG前戏—让你的View多姿多彩>,今天就用SVG打造一个精美的UI效果. 正文 先上 ...
- vue中使用echarts来绘制中国地图,NuxtJS制作疫情地图,内有详细注释,我就懒得解释了,vue cli制作疫情地图 代码略有不同哦~~~
我的代码自我感觉----注释一向十分详细,就不用过多解释都是什么了~~ 因为最近疫情期间在家实在是没事干,想找点事,就练手了个小demo 首先上 NuxtJs版本代码,这里面 export defau ...
- 一个简单用原生js实现的小游戏----FlappyBird
这是一个特别简单的用原生js实现的一个小鸟游戏,比较简单,适合新手练习 这是html结构 <!DOCTYPE html><html lang="en">&l ...
- 用python实现一个简单的词云
对于在windows(Pycharm工具)里实现一个简单的词云还是经过了几步小挫折,跟大家分享下,如果遇到类似问题可以参考: 1. 导入wordcloud包时候报错,当然很明显没有安装此包. 2. 安 ...
随机推荐
- DOS命令操作
打开CMD的方式 1.开始+系统+命令提示符 2.Win键+R 输入CMD打开控制台(推荐使用) 3.在任意的文件夹下面,按住shift+鼠标右键点击,在此处打开命令行窗口 4.资源管理器的地址栏前面 ...
- Python学习的第二次总结
有限循环 for i in range()# i自动加一 # for语句中若有break被执行,则跟着for后面的else语句就不会被正常执行:反之亦然 for i in range(3) ...
- weboack5webpack5用url-loader(file-loader)处理字体
file-loader(url-loader)可以用解析打包字体. webpack配置loader \\ webpack.config.js const webpack = require(" ...
- vue 中的 .sync 修饰符 与 this.$emit('update:key', value)
vue 中 .sync 修饰符,是 2.3.0+ 版本新增的功能 在有些情况下,我们可能需要对一个 prop 进行"双向绑定".不幸的是,真正的双向绑定会带来维护上的问题,因为子组 ...
- 运用C#编写Http服务器
什么是HTTP服务器 Web服务器是指驻留于因特网上某种类型计算机的程序.当Web浏览器(客户端)连到服务器上并请求文件时,服务器将处理该请求并将文件反馈到该浏览器上,附带的信息会告诉浏览器如何查看该 ...
- (python)python 3.9 安装 robotframework-ride 因为 wxPython 失败
1. 正常安装方式 1)安装 robotframework pip install robotframework 2) 安装 robotframework-ride pip install robot ...
- 解决pdf电子签章显示问题(电子发票)
在/build/pdf.worker.js注释掉一行代码 if (data.fieldType === "Sig") { data.fieldValue = null; // 注释 ...
- centos上安装python3.6环境和 pip3
本篇使用的方法,在不删除Python2的版本,使得Python3和Python2共存 1.yum 安装依赖命令: yum -y install zlib-devel bzip2-devel opens ...
- CAN通讯模板
#define MyCAN_SJW CAN_SJW_3tq#define MyCAN_BS1 CAN_BS1_5tq#define MyCAN_BS2 CAN_BS2_3tq#define MyCAN ...
- Twenty-nine
组件的声明周期 声明周期(Life Cycle)是指一个组件从创建->运行->销毁的整个阶段,强调的是一个时间段. 声明周期函数:是由vue框架提供的内置函数,会伴随着组件的生命周期,自动 ...