BasicChart.md 5.35 KB
Newer Older
涂茜's avatar
涂茜 committed
1 2 3 4 5 6 7 8 9
---
title: BasicChart - 标准图表
nav:
  title: 基础组件
  path: /components
group:
  path: /
---

10 11 12 13 14
# BasicChart 标准图表

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

## 图表规范说明
涂茜's avatar
涂茜 committed
15 16 17 18 19

基础组件

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

崔佳豪's avatar
崔佳豪 committed
20
tooltip 规范
涂茜's avatar
涂茜 committed
21

崔佳豪's avatar
崔佳豪 committed
22 23 24 25 26
- 头部显示数据名\类目名
- 内容部分显示各系列数据信息:系列色、系列名称、系列值、系列单位
- 头部和内容通过分割线隔开
- 缺省的数据系列不显示在内容部分上
- 数值颜色跟随系列色
涂茜's avatar
涂茜 committed
27

崔佳豪's avatar
崔佳豪 committed
28
xAxis 规范
涂茜's avatar
涂茜 committed
29

崔佳豪's avatar
崔佳豪 committed
30 31 32 33
- 显示轴线、刻度线、文字标签,不显示网格线
- 轴线、刻度线、文字标签色彩样式一致
- 刻度线方向向内
- <font color="red">类目类型图表中,两边是否采用留白?</font>
涂茜's avatar
涂茜 committed
34

崔佳豪's avatar
崔佳豪 committed
35
yAxis 规范
涂茜's avatar
涂茜 committed
36

崔佳豪's avatar
崔佳豪 committed
37 38 39
- 不显示轴线、刻度线、文字标签,显示网格线
- 网格线使用虚线`dashed`类型
- 坐标轴名称显示在顶部,和坐标轴对齐
涂茜's avatar
涂茜 committed
40

崔佳豪's avatar
崔佳豪 committed
41 42 43 44 45
axisPointer 规范

- 类目类型图表中,指示器采用阴影`shadow`类型
- 非类目类型图标中,指示器采用`line`类型,line 为虚线,在图形上方,标记下方

46
## 基本柱状图
崔佳豪's avatar
崔佳豪 committed
47

48
`BarChart`拥有默认配置的柱状图,适用于仅包含柱状图的使用场景。
崔佳豪's avatar
崔佳豪 committed
49

50
### 类目类型柱状图
崔佳豪's avatar
崔佳豪 committed
51 52 53

<code src="./demos/BaseBar.tsx">

54
### 时间类型柱状图
崔佳豪's avatar
崔佳豪 committed
55 56 57

<code src="./demos/TimeTypeBar.tsx">

58
### 堆叠柱状图
崔佳豪's avatar
崔佳豪 committed
59 60 61

<code src="./demos/StackBar.tsx">

62
## 基本折线图
崔佳豪's avatar
崔佳豪 committed
63

64
`LineChart`拥有默认配置的折线图,适用于仅包含折线图的使用场景。
崔佳豪's avatar
崔佳豪 committed
65

66
### 类目类型折线图
崔佳豪's avatar
崔佳豪 committed
67 68 69

<code src="./demos/BaseLine.tsx">

70
### 面积图
崔佳豪's avatar
崔佳豪 committed
71 72 73

<code src="./demos/AreaLine.tsx">

74
### 时间类型折线图
崔佳豪's avatar
崔佳豪 committed
75 76 77

<code src="./demos/TimeTypeLine.tsx">

78
## 自定义图表
崔佳豪's avatar
崔佳豪 committed
79 80 81

`BasicChart`通用 echarts 图表,通过`option`传递配置项。 <code src="./demos/Basic.tsx">

82
## 获取 echarts 实例对象
崔佳豪's avatar
崔佳豪 committed
83 84 85

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

86
## API
崔佳豪's avatar
崔佳豪 committed
87

88
### BasicChart
崔佳豪's avatar
崔佳豪 committed
89 90 91 92 93 94 95 96

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

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

97
### BarChart(基本柱状图)
涂茜's avatar
涂茜 committed
98 99

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
崔佳豪's avatar
崔佳豪 committed
100 101 102 103 104 105 106
| --- | --- | --- | --- | --- | --- |
| 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[] | - | - |

107
### LineChart(基本折线图)
崔佳豪's avatar
崔佳豪 committed
108 109 110 111 112 113 114 115

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- | --- |
| 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[] | - | - |
116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181

## 常用配置

### 图表标题前后缀

使用了 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',
    },
  ],
};
```