数据可视化Echarts贴花特性解析（上）

特性介绍

aria属性介绍

W3C 制定了无障碍富互联网应用规范集（WAI-ARIA，the Accessible Rich Internet Applications Suite），致力于使得网页内容和网页应用能够被更多残障人士访问。Apache ECharts 4 遵从这一规范，支持自动根据图表配置项智能生成描述，使得盲人可以在朗读设备的帮助下了解图表内容，让图表可以被更多人群访问。除此之外，Apache ECharts 5 新增支持贴花纹理，作为颜色的辅助表达，进一步用以区分数据。

默认关闭，需要通过将 aria.enabled 设置为 true 开启。

aria.decal 属性
为系列数据增加贴花纹理，作为颜色的辅助，帮助区分数据。使用默认贴花图案的方式非常简单，只需要开启即可：

aria: {
    enabled: true,
    decal: {
        show: true
    }
}

图表会使用默认的贴图，添加到图表系列上。下面看一下默认的一些贴图效果。

默认的贴花效果

echarts的贴花效果默认有以下几种
circle,rect, roundRect,triangle,diamond,pin,arrow,none
下面以扇形图来展示这些默认的贴图。

打开echarts的在线示例编辑器 使用以下该例子，只需要将 symbol 属性修改为对应的贴花类型即可看到对应的效果

option = {
    tooltip: {
        trigger: 'item'
    },
    legend: {
        top: '5%',
        left: 'center'
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
            },
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '40',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                {value: 1048, name: '搜索引擎'},
                {value: 735, name: '直接访问'},
                {value: 580, name: '邮件营销'},
                {value: 484, name: '联盟广告'},
                {value: 300, name: '视频广告'},
                {value: 300, name: '发传单'},
                {value: 300, name: '发单'},
            ]
        }
    ],
    aria:{
        enabled:true,
        decal:{
            show: true,
            decals: {
                symbol: 'react'
            }
        }
    }
};

贴图为react ,小矩形

贴图为circle 圆点

贴图为roundRect 圆角矩形

贴图为triangle，三角形

贴图为diamond 棱形

贴图为pin 倒三角

贴图为arrow，向上箭头

贴图为none

汇总效果

关键代码

aria:{
    enabled:true,
    decal:{
        show: true,
        decals: [
            {symbol: 'rect'},
            {symbol: 'circle'},
            {symbol: 'roundRect'},
            {symbol: 'triangle'},
            {symbol: 'diamond'},
            {symbol: 'pin'},
            {symbol: 'arrow'}
        ]
    }
}

以上就是默认的贴图效果，如果你要实现更为复杂的自定义贴图，请继续往下读，看一下echarts的贴花有哪些配置参数，能实现什么样的复杂效果。