# 饼状图

# 使用案例

饼状图

# 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