05 【eCharts样式定制系列】自定义地图

描述

项目的UI设计稿中，大屏展示模块有地图模块，原本项目使用的是我们ArcGIS JS API初始化后的一个地图服务图层，不过为了美观考虑，最后决定大屏模块的地图使用eCharts来自定义，UI设计稿中的地图如下：

通过查看UI设计图发现，通过JS API来实例化一个地图图层服务来实现这个模块的话，就需要重新制作一份暗夜色的地图，然后发布服务，前端调用实现，这个过程有点繁琐，所以我们接下来通过eCharts来实现。

操作步骤

1、在【地图选择器】（http://datav.aliyun.com/tools/atlas/#&lat=33.521903996156105&lng=104.29849999999999&zoom=4）网站上下载GeoJSON格式的数据，如图：

2、在代码里，通过eCharts的地图实例化代码，生成我们的地图，如下：

 // 创建GeoJSON底图_createJSONMap: function(domid) {const _self = this;echarts.registerMap('yunnan', _self.mapData);  //注册一个名为"yunnan"的地图const chartmap = echarts.init(document.getElementById(domid));const mapoption = {tooltip: {trigger: 'item',formatter: function(params) {return params.name;},extraCssText: 'height:20px;',},series: [{name: 'YNBasemap',type: 'map',roam: true, // 缩放和漫游map: 'yunnan',   //指定刚才注册的地图aspectScale: 1.5,    //宽高比，如果不指定，实例化出来的地图会偏瘦或者偏矮zoom: 1.5,label: {show: true,color: '#BBC0CA',},emphasis: {   //鼠标浮动的时候，标注和各个地图区域的交互渲染设置label: {show: true,// fontSize: 16,color: '#39E639',},itemStyle: {areaColor: '#2B91B7',borderColor: '#0DC9D5',},},itemStyle: {areaColor: '#09304A',borderColor: '#0DC9D5',},// 文本位置修正textFixed: {Alaska: [20, -20],},},],};chartmap.setOption(mapoption);},

3、通过上述代码，我们实现了地图的自定义，最终效果如下：

总结

实例化地图操作其实也是参考eCharts官网的API文档来实现的，这里面当时遇到的问题就是刚初始化之后的地图偏瘦，就是两边的区域留白位置很大，所以找了很多方法都没解决，最后查阅官网文档，可以设置它的宽高比，设置完宽高比之后发现，实例化的地图好看多了，所以还是要看官网文档啊。

https://www.echartsjs.com/zh/option.html#series-map.type

05 【eCharts样式定制系列】自定义地图相关推荐

02 【eCharts样式定制系列】玫瑰图、环形饼图、漏斗图自定义各项数据的颜色
描述在目前的项目中,根据UI设计稿需要实现一个带有大屏的系统首页,在此首页上要添加地图和一些eCharts图表.但是根据UI设计稿,如果要达到美观的目的,需要对eCharts进行定制.此次需要定制的 ...
03 【eCharts样式定制系列】雷达图自定义面积覆盖颜色
描述在目前的项目中,根据UI设计稿需要实现一个带有大屏的系统首页,在此首页上要添加地图和一些eCharts图表.但是根据UI设计稿,如果要达到美观的目的,需要对eCharts进行定制.此次需要定制的 ...
01 【eCharts样式定制系列】柱状图修改柱状颜色、柱状形状等
描述在目前的项目中,根据UI设计稿需要实现一个带有大屏的系统首页,在此首页上要添加地图和一些eCharts图表.但是根据UI设计稿,如果要达到美观的目的,需要对eCharts进行定制.接下来我们先对 ...
04 【eCharts样式定制系列】矩形树图自定义颜色
描述在目前的项目中,根据UI设计稿需要实现一个带有大屏的系统首页,在此首页上要添加地图和一些eCharts图表.但是根据UI设计稿,如果要达到美观的目的,需要对eCharts进行定制.此次需要定制的 ...
php 分页样式定制,Laravel自定义分页样式
Laravel 的分页组件默认为 Bootstrap 的分页样式,但如果我们用的并不是 Bootstrap 或者说分页的 HTML结构不一样,这时我们需要自定义分页.其实 Laravel 的分页组件是 ...
Android基于高德SDK的开发——自定义地图主题样式（悬浮按钮+底部弹窗）
日常的地图使用中,平台一般只会给我们提供地图的标准样式,造成了一定程度上的审美疲劳,那么如何实现地图的自定义样式呢?本文使用Android Studio 4.1,给开发者提供了一个基于高德地图SDK进 ...
【高德地图进阶】--- 自定义地图
在开发的过程中, 有时候高德官方地图样式无法符合需求,这就需要我们自定义地图的样式了. 步骤:登录高德地图–>进入控制台–>自定义地图可以直接创建地图,也可以在模板基础上进行修改可以控 ...
echarts自定义地图总结(VUE)
需求: 全国地图中内蒙古地区分为蒙东.蒙西,河北省地区分为河北.冀北,需要自定义地图. 思路: 从json文件上做文章,例如整个中国地图的json里包含各个省的json,各个省包含各个市的json,以 ...
vue组件-echarts地图显示柱状图并给柱状图添加点击事件（支持自定义地图）
vue组件-echarts地图显示柱状图并给柱状图添加点击事件(支持自定义地图) 效果如下所示: 参考文档: 这是参考的文档起因: 最近有朋友有需求需要用echarts,在地图上显示柱状图,并添加点 ...

05 【eCharts样式定制系列】自定义地图

描述

操作步骤

总结

05 【eCharts样式定制系列】自定义地图相关推荐

最新文章

热门文章