页面树结构
转至元数据结尾
转至元数据起始

示例效果

    散点地图,在地图上以标记点的形式表示数据,为用户观察地理数据规律提供更好的体验。

实现步骤

一、根据区域标识创建散点图

 

1. 创建数据集

  包含三个字段:城市、销售额(数值类型)。数据集相关设置项请参考:数据集定义

  数据预览图如下所示:

              

        2.根据步骤1的数据集创建电子表格,并在电子表格工具栏中点击 图形  ,创建Echarts图形,图形类型为“地图”

3.选择地图加载方式

选择“指定地图”,选择“中国”地图

4.数据设置

地图同数据关联类型”选择区域标识,勾选“城市”字段作为区域标识,勾选“销售额”作为指标,子图类型选择散点图 

 

 

 选择数据保存后,即可看到散点地图效果

 

二、根据坐标创建散点图

根据坐标创建散点图是基于用户创建的数据集存在地点区域的位置信息(经度坐标、纬度坐标),可以用于基于自身数据集存在坐标的情况下进行标记点位置的设置。

 

1. 创建数据集(包含经度、纬度、销售额)

  


2. 创建仪表分析

   图形类型选择“地图”

    

 

3. 选择地图加载方式

选择“指定地图”,选择“中国”地图

  


4.数据设置

   “地图同数据关联类型”选择坐标,勾选“经度坐标”字段作为经度,勾选“纬度坐标”作为纬度,勾选“销售额”作为指标,子图类型选择散点图    

 

     选择数据保存后,即可看到散点地图效果

    

高级设置


     如果对默认的地图效果不满意,可以通过配置项实现预期效果。

  a) 直接对指标样式进行设置,点击设置按钮,再点击“销售额”字段的设置按钮,进入序列设置界面。

    

   

   设置项可设置TopN设置(筛选出前N个数据),渲染样式则是给散点则可以给散点添加对应的渲染样式(涟漪、波纹),

     标记形状用于设置标记点的形状,除默认配置的标记点外,可以点击自定义按钮,通过设置svg图形实现标记点形状自定义。(标记path值可参考:https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Paths

          可以设置地图图例位置:无图例、左上角、左下角、右上角、右下角。

          标记点大小则是用于设置标记点的大小,设置最小半径和最大半径后,标记点会根据数据值自动进行大小调整;

   

   勾选标记染色后,我们可以设置配色类型,区间名称,以及配色方案。

   

   配色类型指的是用于设置图例是否连续展示或分段展示,效果如下图所示

   

   点击区间连续时,则会在下方有区间名称的设置项,用于设置图例的显示名称,默认为低到高,点击区间枚举时则下方区间名称隐藏,

   如下图所示;配色方案指的可在下方设置栏自定义设置区间颜色,也可以通过勾选下拉框中的配色方案来实现颜色的选择

   

   b)对地图区域颜色、边界颜色、地图标记点提示等相关信息修改,可以通过下图界面操作。 

   

  c)当数据集中存在多个指标字段时,可勾选多个指标生成对应的地图

   

   

最终效果 

   经过上面的配置,点击确定保存,得到最终效果如下:

   


 其他说明 

   地图中鼠标移动到区域点的提示框信息中,对应的地点名称是对应的区域的勾选字段在地图区域里面 

   

          

   对应为地图区域中的区域名称 

   


         示例资源:散点地图.xml 



 

 

  • 无标签