1.1 问题描述

地图中我们可以使用自定义地图，通过提示点等直接与图片进行交互。

地图中我们可以直接在设计器中进行自定义地图，只需导入自己的图片，进行描边或者放置标记点，即可使用。

1.2 解决思路

地图选择自定义图片，自定义地图编辑界面。

2.1 自定义图片 JSON

制作地图 JSON 的目的是为了自定义图片，只需导入自己的图片，进行描边或者放置标记点。

2.2 新建自定义图片

1）进入数据决策系统，点击管理系统>地图配置>自定义图片，新建自定义图片地图2Fmarket，如下图所示：

2）点击2Fmarket，点击导入图片按钮上传图片，如下图所示：

3）点击右侧的绘图工具，共有两种方式进行设置区域名，设置完成后点击弹窗的保存按钮，再点击右上角保存按钮，如下图所示：

• 第一种方式，对图片进行描边，描边完成后，设置对应的区域名；

• 第二种方式，在图片中，点击放置标记点，标记点放置完成后，设置对应标记点的区域名；

注：标签会自动显示在区域中心，当中心点自定义的时候，就会显示在对应的位置

注：需要重启一下服务器，自定义地图才可以生效

2.2 准备数据

新建普通报表，添加内置数据集 market，分别记录各个商铺对应的商品和品牌，如下图所示：

2.3 插入图表

以单元格图表为例，合并一片单元格，点击插入>单元格元素>插入图表，选择地图，如下图：

选中图表，在右侧选择类型，地图边界选择刚刚自定义好的 2Fmarket，如下图所示：

2.4 图表数据设置

选中图表，在右侧选择 数据，如下图所示：

2.5 图表样式设置

1）选择样式>图例，取消勾选图例可见，如下图所示：

2）选择样式>系列，自定义配色，如下图所示：

3）选择样式>标签，勾选使用标签，内容勾选区域名，自定义设置样式，如下图：

按照需要可在图表属性表中进一步设置图表样式，例如设置标题，字体大小颜色，图例，系列配色，提示等，这里不再一一介绍

2.6 效果预览

1）PC端

保存模板，点击分页预览，效果如下图所示：

2）移动端

已完成模板可参考%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\Chart\Map\商场自定义地图.cpt

点击下载模板：