docs: console-line-chart增加示例

Author: seekhow

packages/console-line-chart/README.md

@@ -68,6 +68,14 @@ import { ConsoleLineChart } from '@alicloud/console-chart';
 
 [MDXInstruction:importDemo:GradualColor](./demo/GradualColor.tsx)
 
+## Legend点击事件
+
+通过`event`属性来配置事件，配置`legend-item:click`对应的事件即可以配置图例点击事件。注意，由于内部实现和React自带的Function Component优化有冲突，`event`属性配置的事件不会触发`function component`的更新，所以这时候请使用`class`语法。
+
+更多事件请看[G2-图表事件](https://g2-v3.antv.vision/zh/docs/manual/tutorial/event)
+
+[MDXInstruction:importDemo:LegendClick](./demo/LegendClick.tsx)
+
 # Config 配置
 
 # 数据列配置

packages/console-line-chart/demo/LegendClick.tsx

@@ -0,0 +1,105 @@
+// @ts-nocheck
+import React from 'react';
+import { ConsoleLineChart } from '@alicloud/console-chart';
+
+const data = [
+  {
+    name: 'ECS',
+    data: [
+      ['201804', 31],
+      ['201805', 39],
+      ['201806', 32],
+      ['201807', 35],
+      ['201808', 31],
+      ['201809', 36],
+      ['201810', 32],
+      ['201811', 34],
+    ],
+  },
+  {
+    name: 'OSS',
+    data: [
+      ['201804', 12],
+      ['201805', 12],
+      ['201806', 12],
+      ['201807', 11],
+      ['201808', 10],
+      ['201809', 14],
+      ['201810', 12],
+      ['201811', 11],
+    ],
+  },
+  {
+    name: 'RDS',
+    data: [
+      ['201804', 48],
+      ['201805', 45],
+      ['201806', 43],
+      ['201807', 44],
+      ['201808', 41],
+      ['201809', 45],
+      ['201810', 42],
+      ['201811', 45],
+    ],
+  },
+];
+
+const ossConfig = {
+  yAxis: {
+    min: 30
+  }
+};
+
+const defaultConfig = {
+  yAxis: {
+    min: 0
+  }
+}
+
+interface State {
+  keys: string[];
+}
+
+interface Props {}
+
+class Demo extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    const defaultKeys = data.map(x => x.name);
+    this.state = {
+      keys: defaultKeys,
+    }
+  }
+
+  handleClick = (ev: any) => {
+    const { keys } = this.state;
+    const val = ev.data.value;
+    let newKeys = [];
+    if (keys.includes(val)) {
+      newKeys = keys.filter(x => x !== val);
+    } else {
+      newKeys = [...keys, val];
+    }
+    this.setState({ keys: newKeys });
+  };
+
+  render() {
+    const { keys } = this.state;
+    console.log(keys);
+
+    const config = !keys.includes('OSS') ? ossConfig : defaultConfig;
+
+    return (
+      <ConsoleLineChart
+        data={data}
+        config={config}
+        height={300}
+        event={{
+          'legend-item:click': this.handleClick,
+        }}
+      />
+    );
+  }
+}
+
+export default () => <Demo />;

packages/console-line-chart/demo/index.stories.tsx

@@ -13,6 +13,7 @@ import Stack from './Stack';
 import XAxisAsync from './XAxisAsync';
 import YAxisMin from './YAxisMin';
 import GradualColor from './GradualColor';
+import LegendClick from './LegendClick';
 
 storiesOf('ConsoleLineChart', module)
   .add('基本折线图', () => <Basic />)
@@ -27,3 +28,4 @@ storiesOf('ConsoleLineChart', module)
   .add('线条带点', () => <Dot />)
   .add('面积堆栈图', () => <Stack />)
   .add('颜色渐变图', GradualColor)
+  .add('图例点击控制', LegendClick)