docs: line-chart add OneDotToLine

Author: seekhow

packages/console-line-chart/README.md

@@ -25,6 +25,10 @@ import { ConsoleLineChart } from '@alicloud/console-chart';
 
 [MDXInstruction:importDemo:XLabel](./demo/XLabel.tsx)
 
+## 只有一个点数据时展示线
+
+[MDXInstruction:importDemo:OneDotToLine](./demo/OneDotToLine.tsx)
+
 ## 自定义x轴时间刻度间距
 
 通过传入`tickInterval`字段，来配置坐标轴上每个刻度之间的差值大小。注意：如果是`type`设置为`time`的话，`tickInterval`字段的值必须是时间戳（毫秒）。

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import { ConsoleLineChart } from '@alicloud/console-chart';
+
+const data = [
+  {
+    name: 'A产品',
+    data: [
+      ['2015', 20]
+    ],
+  },
+];
+
+const config: any = {};
+
+export default () => {
+  const dataLength = data[0].data.length;
+  if (dataLength === 1) {
+    config.guide = {
+      line: {
+        start: ['0%', '0'],
+        end: ['100%', '0'],
+        lineStyle: {
+          stroke: '#2196F3',
+          lineWidth: 2,
+          lineDash: [ 0, 0 ]
+        },
+      }
+    };
+  }
+  return (
+    <ConsoleLineChart data={data} config={config} height={300} />
+  );
+};

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

@@ -14,6 +14,7 @@ import XAxisAsync from './XAxisAsync';
 import YAxisMin from './YAxisMin';
 import GradualColor from './GradualColor';
 import LegendClick from './LegendClick';
+import OneDotToLine from './OneDotToLine';
 
 storiesOf('ConsoleLineChart', module)
   .add('基本折线图', () => <Basic />)
@@ -29,3 +30,4 @@ storiesOf('ConsoleLineChart', module)
   .add('面积堆栈图', () => <Stack />)
   .add('颜色渐变图', GradualColor)
   .add('图例点击控制', LegendClick)
+  .add('只有一个点数据时展示线', OneDotToLine)