---
lang: zh
---

# PieChart - 饼状图

饼状图

## 基础用法

饼状图用法。

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

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

## Attributes

|  参数  |                                            说明                                            |  类型  |                                                                        可选值                                                                         |                                                               默认值                                                                |
| :----: | :----------------------------------------------------------------------------------------: | :----: | :---------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------: |
| theme  |                                           主题色                                           | String |                                                                    "light"/"dark"                                                                     |                                                               "light"                                                               |
| loading  |                           图表是否处于加载状态                                          | Boolean |                                                                    true/false                                                                     |                                                               false                                                               |
| 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 |  data: Array, orient: String, left: String/Number, top: String/Number |                                        {  orient: "horizontal", left: "center", top: "top" }                                       |
| radius |                      饼图的半径. 数组的第一项是内半径，第二项是外半径，值可为具体数值，也可以是百分比                      | Array  |                                                                 ["0%", "55%"]/[0, 55]                                                                 |                                                            ["0%", "55%"]                                                            |
| center |       饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标，值可为具体数值，也可以是百分比，建议设置成百分比        | Array  |                                                               ["50%", "55%"]/[500, 500]                                                               |                                                           ["50%", "50%"]                                                            |
| quantifiers  |                                    数据量词单位                                           | String |                                                                                                                                    |                                                               null                                                               |
|  data  |                                          数据内容                                          | Array  |                                                                                                                                                       | [{ value: 335, name: "Email" },{ value: 310, name: "Union Ads" },{ value: 234, name: "Video Ads" },{ value: 135, name: "Direct" }] |
````
