图表图层（ChartLayer）

图表图层能够在指定位置以饼状图的形式展示数据。图表图层以一个外置的DOM元素形式，覆盖在地图对象上层，因此，图表图层不支持调整图层顺序。

new aimap.ChartLayer(layerOptions: Object)

提示

使用该接口前需引入以下js库（在aimap-gl库引入之前）：

公网路径： sdkPathSuffix/libs/aimapcharts/3.8.5/aimapcharts.min.js

初始化参数

LayerOptions参数说明

字段名	类型	说明
id	string	默认值为${type}.${uuid}，该值不允许重复。
map必须	Map	地图对象。
minZoom	number	能显示的最小的zoom level，默认 3。
maxZoom	number	能显示的最大的zoom level（但不包括这个Level），默认20。
data必须	ChartData	图表数据，具体参见：ChartData。
selected必须	SelectedOptions	控制选中项的显示配置。
onSelected	Function	选中某一个图例后的响应事件，具体参见：事件说明。

ChartData

字段名	类型	说明
coordinates必须	LngLat	必须为gcj02坐标。
container	ContainerStyle	承载图表的容器样式，默认值：{width:'120px', height:' 120px',"background-color": "rgba(255, 255, 255, 0)"}。
chart必须	echartsOption	图表配置，可参考 Echarts官网 (opens new window) 进行配置。
selected	boolean	是否选中当前图表，每个图层仅支持一个为true，默认值：false。

ContainerStyle

字段名	类型
width	string	图表容器宽度，默认值：300px。
height	number	图表容器高度，默认值：300px。
background-color	string	图表容器背景，透明配置，使用rgba方式设置透明度不会影响echarts图表显示，默认值：rgba(255, 255, 255, 0)。

onSelected 事件

字段名	类型	说明
container必须	HTMLElement	新的容器样式。
chart必须	echartsOption	需要更改的echarts配置，较新版本的echarts可进行差异化配置，可参考 Echarts官网 (opens new window) 进行配置。

示例

实例变量

id

此图层的 id，如果在初始化图层的参数中指定，则为参数中的 id，否则 SDK 内部会自动生成一个 id。

示例

var chartLayer = new aimap.ChartLayer({...});
console.log(chartLayer.id); // "chart.9db79b01-f3c0-4da6-a36a-b4d5827c4e37"

type

此图层的类型，对于本图层， type 为固定值：chart。

示例

var chartLayer = new aimap.ChartLayer({...});
console.log(chartLayer.type); // "chart"

实例方法

remove()

将本图层从地图中移除，并销毁相关的资源。

返回值

ChartLayer：this

show()

显示该图层。

返回值

ChartLayer：this

hide()

隐藏该图层。

返回值

ChartLayer：this

setData(data)

选中某一个图表。

参数

data(ChartData)：与 layeroptions参数说明 中的Data字段定义一致。

返回值

ChartLayer：this

selectedChart(chartName)

选中某一个图表。

参数

chartName(string)：图表的名称。

返回值

ChartLayer：this

unSelectedChart()

取消已选中的图表。

返回值

ChartLayer：this