提示：本文档的示例代码仅适用于本文档中的示例报表/场景。若实际报表/场景与示例代码无法完全适配（如使用功能不一致，或多个宏代码冲突等），需根据实际需求开发代码。

染色地图\热力图上显示指标值

说明

现需要让地图上显示数据标签即显示相关指标，并且标签内容为对应的区域信息，效果如下：

染色地图：

热力图：


思路

1.该地图的数据集中，必须包含区域字段，如下：

2.使用以上数据集创建地图（染色地图\热力图），如下：

 

3.在该地图上新建客户端宏模块

类型：客户端      对象：chart       事件：afterRenderer


5.复制并根据实际情况修改以下宏代码

//类型：ClientSide      对象：chart     事件：afterRenderer
function main(chartView) {
    var options = chartView.getChartObject().getOptions(); //echarts配置
    var chart = chartView.getChartObject().getChart(); //chartInstance
    var gridData = chartView.getGridData().data; //数据集
    var data = options.series[0].data; //echarts配置中的数据
    options.geo = options.geo || {};
    options.geo.label = options.geo.label || {};
    options.geo.label.normal = options.geo.label.normal || {};
    options.geo.label.normal.formatter = function(a) {
        return myLabelFormatter(a)
    };
    options.geo.label.normal.show = true;
    options.geo.label.emphasis = options.geo.label.emphasis || {};
    options.geo.label.emphasis.formatter = function(a) {
        return myLabelFormatter(a)
    };
    options.geo.label.emphasis.show = true;
    function myLabelFormatter(a) {
        for (var index in data) {
            if (data[index].name == a.name || index == a.name) {//热力图a.name是省份名称，染色图a.name是省份顺序
                var newLabelString = data[index].name + ":" + data[index].displayValue;
                return newLabelString;
            }
        }
    }
    chart.setOption(options);
}


5.效果图如下

示例资源，基于northwind数据库：地图上显示指标值.xml

散点图显示指标值

散点图可直接通过扩展属性实现地图上显示数据标签（指标值），具体如下：

扩展属性：

{
    "series": [{
        "label": {
            "normal": {
                "formatter": "function(a){ return a.name+a.data.displayValue}",
                "position": "right",
                "show": true
            }
        }
    }]
}

效果：    

或者通过参考宏代码设置：修改地图数据标签