Home

Awesome

Demo

微信小程序 wepy 图表控件 wepy-com-pie

说明

基于微信小程序canvas开发的图表控件,适用于wepy框架

使用

引入

使用

<template>     
    <pie :dataSource.sync="dataSource"/>
</template>

<script>
  import wepy from 'wepy'
  import Pie from '@/components/Pie'

  export default class Index extends wepy.page {
    components = {
      pie: Pie
    }
  }
</script>

Props 传值

属性默认值类型必填说明
dataSource[]array图表数据

Tips:

[{
   'key': '1',
   'value': '上海',
   'count': 251,
   'color': '#CCFF66'
}, ...]

Emit 事件

函数参数返回值说明
onTapCanvasItemclickedItemvoid选中canvas item

Pie UI data

属性默认值类型说明
canvasMargin15numbercanvas 距离屏幕两侧距离
canvasWidth屏幕宽度 - canvasMargin * 2numbercanvas 宽度
canvasHeight250numbercanvas 高度
radius100number圆半径
lineColor'#808080'string标注线颜色
textColor'#010101'string标注字体颜色
fontSize13number标注字体大小