---
order: 1
group:
  title: 图表
  order: 1
---

## 基础折线-折线面积图

单线图

```tsx
import React from 'react';
import * as Charts from 'edata-charts';
const props = {
  option: {
    legend: {
      show: false,
    },
  },
  data: {
    xData: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
    yData: [[80, 20, 30, 40, 50, 60, 70]],
  },
  unit: '单位:人',
  isShowArea: false,
  theme: {
    /**
     * 文本颜色
     */
    textColor: 'red',
    /**
     * 组件主色
     */
    primaryColor: '#50E1',
    secondColor: '#FDAFFF',
    thirdColor: '#DDD',
    colorList: ['#50E1', '#FDA568', '#DDD'],
  },
};
export default () => <Charts.SCLineChart {...props} />;
```

单线面积图

```tsx
import React from 'react';
import * as Charts from 'edata-charts';
const props = {
  option: {
    legend: {
      show: false,
    },
  },
  data: {
    xData: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
    yData: [[80, 20, 30, 40, 50, 60, 70]],
  },
  unit: '单位:人',
  isShowArea: true,
  theme: {
    colorList: ['#50E1A8', '#FDA568'],
  },
};
export default () => <Charts.SCLineChart {...props} />;
```

多线面积图

```tsx
import React from 'react';
import * as Charts from 'edata-charts';

const props = {
  option: {
    legend: {
      show: true,
    },
  },
  data: {
    xData: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
    yData: [
      [80, 20, 30, 40, 50, 60, 70],
      [20, 30, 40, 80, 70, 60, 30],
    ],
  },
  unit: '单位:人',
  isShowArea: false,
  theme: {
    colorList: ['#50E1A8', '#FDA568'],
  },
};

export default () => <Charts.SCLineChart {...props} />;
```

## API

| 参数       | 说明                                                                                        | 类型    |
| ---------- | ------------------------------------------------------------------------------------------- | ------- |
| size       | 容器的宽高                                                                                  | object  |
| data       | 图表数据                                                                                    | object  |
| option     | 图表配置项，具体配置请参照[echarts 配置项 ](https://www.echartsjs.com/zh/option.html#title) | object  |
| unit       | y 轴单位                                                                                    | string  |
| theme      | 主题                                                                                        | object  |
| isShowArea | 是否显示面积图                                                                              | boolean |

### data

| 参数  | 说明     | 类型  |
| ----- | -------- | ----- |
| xData | x 轴数据 | array |
| yData | y 轴数据 | array |

### option

| 参数        | 说明         | 类型    |
| ----------- | ------------ | ------- |
| legend.show | 是否显示标题 | boolean |

### size

| 参数   | 说明 | 类型           |
| ------ | ---- | -------------- |
| width  | 宽度 | number\|string |
| height | 高度 | number\|string |

### theme

| 参数      | 说明     | 类型  |
| --------- | -------- | ----- |
| lineColor | 折线颜色 | array |