来源时间为:2021-09-07
每个省对应的市地图的json数据,引入按echarts的规则直接可以显示地图
收起
2018-06-2112:34:37
官网地图包已经不可下载,这里包含全国地图,精确到市一级,样式请使用火狐打开,谷歌需要解决跨域问题打开才会有效果
收起
2018-08-1713:23:09
echarts使用的全国各省市地图js和json文件,此文件用于echarts实现地图展示包含css样式
收起
千次阅读
2018-03-0717:33:35
今天在做供CCBN展会用的一个首页,首页是按照之前广东省的模板开发的,而为展会准备的数据是福建的,就需要将首页上的广东地图换成福建地图。于是我就陷入了将广东地图坐标换成福建地图坐标的恶心之中。既然整理出来...
背景
今天在做供CCBN展会用的一个首页,首页是按照之前广东省的模板开发的,而为展会准备的数据是福建的,就需要将首页上的广东地图换成福建地图。于是我就陷入了将广东地图坐标换成福建地图坐标的恶心之中。既然整理出来了,就共享给大家,也能节省大家的时间。
代码
广东数据
letGDGeoData=[{
name:'广州市',
value:[113.53,23.36]
},{
name:'佛山市',
value:[112.98,23.01]
},{
name:'东莞市',
value:[113.85,23.01]
},{
name:'中山市',
value:[113.38,22.52]
},{
name:'江门市',
value:[112.70,22.21]
},{
name:'阳江市',
value:[111.80,21.95]
},{
name:'茂名市',
value:[110.99,21.88]
},{
name:'湛江市',
value:[110.14,21.25]
},{
name:'珠海市',
value:[113.34,22.07]
},{
name:'汕头市',
value:[116.59,23.26]
},{
name:'韶关市',
value:[113.60,24.82]
},{
name:'肇庆市',
value:[112.25,23.49]
},{
name:'梅州市',
value:[116.13,24.29]
},{
name:'惠州市',
value:[114.52,23.12]
},{
name:'汕尾市',
value:[115.46,22.91]
},{
name:'河源市',
value:[114.90,23.95]
},{
name:'清远市',
value:[113.01,24.11]
},{
name:'潮州市',
value:[116.83,23.66]
},{
name:'揭阳市',
value:[116.01,23.27]
},{
name:'云浮市',
value:[111.85,22.82]
},{
name:'深圳市',
value:[114.07,22.62]
}];
福建数据
letFJGeoData=[{
name:'福州市',
value:[119.31,26.08]
},{
name:'厦门市',
value:[118.13,24.59]
},{
name:'泉州市',
value:[118.27,25.08]
},{
name:'莆田市',
value:[119.01,25.36]
},{
name:'漳州市',
value:[117.45,24.22]
},{
name:'宁德市',
value:[119.61,26.93]
},{
name:'三明市',
value:[117.44,26.27]
},{
name:'龙岩市',
value:[116.73,25.27]
},{
name:'南平市',
value:[118.05,27.29]
}];
项目成果
收起
展开全文
2013-03-2709:04:40
福建省地图轮廓,到市级,可用于百度和Google地图。
收起
2019-10-1116:30:01
福建省矢量地图echartgeojson矢量地图包含省级市级县级多级geojson.json数据,访问地址如?orgCode=100000&orgName;=中国可层层点击加载矢量地图动态显示不同颜色文件包含代码和json数据
收起
2021-01-3121:39:34
福建省geojson数据包,含下辖所有市和区县数据,2021年1月更新,echarts等图表可用,如需全部或最新,可关注chengxuyuandata。
收起
2019-01-0316:49:18
echarts-china-map点击显示省地图
收起
2018-06-2217:45:27
2018年5月更新的echarts等图表可用的全国省市区县的geojson数据包,含下辖所有市和区县数据,如需全部或最新,可联系。
收起
2019-12-3010:33:04
福建echarts地图资源,包含地级市,名称居中
收起
万次阅读
多人点赞
2019-08-0608:56:17
效果图...引入省市地图 在main.js文件里引入importVuefromvueimportAppfrom./App.vueimportrouterfrom./routerimportechartsfromechartsVue.prototype...
效果图
背景图片
下载ECharts
npminstallecharts--save
引入省市地图
在main.js文件里引入
importVuefrom'vue'
importAppfrom'./App.vue'
importrouterfrom'./router'
importechartsfrom'echarts'
Vue.prototype.echarts=echarts
import'../node_modules/echarts/map/js/province/beijing.js'//引入北京地图数据
newVue({
el:'#app',
router,
components:{App},
template:'<App/'
})
在组件模板中布局
<template
<divclass='container'
<divclass='mychart'id='mychart'</div
</div
</template
在组件JS中定义方法
<script
exportdefault{
data{
return{}
},
mounted{
this.myChart
},
methods:{
myChart{
//基于准备好的dom,初始化echarts实例
letmychart=this.echarts.init(document.getElementById('mychart'))
//监听屏幕变化自动缩放图表
window.addEventListener('resize',function{
mychart.resize
})
//绘制图表
mychart.setOption({
//图表主标题
title:{
//文本
text:'北京',
//值:'top','middle','bottom'也可以是具体的值或者百分比
top:25,
//值:'left','center','right'同上
left:'center',
//文本样式
textStyle:{
//字体大小
fontSize:25,
//字体粗