echarts贴花特性解析

迷南。 2022-10-19 05:30 342阅读 0赞

### 特性介绍 ###

`aria`[属性介绍][Link 1]

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的[在线示例编辑器][Link 2] 使用以下该例子，只需要将 `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` ,小矩形  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70_800x600]  
贴图为`circle` 圆点  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70_800x600 1]

贴图为`roundRect` 圆角矩形  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70_800x600 2]

贴图为`triangle`，三角形  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70_800x600 3]

贴图为`diamond` 棱形  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70_800x600 4]

贴图为`pin` 倒三角  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70_800x600 5]

贴图为`arrow`，向上箭头  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70_800x600 6]

贴图为`none`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70_800x600 7]

汇总效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70]  
关键代码

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

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

### 语法解析 ###

echart的贴花效果主要是靠`decal`下的几个参数来配置。那么让我们一起来看看一共哪些参数，具体能实现怎样的效果吧。

##### decals #####

首先是`decals`, 这个属性可以是一个对象object，也可以是一个数组array。  
当是对象是，表面当前的图表，所有系列都是用同一个贴图。  
配置如下:

aria:{ 
        enabled:true,
        decal:{ 
            show: true,
            decals: { 
                symbol: 'react'
            }
        }
    }

如果是一个数组的话，如下：

如果decals是数组，则数组的每一项各为一种样式，数据将会依次循环取数组中的样式。 可以将图例中的多个系列，分别对应一种贴图。

##### `symbol` #####

该属性是配置贴花的图案，数据类型可以是`string`，也可以是`string[]`  
一共有四种数据可以选择

*  官方提供的贴花图案
 *  使用图片http地址
 *  使用图片`dataURI`地址
 *  使用`path://`将图标设置为任意的矢量路径

如果贴图是 `string[]` 表示循环使用数组中的图案。  
如果把 `symbol` 设置为 `['circle', 'triangle']`，则会大致显示成下图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70 1]  
使用图片来贴图

symbol: 'image://https://www.mercedes-benz.com.cn/content/dam/mb-cn/renovation/300_0415.png',

设置图片后，我们发现并没有想象中那么好看，图标是在太小了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70 2]  
我们修改一下图标的大小，设置

dashArrayX: [20, 10, 20, 10 ],
    dashArrayY: [20, 10, 20, 10 ],

这样就正常了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70 3]  
另一个案例  
`symbol: 'image://https://www.cadillac.com.cn/ct6/images/topLogo.png',`

`dashArrayX`这个属性下面会讲到。

使用`dataURI` 的例子

symbol: 'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7',

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70 4]

使用`path://` 来设置贴图的例子。  
这种方式相比于使用图片的方式，不用担心因为缩放而产生锯齿或模糊，而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见[ SVG PathData][SVG PathData]。

symbol: 'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z',
    dashArrayX: [20, 10, 20, 10 ],
    dashArrayY: [20, 10, 20, 10 ],

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70 5]

##### `symbolSize` #####

取值范围：0 到 1，表示占图案区域的百分比。默认为1  
`symbolSize` 为0.5 时， 图标会变小一半，每行的图标却不会增加。 设置为0时，不会显示贴图。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70 6]

##### `symbolKeepAspect` #####

是否保持图案的长宽比。 默认为 true。

##### `color` #####

贴花图案的颜色，建议使用半透明色，这样能叠加在系列本身的颜色上。  
可以使用该属性的有官方的贴图，`path://` 这两种。  
如使用 `path//` 加 `color: 'blue'`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70 7]

##### `backgroundColor` #####

贴花的背景色，将会覆盖在系列本身颜色之上，贴花图案之下。 会覆盖系列的颜色。  
`backgroundColor` 设置为 `red` 后  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70 8]  
无论 symbol是那种数据类型，都是生效。

##### `dashArrayX` #####

改属性可以的数据类型 有两种 `number` 和 `Array`

用于定义贴花图案的基本模式是在横向和纵向上分别以`图案 - 空白 - 图案 - 空白 - 图案 - 空白`的形式无限循环。通过设置每个图案和空白的长度，可以实现复杂的图案效果。

`dashArrayY` 控制了横向的图案模式。与 [SVG stroke-dasharray][] 类似。

如果是 `number` 类型，表示图案和空白分别是这个值。如 5 表示先显示高度为 5 的图案，然后空 5 像素，再然后显示高度为 5 的图案 。

如果是 `number[]` 类型，则表示图案和空白依次为数组值的循环。如：`[5, 10, 2, 6]` 表示图案高 5 像素，然后空 10 像素，然后图案高 2 像素，然后空 6 像素，然后图案高 5 像素……

可以结合以下的例子理解本接口：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70 9]  
上图的贴花关键代码

symbol: 'rect',
    dashArrayX: [2,0],
    dashArrayY: [2,2],

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70 10]  
上图的贴花关键代码

symbol: 'rect',
    dashArrayX: [20,0],
    dashArrayY: [10,2],

由以上两个图例对比我们可以得出，`dashArrayY` , `dashArrayY` 可以设置贴花的间隔，贴花的大小，以及贴花的循环方式。  
下面再看个例子，如果将`dashArrayX` 设置为 `[5,2]`  
柱状图就会变成这样子，x轴方向上，柱体被每隔5px，就会被2px的空白分割。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70 11]

##### `dashArrayY` #####

与`dashArrayX` 类似，是作用于Y轴的贴花循环方式。

##### `rotation` #####

图案的整体旋转角度（弧度制），取值范围从`-Math.PI` 到 `Math.PI`。  
如 `rotation: 0.523` 。利用这个可以将一些图形旋转，调整方向，比如向下的箭头，可以调整为向上的。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70 12]

##### `maxTileWidth` #####

数据类型为 `number`  
生成的图案在未重复之前的宽度上限。通常不需要设置该值，当你发现图案在重复的时候出现不连续的接缝时，可以尝试提高该值。

##### `maxTileHeight` #####

数据类型为 `number`  
生成的图案在未重复之前的高度上限。通常不需要设置该值，当你发现图案在重复的时候出现不连续的接缝时，可以尝试提高该值。

### 图例欣赏 ###

讲解完贴图的所有属性后我们来看一些比较好看的贴花示例。

‘line’,  
‘bar’,  
‘pie’,  
‘radar’,  
‘treemap’,  
‘sunburst’,  
‘boxplot’,  
‘sankey’,  
‘funnel’,  
‘gauge’,  
‘pictorialBar’,  
‘themeRiver’,  
‘custom’

[Link 1]: https://echarts.apache.org/zh/option.html#aria
[Link 2]: https://echarts.apache.org/examples/zh/editor.html?c=pie-borderRadius
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70_800x600]: /images/20221005/208034e854af4069b788f4622495f5ba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70_800x600 1]: /images/20221005/daf67ee0d7b9453b9a122cf940071f5b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70_800x600 2]: /images/20221005/659b16f844b347c8b714f62181910a2d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70_800x600 3]: /images/20221005/dbfc806db97a4fff99cec71831d5f6ff.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70_800x600 4]: /images/20221005/7fe16fdf0f314f90b26c8033f7540768.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70_800x600 5]: /images/20221005/f3638c57966448b0b76afa9147d30f73.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70_800x600 6]: /images/20221005/11654d4c0c3a498f9865f4928afadc24.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70_800x600 7]: /images/20221005/92a715d80234427eac8745cab4dd2983.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70]: /images/20221005/3f2c183cc6ce49a6bfb83a9c2963d78f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70 1]: /images/20221005/f45affde787a425baaad9a0d5a66475a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70 2]: /images/20221005/52e66ad820324ea5b4d52dbb52f64b65.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70 3]: /images/20221005/de867fcd63f94f9896358db59fd28e6b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70 4]: /images/20221005/d9ca0d5b589349ae97f9c3ad60a0d636.png
[SVG PathData]: http://www.w3.org/TR/SVG/paths.html#PathData
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70 5]: /images/20221005/d6ba870145e34209b875d664867153a8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70 6]: /images/20221005/aa0a1a3141044ab9b8835331ef09ecee.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70 7]: /images/20221005/b02ea7171e064842aa1e87abfed8be7c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70 8]: /images/20221005/0b99f78a4e43400fafe70ac6045feb91.png
[SVG stroke-dasharray]: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70 9]: /images/20221005/ab02ac84a0a44f4baa5114584e2dc0e3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70 10]: /images/20221005/34f294563f2c4773a49ac89d18eba020.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70 11]: /images/20221005/591e783f7d6f41b2833edca5e317ac8a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70 12]: /images/20221005/56e1bcfad46b4bbf857d2f975cd93863.png