如何为ECharts单系列地图添加差异化ARIA兼容图案/decal？

问题描述 #

我希望实现一个依据特定数值为各国上色的世界地图，同时需满足ARIA兼容性要求——为填充色添加图案或decal（贴花）。目前尝试两种方式均未达到预期：

• 启用ARIA支持后，所有国家应用相同的decal样式；
• 修改全局itemStyle中的decal属性，无法实现不同国家的差异化图案。

需求：为不同国家设置不同样式的decal，例如部分用虚线、部分纯色填充、部分用圆形图案等。

尝试过的代码示例 #

方式一：ARIA全局配置

aria: {
    series: 'single',
    decal: {
      show: true
    }
},

方式二：全局itemStyle配置

// 写入itemStyle内
decal: {
    color: 'blue',
    dashArrayX: [1, 0],
    dashArrayY: [2, 5],
    symbolSize: 1,
    rotation: Math.PI / 6
},

解决方案 #

要实现差异化decal并满足ARIA兼容性，核心是根据数据动态绑定decal配置，以下两种方案均可实现需求：

方案1：通过itemStyle回调函数动态生成 #

在地图series的itemStyle中，利用回调函数根据每个数据项的数值或分类返回对应decal配置，同时保留ARIA全局开启：

series: [{
    type: 'map',
    map: 'world',
    data: [/* 包含value字段的各国数据 */],
    itemStyle: {
        // 原有数值上色逻辑
        color: (params) => {
            // 根据value返回对应填充色
            return params.value > 80 ? '#c23531' : params.value > 50 ? '#2f4554' : '#61a0a8';
        },
        // 动态生成decal
        decal: (params) => {
            if (params.value > 80) {
                return {
                    show: true,
                    symbol: 'circle',
                    symbolSize: 3,
                    color: '#fff',
                    rotation: 0
                };
            } else if (params.value > 50) {
                return {
                    show: true,
                    dashArrayX: [5, 3],
                    dashArrayY: [5, 3],
                    color: '#fff',
                    rotation: Math.PI / 4
                };
            } else {
                // 低数值国家用纯填充，不显示decal
                return { show: false };
            }
        }
    },
    // 保留ARIA配置确保兼容性
    aria: {
        series: 'single',
        decal: { show: true }
    }
}]

方案2：在data数组中单独配置单个国家 #

若需要更精细的控制，可直接在每个数据项的itemStyle中指定专属decal：

series: [{
    type: 'map',
    map: 'world',
    data: [
        { name: 'China', value: 90, itemStyle: { decal: { show: true, symbol: 'circle', symbolSize: 4 } } },
        { name: 'United States', value: 75, itemStyle: { decal: { show: true, dashArrayX: [4, 2] } } },
        { name: 'Brazil', value: 40, itemStyle: { decal: { show: false } } },
        // 其他国家数据...
    ],
    aria: {
        series: 'single',
        decal: { show: true }
    }
}]

核心注意事项 #

• ARIA全局decal配置会被itemStyle回调或数据项内的decal配置覆盖，因此全局开启ARIA后可通过动态逻辑实现差异化；
• decal的symbol支持内置图形（如circle、rect）或自定义SVG路径；
• 纯填充需求可直接设置decal.show: false。

内容的提问来源于stack exchange，提问作者Caio Oliveira