---
name: 开始使用
route: /
order: 1
---

# react-icecream-charts

icecream 风格的图表库。

## 思路

此图表库旨在为七牛提供 icecream 风格的图表库，在设计思路上一直秉承着使用最少的配置，满足更多的业务场景。

### 优化配置项

以 `options.title` 为例

```ts
// 以前的写法
{
  title: {
    text: '标题'
  }
}

// 现在的写法
{
  title: '标题'
}
```

### 去掉了业务不需要的配置项

每个 options 都是经过挑选后有必要再暴露出去，细节可自行查看各个 options 的类型。

### 使用最少的配置

只需要传入 series，就能符合最基本的业务场景

```tsx
import { LineChart } from 'react-icecream-charts'

<LineChart series={series} />
```


## 安装

```ts
yarn add react-icecream-charts
```

## 使用

- [面积图](http://ue-env-chart-icecream.qa.qiniu.io/components/area)
- [面积曲线图](http://ue-env-chart-icecream.qa.qiniu.io/components/areaspline)
- [条形图](http://ue-env-chart-icecream.qa.qiniu.io/components/bar)
- [柱状图](http://ue-env-chart-icecream.qa.qiniu.io/components/column)
- [饼图](http://ue-env-chart-icecream.qa.qiniu.io/components/pie)
- [线图](http://ue-env-chart-icecream.qa.qiniu.io/components/line)
- [曲线图](http://ue-env-chart-icecream.qa.qiniu.io/components/spline)
- [散点图](http://ue-env-chart-icecream.qa.qiniu.io/components/scatter)
- [地图](http://ue-env-chart-icecream.qa.qiniu.io/components/map)

## 优化

参考[Limiting Highchart Rerenders](https://github.com/kirjs/react-highcharts#limiting-highchart-rerenders)，重绘图表的开销是很大的。如果可以你应该尽可能的保持这些属性引用相等: `options, plotOptions, plotSeriesOptions, series, afterRendered`.

## 开发

### base

```sh
yarn
yarn build:dev
```