数据可视化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的贴花有哪些配置参数，能实现什么样的复杂效果。