---
lang: zh
---

# BarChart - 折线图

折线图

## 基础用法

折线图用法。

<LineChartIci style="height: 400px"/>

````vue{2}
<template>
  <LineChartIci style="height: 400px"/>
</template>
```

## Attributes

|    参数     |                                                                                                                                                   说明                                                                                                                                                    |     类型      |                                 可选值                                  |                            默认值                             |
| :---------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------: | :---------------------------------------------------------------------: | :-----------------------------------------------------------: |
|    theme    |                                                                                                                                                  主题色                                                                                                                                                   |    String     |                             "light"/"dark"                              |                            "light"                            |
|   loading   |                                                                                                                                           图表是否处于加载状态                                                                                                                                            |    Boolean    |                               true/false                                |                             false                             |
|   smooth    |                                                                                                                                             是否平滑曲线显示                                                                                                                                              |    Boolean    |                               true/false                                |                             true                              |
|   boundaryGap    |                                                                                                                                             坐标轴两边是否留白，默认留白                                                                                                                                             |    Boolean    |                               true/false                                |                             true                              |
|    title    |     标题相关参数，包括标题内容，字体大小，标题离容器左侧的距离，标题离容器上侧的距离。若为字符串类型，则直接显示为标题内容。left 和 top 的值可以是像 20 这样的具体像素值，也可以是像 '20%' 这样相对于容器高宽的百分比；其中 left 也可选"left"、"center"、"right" ，top 可选"top"、"middle"、"bottom"      | String/Object | text: String, fontSize: Number, left: String/Number, top: String/Number |   { text: null, fontSize: 18, left: "center", top: "top" }    |
|   legend    | 图例相关参数，包括图例列表的布局朝向，图例离容器左侧的距离，图例离容器上侧的距离。其中布局朝向可选值为 "horizontal"、"vertical"; left 和 top 的值可以是像 20 这样的具体像素值，也可以是像 '20%' 这样相对于容器高宽的百分比；其中 left 也可选"left"、"center"、"right" ，top 可选"top"、"middle"、"bottom" |    Object     |         orient: String, left: String/Number, top: String/Number         |     { orient: "horizontal", left: "center", top: "top" }      |
| quantifiers |                                                                                                                                               数据量词单位                                                                                                                                                |     Array     |                                                                         |                             null                              |
|    unit     |                                                                                                                                               Y 坐标轴单位                                                                                                                                                |    String     |                                                                         |                             null                              |
|    xAxis    |                                                                                                                                               X 坐标轴内容                                                                                                                                                |     Array     |                                                                         |         ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]         |
|    yAxis    |                                                                                                                             Y 坐标轴相关参数，包括最大值，最小值，分割间隔。                                                                                                                              |    Object     |               max: Number, min: Number, interval: Number                |                 max: null, min: 0, interval: null                 |
|    data     |                                                                                                                                              折线图数据内容                                                                                                                                               |     Array     |                        name: String, data: Array                        | [{ name: "Email", data: [120, 132, 101, 134, 90, 230, 210] }] |
````
