3u8928,朱匡宇,嬴芾
如何在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 };
以上就是全部步骤的代码,仅限于初步实现。
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
新补丁让Windows 10出现死机、卡顿等 微软坐不住称正解决
Ubuntu 20.04 LTS进驻Windows子系统:只能用3年
ThinkPad正式加入:预装Linux发行版而非Win10的PC越来越多了
最新版Android 11推送!谷歌Pixel 5被曝光:支持反向充电
高度致敬Windows!开源优麒麟20.04 LTS发布:支持5年
电脑小知识:Windows 10是用什么语言写的?到底有多少行代码?
Win10 5月更新准正式版:微软引入大量新功能 系统响应速度快
Windows 10新预览版19613推送:修复任务栏图标显示异常BUG
Windows AD 报错解决:UAC File Virtualization服务启动失败 此驱动程序被阻止加载
网友评论