[{"id":"840f0737-df1d-47ae-bb0a-359b01fe0608","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"d5d9cdef-8854-4505-89be-a2bbc3cb4482","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"3dc3dd55-35b0-4d23-bf62-47bc3650e4ee","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"80d84fbc-d0f8-4e4a-947f-e3e4de9b49b2","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"9152b7ca-0186-4fe3-a26f-5a05f322db07","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]}]
        
(Showing Draft Content)

组件图例

组件的图例用于显示组件中不同颜色或不同形状代表的数据含义。

只有当在图表组件的系列区域绑定了字段或在数值区域绑定了多个字段又或者使用组合图组件时时,才可以显示图例。

属性设置中的图例属性用于设定图例的样式。

image2019-6-27_15-40-1.png

属性设置中对于组件图例的设置主要包括:

是否显示图例及图例的标题、图例的字体设置、图例相对于组件的位置、图例区域的大小,图例相对于图例区域的对齐方式以及是否换行显示。

image

显示或隐藏图例

设置是否在图表组件中显示图例,默认为

  • 当设定为时,显示图例。

    image

  • 当设定为时,则隐藏图例区域,同时,也会隐藏属性设置中图例设定的其他选项。

    image

图例标题

设置是否显示图例的标题,默认为,隐藏图例的标题。当设定为时,则显示图例的标题,即图例的字段名。

image2019-12-4_14-4-54.png

系列字体设置

设置图例中字体的样式,如字体、大小、颜色、粗体及斜体等。

其中字体大小以仪表板全局设置中的字体大小为基准进行设定,选项的范围从基准字体大小的0.5倍~8倍。

image2019-12-4_14-7-13.png

位置

设置图例区域显示的位置,可选择顶部、右侧、底部、左侧。默认值为右侧

下图为图例设置在左侧、右侧、顶部以及底部的效果。

image2019-12-4_14-9-23.png

自适应大小

自适应大小属性适用于设置图例区域占整个组件区域的百分比。

关闭自适应大小,则可以设置图例区域所占百分比。

下图中浅黄色底纹表示图例区域。

image2019-12-4_14-42-38.png

水平对齐

水平对齐用于设置图例内容相对于图例区域的水平对齐方式。

图中浅黄色底纹表示图例区域。

image2019-12-4_14-22-21.png

垂直对齐

垂直对齐用于设置图例内容相对于图例区域的垂直对齐方式。

图中浅黄色底纹表示图例区域。

image2019-12-4_14-28-28.png

图例换行

图例默认以一行或者一列进行显示,当需要显示的内容较多时就需要进行换行显示。

image2019-12-4_14-35-27.png

鼠标左键选项

定义鼠标点击图例时的行为。支持“选择/反选择” 和“显示/隐藏”两种行为。

image

选择/反选择:单击图例时,相当于选中一个值,会对其他组件进行数据过滤。

image

再次单击,反选择,恢复数据过滤。

image

显示/隐藏:单击图例时,对应数据显示会直接隐藏/出现,不会对其他组件产生数据过滤。

单击图例中的“支付宝”,发现支付宝相关数据隐藏起来。

image

再次单击图例“支付宝”,数据显示出来。且没有发生数据过滤。

image