fix(BasicChart): 文档补充

packages/base-components/BasicChart/src/BasicChart.md

@@ -7,7 +7,11 @@ group:
   path: /
 ---
 
-## BasicChart 标准图表
+# BasicChart 标准图表
+
+**图表内置了一些基本样式，尽量减少配置量。但是一些细微差异调整还是需要进行配置及修改。**
+
+## 图表规范说明
 
 基础组件
 
@@ -39,49 +43,49 @@ axisPointer 规范
 - 类目类型图表中，指示器采用阴影`shadow`类型
 - 非类目类型图标中，指示器采用`line`类型，line 为虚线，在图形上方，标记下方
 
-### 基本柱状图
+## 基本柱状图
 
 `BarChart`拥有默认配置的柱状图，适用于仅包含柱状图的使用场景。
 
-#### 类目类型柱状图
+### 类目类型柱状图
 
 <code src="./demos/BaseBar.tsx">
 
-#### 时间类型柱状图
+### 时间类型柱状图
 
 <code src="./demos/TimeTypeBar.tsx">
 
-#### 堆叠柱状图
+### 堆叠柱状图
 
 <code src="./demos/StackBar.tsx">
 
-### 基本折线图
+## 基本折线图
 
 `LineChart`拥有默认配置的折线图，适用于仅包含折线图的使用场景。
 
-#### 类目类型折线图
+### 类目类型折线图
 
 <code src="./demos/BaseLine.tsx">
 
-#### 面积图
+### 面积图
 
 <code src="./demos/AreaLine.tsx">
 
-#### 时间类型折线图
+### 时间类型折线图
 
 <code src="./demos/TimeTypeLine.tsx">
 
-### 自定义图表
+## 自定义图表
 
 `BasicChart`通用 echarts 图表，通过`option`传递配置项。 <code src="./demos/Basic.tsx">
 
-### 获取 echarts 实例对象
+## 获取 echarts 实例对象
 
 通过传递`ref`可以获取到创建出来的 echarts 实例对象。 `BasicChart`、`BasicChart.BarChart`、`BasicChart.LineChart`都支持。 <code src="./demos/ChartInstance.tsx">
 
-### API
+## API
 
-#### BasicChart
+### BasicChart
 
 | 参数      | 说明                       | 类型   | 默认值 | 可选值 |
 | --------- | -------------------------- | ------ | ------ | ------ |
@@ -90,7 +94,7 @@ axisPointer 规范
 
 `option` 参考 echarts 库 https://echarts.apache.org/zh/index.html
 
-#### BarChart（基本柱状图）
+### BarChart（基本柱状图）
 
 | 参数 | 说明 | 类型 | 默认值 | 可选值 |
 | --- | --- | --- | --- | --- | --- |
@@ -100,7 +104,7 @@ axisPointer 规范
 
 dataSource | 参数 | 说明 | 类型 | 默认值 | 可选值 | | --- | --- | --- | --- | --- | | name | 数据系列名称，有 name 时才会显示图例 | string | - | - | | unit | 数据单位，显示在`tooltip`和`yAxis`上 | string | - | - | | data | 图表数据，`category`类型和 `time`类型有所区别，<font color="#008dff">详见案例</font> | Array[] | - | - |
 
-#### LineChart（基本折线图）
+### LineChart（基本折线图）
 
 | 参数 | 说明 | 类型 | 默认值 | 可选值 |
 | --- | --- | --- | --- | --- | --- |
@@ -109,3 +113,69 @@ dataSource | 参数 | 说明 | 类型 | 默认值 | 可选值 | | --- | --- | --
 | dataSource | 图表容器类名 | object | - | - |
 
 dataSource | 参数 | 说明 | 类型 | 默认值 | 可选值 | | --- | --- | --- | --- | --- | | name | 数据系列名称，有 name 时才会显示图例 | string | - | - | | smooth | 平滑曲线模式 | boolean | true | - | | lienType | 折线图/面积图显示 | string | `line` | `line`、`area` | | unit | 数据单位，显示在`tooltip`和`yAxis`上 | string | - | - | | data | 图表数据，`category`类型和 `time`类型有所区别，<font color="#008dff">详见案例</font> | Array[] | - | - |
+
+## 常用配置
+
+### 图表标题前后缀
+
+使用了 echarts 富标题`rich`，预定义了常用标题样式。
+
+- `prefix`: 标题前缀，默认是系统主题颜色色块装饰。
+- `t`: 文本内容。
+- `suffix`: 标题后缀。使用方法如下，案例参见自定义图表。
+
+```js
+{
+  title: {
+    text: '{prefix|}{t|今日供水量}{suffix|（单位：m）}',
+  },
+}
+```
+
+<br/>
+
+如何覆盖样式？添加`rich`属性覆盖对应样式即可。
+
+```js
+{
+  title: {
+    text: '{prefix|}{t|今日供水量}{suffix|（单位：m）}',
+  },
+  textStyle: {
+    rich: {
+      prefix: {},
+      t: {},
+      suffix: {},
+    }
+  },
+}
+```
+
+### 使用面积图
+
+绘制面积图需要在线性图表基础上配置`areaStyle`。
+
+```js
+const option = {
+  series: [{
+    type: 'line',
+    areaStyle: {}, // 传递一个空对象即可使用默认配置的面积图样式了。
+  }];
+}
+```
+
+如何覆盖样式？详细配置`areaStyle`中的属性就可以覆盖默认样式。
+
+### tooltip 上单位配置
+
+默认会使用`y`轴配置的`name`属性作为单位显示。在`series`上配置一个`unit`属性可以来配置单位。
+
+```js
+const option = {
+  series: [
+    {
+      unit: 'm',
+    },
+  ],
+};
+```

packages/base-components/BasicChart/src/demos/BasePieChartDemo.tsx

@@ -40,7 +40,11 @@ const Demo = () => {
       },
     ],
   };
-  return <BasicChart option={option} />;
+  return (
+    <div style={{ height: 300 }}>
+      <BasicChart option={option} />
+    </div>
+  );
 };
 
 export default Demo;

packages/base-components/BasicChart/src/demos/ChartInstance.tsx

@@ -25,7 +25,11 @@ const Demo = () => {
     console.log(ref.current);
   }, []);
 
-  return <BasicChart ref={ref} option={option} />;
+  return (
+    <div style={{ height: 300 }}>
+      <BasicChart ref={ref} option={option} />
+    </div>
+  );
 };
 
 export default Demo;

packages/base-components/BasicChart/src/demos/StackBar.tsx

@@ -24,5 +24,9 @@ export default () => {
     },
   ];
 
-  return <BarChart category={category} dataSource={dataSource} />;
+  return (
+    <div style={{ height: 300 }}>
+      <BarChart category={category} dataSource={dataSource} />
+    </div>
+  );
 };

packages/base-components/BasicChart/src/demos/TimeTypeBar.tsx

@@ -21,5 +21,9 @@ export default () => {
       data: getData(),
     },
   ];
-  return <BarChart dataSource={dataSource} />;
+  return (
+    <div style={{ height: 300 }}>
+      <BarChart dataSource={dataSource} />
+    </div>
+  );
 };

packages/base-components/BasicChart/src/demos/TimeTypeLine.tsx

@@ -21,5 +21,9 @@ export default () => {
       data: getData(),
     },
   ];
-  return <LineChart lineType="area" dataSource={dataSource} />;
+  return (
+    <div style={{ height: 300 }}>
+      <LineChart lineType="area" dataSource={dataSource} />
+    </div>
+  );
 };