---
title: BasicChart - 标准图表
nav:
  title: 基础组件
  path: /components
group:
  path: /
---

# BasicChart 标准图表

**图表内置了一些基本样式，尽量减少配置量。但是一些细微差异调整还是需要进行配置及修改。**

## 图表规范说明

基础组件

- 支持的图表类型有直线图、曲线图等 20 种图表，其中很多图表可以集成在同一个图形中形成混合图

tooltip 规范

- 头部显示数据名\类目名
- 内容部分显示各系列数据信息：系列色、系列名称、系列值、系列单位
- 头部和内容通过分割线隔开
- 缺省的数据系列不显示在内容部分上
- 数值颜色跟随系列色

xAxis 规范

- 显示轴线、刻度线、文字标签，不显示网格线
- 轴线、刻度线、文字标签色彩样式一致
- 刻度线方向向内
- <font color="red">类目类型图表中，两边是否采用留白？</font>

yAxis 规范

- 不显示轴线、刻度线、文字标签，显示网格线
- 网格线使用虚线`dashed`类型
- 坐标轴名称显示在顶部，和坐标轴对齐

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 实例对象

通过传递`ref`可以获取到创建出来的 echarts 实例对象。 `BasicChart`、`BasicChart.BarChart`、`BasicChart.LineChart`都支持。 <code src="./demos/ChartInstance.tsx">

## API

### BasicChart

| 参数      | 说明                       | 类型   | 默认值 | 可选值 |
| --------- | -------------------------- | ------ | ------ | ------ |
| className | 图表容器类名               | string | -      | -      |
| option    | echarts 图表配置项`option` | object | -      | -      |

`option` 参考 echarts 库 https://echarts.apache.org/zh/index.html

### BarChart（基本柱状图）

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- | --- |
| className | 图表容器类名 | string | - | - |
| category | x 轴类目配置，有该配置则为`category`类型图表，否则为`time`类型的图表 | Array[string | number] | - | - |
| dataSource | 图表容器类名 | object | - | - |

dataSource | 参数 | 说明 | 类型 | 默认值 | 可选值 | | --- | --- | --- | --- | --- | | name | 数据系列名称，有 name 时才会显示图例 | string | - | - | | unit | 数据单位，显示在`tooltip`和`yAxis`上 | string | - | - | | data | 图表数据，`category`类型和 `time`类型有所区别，<font color="#008dff">详见案例</font> | Array[] | - | - |

### LineChart（基本折线图）

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- | --- |
| className | 图表容器类名 | string | - | - |
| category | x 轴类目配置，有该配置则为`category`类型图表，否则为`time`类型的图表 | Array[string | number] | - | - |
| 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',
    },
  ],
};
```
