echarts自定义省份地图及map上的内容

先来看效果，太原市的地图，显示市下面的区，区下面的商户，默认显示3个商户信息，其余商户信息鼠标移动上去显示商户信息：

我是怎么做的呢？因为网上找的地图都不符合需求，所以从设计开始就按非常规方法：大致就是先代码模拟出市的轮廓->截图保存，ps处理，每个区保存为一个图层->需要的区加上颜色和区名->页面中使用整张地图作为背景图->其他文字信息一律代码写上去。

第一步：

由于echarts官网下载的包里只包含省份下面的市json文件，我们要的是市下面的区json文件，所以要先从网上找到对应的区json文件，放入map包里或者其他地方。

然后将json文件打开，复制代码，百度json在线格式化工具，方便我们复制粘贴区名，网址：http://www.bejson.com/。也可以更简单一点，不格式化直接百度找全国市区json，如https://www.jianshu.com/p/a9c9eeb17212。

然后去官网示例中找到地图的示例，下载html页面，复制其中的主要内容，新建如下代码的html页面，然后启动服务器就能生成一张带有区名的太原市区地图。

<div id="taiyuanMap" style="width: 100%;height:240px;"></div><script src="js/jquery.min.js"></script>
<script src="echarts/dist/echarts.min.js"></script><script type="text/javascript">var dom8 = document.getElementById("taiyuanMap");var myChart8 = echarts.init(dom8);var app8 = {};option8 = null;myChart8.showLoading();//从官网下的echarts包里面有包含市的json文件，引入进来即显示省份下面的市。我们这里是从网上找的太原市区的json文件，引入进来$.get('echarts/map/json/taiyuan.json', function (geoJson) {myChart8.hideLoading();echarts.registerMap('taiyuan', geoJson);myChart8.setOption(option8 = {tooltip: {trigger: 'item',formatter: '{b}<br/>{c} (p / km2)'},visualMap: {show: false,min: 800,max: 50000,text:['High','Low'],realtime: false,calculable: true,inRange: {color: ['#0048ff','#0078ff', '#0090ff']},},series: [{name: '太原',type: 'map',mapType: 'taiyuan', // 自定义扩展图表类型itemStyle:{normal:{label:{show:true}},emphasis:{label:{show:true}},},label:{normal:{textStyle:{color:'#fff'}}},data:[{name: '小店区', value: 20057.34},{name: '尖草坪区', value: 15477.48},{name: '晋源区', value: 31686.1},{name: '迎泽区', value: 6992.6},{name: '万柏林区', value: 44045.49},{name: '杏花岭区', value: 40689.64},{name: '清徐县', value: 37659.78},{name: '古交市', value: 45180.97},{name: '娄烦县', value: 55204.26},{name: '阳曲县', value: 21900.9},],// 自定义名称映射，我们只要一个地图轮廓可以不管它nameMap: {'Central and Western': '中西区','Eastern': '东区','Islands': '离岛','Kowloon City': '九龙城','Kwai Tsing': '葵青','Kwun Tong': '观塘','North': '北区','Sai Kung': '西贡','Sha Tin': '沙田','Sham Shui Po': '深水埗',}}]});});;if (option8 && typeof option8 === "object") {myChart8.setOption(option8, true);}
</script>

上面的代码生成的一张地图：

第二步：

ps处理这张图，将每个区域区分开来，处理成我们想要的样子，作为一张背景图放入页面中：

第三步：

就是常规的写静态页面的方法了。在页面上加上运营商的各种信息和图标。页面完成。

echarts自定义省份地图及map上的内容相关推荐

ECharts 在省份地图上定制自定义图标
ECharts 在省份地图上定制自定义图标原型上有个生态分布的板块,就像是每个国家想把国旗插到月球啊,北极,南极之类的,然后点击右侧的 lenged 能够打开关闭相应的部分.具体情况如下: 要想实现 ...
vue+echarts实现省份地图展示
一.效果下面以四川省地图为例,展示效果如下: 二.echarts的安装这里我是使用npm进行安装的,命令如下: npm install echarts 三.echarts各省份地图js导入以下是 ...
echarts自定义区域地图
echarts自定义区域地图地图代码逻辑梳理文件梳理 myChina.json mapData.json mock.json(权限json---等同于后台返回的权限json) chinaMapDa ...
echarts初始化中国地图（Map）
echarts初始化中国地图 vue 中可以直接使用,修改文件地址即可更多echarts例子 1.http://www.ppchart.com/#/ 2.https://www.isqqw.com/ ...
润乾报表echarts统计图省份地图设置
需求是制作单个省份的地图,比如,要制作一张江西省的产业分布图,通过echarts设置,首先要有江西省地图的js或者是json,在润乾设计器中有自带的模板可以直接使用,report5\web\we ...
echarts实现省份地图
以吉林省为例 1.下载json文件首先获取文件,将省份对应的json文件下载下来放到项目文件中,建议放到public里, 2.引入echarts import * as echarts from ...
vue echarts绘制省份地图并添加自定义标注
效果图在main.js中引入地图 import echarts from 'echarts' Vue.prototype.$echarts = echarts; 省份是动态引入的,在.vue文件中 ...
echarts 绘制省份地图 [ 把不同省份的市合并在一起 ]
安装echarts yarn add echarts 效果图: 获取任意省市县数据来源json格式注意: 这里在请求在写地图数据的时候,我采用的是JQ.使用axios的话会出现错误信息; 废话不多说 ...
echarts自定义描绘地图和修改地图
需求要求需要在四川省地图上添加天府区得行政区域实现此功能分步骤实现此功能 1.获取json数据 2.描绘地图 3.引入项目 1.获得地图json数据文件可以从此获取 http://datav. ...

echarts自定义省份地图及map上的内容

第一步：

第二步：

第三步：

echarts自定义省份地图及map上的内容相关推荐

最新文章

热门文章