docs: 图例补全文档

antvis · Apr 25, 2021 · df6968e · df6968e
1 parent b216b5e
commit df6968e
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 0 deletions.
diff --git a/docs/common/legend-cfg.en.md b/docs/common/legend-cfg.en.md
@@ -212,6 +212,26 @@ Apply to <tag color="cyan" text="Continuous legend">Continuous legend</tag>, sel
 
 Apply to <tag color="cyan" text="Continuous legend">Continuous legend</tag>, 当前选中的范围.
 
+##### legendOption.selected ✨ 🆕
+
+<description> _object_ **optional** </description>
+
+图例高亮状态，false 表示默认置灰，默认不设置或为 true 表示高亮，会同步进行数据的筛选展示。
+
+示例：
+
+```ts
+legend: {
+  selected: {
+    '分类一': true,
+    '分类二': false,
+    '分类三': false,
+  }
+}
+```
+
+<playground path='component/legend/demo/legend-focus.ts' rid='legend-selected'></playground>
+
 ##### slidable
 
 <description>**optional** _boolean_ _default:_ `true`</description>
@@ -245,6 +265,7 @@ Apply to <tag color="cyan" text="Continuous legend">Continuous legend</tag>, a c
 | align      | _string_ | -       | The alignment of text with the slider <br/> - rail : Align with the slide rail, at both ends of the slide rail <br/> - top, bottom: Legends are valid when laid out horizontally <br/> - left, right: Legends are valid when laid out vertically |
 | style      | _object_ | -       | Text style configuration item, reference [Graphic Style](/zh/docs/api/graphic-style)                                                                                                                                                             |
 | spacing    | _number_ | -       | The distance between the text and the slide                                                                                                                                                                                                      |
+| formatter  | _(value: any) => string_ | 文本的格式化方式 |
 
 ##### track
 

diff --git a/docs/common/legend-cfg.zh.md b/docs/common/legend-cfg.zh.md
@@ -164,6 +164,8 @@ pageNavigator: {
 | align   | _string_ | -      | 文本同滑轨的对齐方式 <br/> - rail ： 同滑轨对齐，在滑轨的两端 <br/> - top, bottom: 图例水平布局时有效 <br/> - left, right: 图例垂直布局时有效 |
 | style   | _object_ | -      | 文本样式配置项，详见  [绘图属性](/zh/docs/api/graphic-style)                                                                                  |
 | spacing | _number_ | -      | 文本同滑轨的距离                                                                                                                              |
+| formatter  | _(value: any) => string_ | 文本的格式化方式 |
+
 
 ##### marker
 
@@ -228,6 +230,27 @@ pageNavigator: {
 <description>**optional** _number[]_ </description>
 
 适用于 <tag color="cyan" text="连续图例">连续图例</tag>，当前选中的范围。
+
+##### legendOption.selected ✨ 🆕
+
+<description> _object_ **optional** </description>
+
+图例高亮状态，false 表示默认置灰，默认不设置或为 true 表示高亮，会同步进行数据的筛选展示。
+
+示例：
+
+```ts
+legend: {
+  selected: {
+    '分类一': true,
+    '分类二': false,
+    '分类三': false,
+  }
+}
+```
+
+<playground path='component/legend/demo/legend-focus.ts' rid='legend-selected'></playground>
+
 ##### slidable
 
 <description>**optional** _boolean_  _default:_ `true`</description>

diff --git a/examples/component/legend/demo/legend-focus.ts b/examples/component/legend/demo/legend-focus.ts
@@ -0,0 +1,21 @@
+import { Column } from '@antv/g2plot';
+
+fetch('https://gw.alipayobjects.com/os/antfincdn/PC3daFYjNw/column-data.json')
+  .then((data) => data.json())
+  .then((data) => {
+    const plot = new Column('container', {
+      data,
+      xField: 'city',
+      yField: 'value',
+      seriesField: 'type',
+      isGroup: 'true',
+      legend: {
+        selected: {
+          // 默认置灰
+          茶叶: false,
+        },
+      },
+    });
+
+    plot.render();
+  });
diff --git a/examples/component/legend/demo/meta.json b/examples/component/legend/demo/meta.json
@@ -19,6 +19,14 @@
         "en": "Display value of legend item"
       },
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/KL9rDFTlDt/64abafb6-8e4e-48ff-9a79-cb84883a3bef.png"
+    },
+    {
+      "filename": "legend-focus.ts",
+      "title": {
+        "zh": "图例项默认不选中",
+        "en": "Default unselected legend tem"
+      },
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/KL9rDFTlDt/64abafb6-8e4e-48ff-9a79-cb84883a3bef.png"
     }
   ]
 }