# 饼状图
# 使用案例
# HTML
<!-- 需要给.canvas-wrapper元素设置宽高 -->
<div class="canvas-wrapper">
<canvas id="canvas3"></canvas>
</div>
# JS
const options = {
type: 'pie',
title: {
text: '服装品类销售饼状图'
},
legend: {
position: 'left'
},
bgColor: '#fbfbfb',
labels: ['T恤', '牛仔裤', '连衣裙', '毛衣', '七分裤', '短裙', '羽绒服'],
datasets: [{
data: [334, 278, 190, 235, 260, 200, 141]
}]
};
new Schart('canvas3', options);
# options 配置
参数 | 说明 | 必传 | 类型 | 默认值 |
---|---|---|---|---|
datasets | 图表数据,详情 | 是 | array | - |
labels | 饼状每个扇形的分类或名称,用于图例文本 | 是 | array | - |
type | 图表类型,饼状图必须设为pie | 是 | string | bar |
showValue | 在图表中显示数值 | 否 | boolean | true |
topPadding | 画布内的上边距 | 否 | number | 60 |
leftPadding | 画布内的左边距 | 否 | number | 50 |
rightPadding | 画布内的右边距 | 否 | number | 10 |
bottomPadding | 画布内的下边距 | 否 | number | 50 |
bgColor | 画布背景色 | 否 | string | #fff |
title | 标题,详情 | 否 | object | - |
legend | 图例,详情 | 否 | object | - |
radius | 饼图半径 | 否 | number | 100 |
colorList | 颜色列表,用于填充扇形颜色 | 否 | array | - |
# datasets
参数 | 说明 | 必传 | 类型 | 默认值 |
---|---|---|---|---|
data | 图表数据值 | 是 | array | - |
fillColor | 扇形填充颜色 | 否 | string | - |
# title
参数 | 说明 | 必传 | 类型 | 默认值 |
---|---|---|---|---|
text | 标题文本,没传则不显示标题 | 否 | string | - |
color | 标题颜色 | 否 | string | #666 |
position | 标题位置,可选top和bottom | 否 | string | top |
font | 字体 | 否 | string | bold 18px Arial |
top | position为top时,标题位置与画布顶部距离 | 否 | number | 10 |
bottom | position为bottom时,标题位置与画布底部距离 | 否 | number | 5 |
# legend
参数 | 说明 | 必传 | 类型 | 默认值 |
---|---|---|---|---|
display | 显示图例 | 否 | boolean | true |
color | 图例文本颜色 | 否 | string | #666 |
position | 图例位置,可选top、bottom和left | 否 | string | top |
font | 字体 | 否 | string | 14px Arial |
top | position为top或left时,图例位置与画布顶部距离 | 否 | number | 45 |
bottom | position为bottom时,图例位置与画布底部距离 | 否 | number | 15 |