echarts实现省市地图

使用Echarts实现省市区的地图，今天有时间写个北京地图demo。先看下效果图：

1、首先先引入echarts.min.js文件，然后改造下beijing.json文件，改造后把json改成js文件。各省的json文件大家可以在网上搜下，如果要先成的文件可以给我留下邮箱，我发给大家。

<div id="main" style="height:900px;"></div>
<script type="text/JavaScript" src="js/echarts.min.js"></script>
<script type="text/JavaScript" src="js/beijing.js"></script>

2、相关的文件都引入后，就可以构建地图了。下面是简单的demo代码，

echarts.registerMap('beijing', beijingJson);//这里用的那个省市的就写那个省市的名字
var chart = echarts.init(document.getElementById('main'));
chart.setOption({title:{  //这里是标题text: '北京市轮廓地图',top: '3%',left: 'center',//标题居中显示textStyle: {//标题的样式fontSize: 20,fontWeight: 600,color: '#222'}},tooltip: {// 触发类型, 数据项图形触发trigger: 'item', formatter: function (val) {//这里是鼠标滑过显示的弹框，弹框可以根据自己的需求去写return val.data.name + '<div class="bjMap">'+ '<h2><img src="' + val.data.url + '"></h2>'+ '<p>' + val.data.value + '</p>'+ '</div>'}},series: [{type: 'map',map: 'beijing',roam: true,//是否开启鼠标缩放和平移漫游geoIndex: 0,// 不可缺少，否则无tooltip 指示效果label: {normal: {show: true,//显示省份标签textStyle:{color:"#fff"}//省份标签字体颜色},emphasis: {//对应的鼠标悬浮效果show: true,textStyle:{color:"#323232"}}},itemStyle: {normal: {borderWidth: .5,//区域边框宽度borderColor: '#0550c3',//区域边框颜色areaColor:"#17a34f",//区域颜色},emphasis: {borderWidth: .95,//鼠标滑过区域，区域边框宽度borderColor: '#fff',//鼠标滑过区域，区域边框颜色areaColor:"#ff6511",//鼠标滑过区域背景色}},data: [//这里是数据{ name: '延庆区', url:'https://pic3.zhimg.com/50/v2-497f0ce3c5a4f21c447edb9f08012a2f_hd.jpg', value: '好邻居！可玩的地儿多的数不过来！', lng: 115.981186, lat: 40.462706 },{ name: '怀柔区', url:'https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg', value: '好邻居！可玩的地儿多的数不过来！', lng: 116.63853, lat: 40.322563 },{ name: '密云区', url:'https://pic4.zhimg.com/50/v2-270ccddee1da949f5a951da1220b373a_hd.jpg', value: '好邻居！可玩的地儿多的数不过来！', lng: 116.849551, lat: 40.382999 },{ name: '昌平区', url:'https://pic2.zhimg.com/50/v2-ec095df48d0362d3eb4d0525d4394e16_hd.jpg', value: '立水桥、回龙观、西三旗、明朝十三陵', lng: 116.237832, lat: 40.226854 },{ name: '顺义区', url:'https://pic4.zhimg.com/50/v2-4eab4a0caf6b0382c115005992bd6de0_hd.jpg', value: '顺义城关、天竺、南法信、高丽营', lng: 116.663242, lat: 40.1362 },{ name: '平谷区', url:'https://pic3.zhimg.com/50/v2-273aed32f94cceb43f03fa389265d8d7_hd.jpg', value: '平谷镇，金海湖镇，京东大溶洞', lng: 117.128025, lat: 40.147115 },{ name: '门头沟区', url:'https://pic2.zhimg.com/50/v2-8492e1436403ff4b1305ee031b2b7e94_hd.jpg',  value: '百花山、妙峰山、潭柘寺、戒台寺、永定河', lng: 116.108179, lat: 39.94648 },{ name: '海淀区',url:'https://pic2.zhimg.com/50/v2-0a43a0d541eb2ff159c69122f2c1f154_hd.jpg', value: '中关村、五道口、公主坟、颐和园', lng: 116.304872, lat: 39.96553 },{ name: '石景山区', url:'https://pic3.zhimg.com/80/v2-48a9b57c60e2f15c818c02b879420b73_720w.jpg', value: '苹果园、老古城、衙门口、玉泉路', lng: 116.229612, lat: 39.912017 },{ name: '西城区', url:'https://pic3.zhimg.com/v2-00aac6ebd1fe7abb4f2dbc287152bbb5_r.jpg', value: '西单、什刹海、西直门、动物园', lng: 116.372397, lat: 39.918561 },{ name: '东城区', url:'https://pic2.zhimg.com/50/v2-f3ba9dcfdbf8ee9a16827be4ee63d62c_hd.jpg', value: '天安门、王府井、钟鼓楼、东内大街', lng: 116.42272, lat: 39.934579},{ name: '朝阳区', url:'https://pic2.zhimg.com/50/v2-d8f9da83aa06b7f6982918272befe909_hd.jpg', value: '朝外大街、大北窑、亚运村、三里屯', lng: 116.449767, lat: 39.927254 },{ name: '通州区', url:'https://pic3.zhimg.com/50/v2-6234a8e355289891af36a7bc15186976_hd.jpg', value: '新华大街、北苑、管庄、八里桥', lng: 116.662928, lat: 39.917001 },{ name: '大兴区', url:'https://pic2.zhimg.com/50/v2-05ae0a59a3ab00eb5debdf5cece23cd3_hd.jpg', value: '黄村镇、西红门、亦庄、庞各庄', lng: 116.348053, lat: 39.732833 },{ name: '房山区', url:'https://pic2.zhimg.com/50/v2-4aa9534e0a120c7e4778e75ab07f2644_hd.jpg', value: '良乡、燕山、十渡、周口店', lng: 116.149892, lat: 39.755039 },{ name: '丰台区', url:'https://pic4.zhimg.com/50/v2-425af7e363e02c9a16b9b49fa2f9d395_hd.jpg', value: '丰台镇、方庄、大红门、卢沟桥', lng: 116.293105, lat: 39.865042 }]}],});

如果大家有需要要源码的话可以在git上下载：（第一次写的地图，不喜勿喷）

https://gitee.com/yilong888/BeiJingEchartMap/tree/master

如果需要各个省市地图的同学可在这下载echarts实现各省市地图、中国地图

如果这篇文章对您有所帮助，麻烦点个赞吧

echarts实现省市地图相关推荐

湖北地图html代码,echarts全国省市地图代码
[实例截图] echarts全国省市地图代码 [实例截图] [核心代码] html5 canvas echarts全国省市地图代码 *{margin: 0;padding: 0;} body{widt ...
ECharts实现省市地图切换
最近写项目用到了ECharts实现省市地图切换,写出来记录一下. ECharts实现省市地图切换,一般有两种引用形式js文件和json文件.我这里用到的是js文件.js文件资源网上可以搜到. 代码如下 ...
echarts各省市地图实现
echarts各省市地图实现 echarts由于以下原因停止了地图下载服务在这里提供下原来的各省市地图的json,js文件: 各省json及js下载地址下面是具体实现方式(地图配置的代码片段): ...
微信小程序使用Echarts实现省市地图（山东地图demo）
上篇写过在PC端使用Echarts实现省市地图效果,今天说下在小程序中如何使用echarts实现省市地图,这次就拿山东地图来说下. 1.首先还是下载Echarts在git上提供的组件,下载到本地放到 ...
vue中Echarts之省市地图（北京市）展示相关数据
1. 下载ECharts 插件 npm i echarts --save 2. 引入省市地图 import echarts from 'echarts' Vue.prototype.echarts = ...
ECharts之省市地图
效果图背景图片下载ECharts npm install echarts --save 引入省市地图在 main.js 文件里引入 import Vue from 'vue' impor ...
echarts实现中国地图和各省市地图
echarts实现中国地图我会把china.js和各省市的js以及json上传资源,有需要的可以下载首先引入echarts.js和china.js <!DOCTYPE html> &l ...
react中使用ECharts绘制各省市地图
首先,安装对应依赖 npm install echarts --save 2.引入 import React from "react"; // 模块化样式表 import s fr ...
Echarts使用二：全国地图与各省市地图联动
===========================更新============================ 介于很多人都找我要相关的js文件,我就传到网上以供大家下载~~ js文件下载地址: ...

echarts实现省市地图

echarts实现省市地图相关推荐

最新文章

热门文章