在uni-app项目中基于uCharts绘制统计图-以饼图为例

1. 在dom中用 canvas绘制一个容器。

   <view class="qiun-columns" v-show="pieData.length!=0">
                        <!-- 饼状图 -->
                        <view class="qiun-bg-white qiun-title-bar qiun-common-mt">
                            <view class="qiun-title-dot-light">数据饼图</view>
                        </view>
                        <view class="qiun-charts">
                            <!--#ifdef MP-ALIPAY -->
                            <canvas canvas-id="canvasPie" id="canvasPie" class="charts" :width="cWidth*pixelRatio"
                                :height="cHeight*pixelRatio" :style="{'width':cWidth+'px','height':cHeight+'px'}"
                                @touchstart="touchPie($event,'canvasPie')"></canvas>
                            <!--#endif-->
                            <!--#ifndef MP-ALIPAY -->
                            <canvas canvas-id="canvasPie" id="canvasPie" class="charts"
                                @touchstart="touchPie($event,'canvasPie')"></canvas>
                            <!--#endif-->
                        </view>
                    </view>

   2、 引用组件，定义对象

<script>
import uCharts from '@/components/u-charts/u-charts.js';
var canvasObj = {};
export default {
        components: {
            uCharts
        },
        data() {
            return {
                cWidth: '',
                cHeight: '',
                cWidth2: '', //横屏图表
                cHeight2: '', //横屏图表
                pixelRatio: 1,//像素比
                pieData: [{
                    "name": "",
                    "data": 0
                }],
                circular: true,
                  }，
               onLoad(){
            this.cWidth = uni.upx2px(750);
            this.cHeight = uni.upx2px(500);
            this.cWidth2 = uni.upx2px(700);
            this.cHeight2 = uni.upx2px(1100);
                       this.showPie("canvasPie", data);
                     },
               methods: {
                       
              showPie(canvasId, chartData) {
                canvasObj[canvasId] = new uCharts({
                    $this: _self,
                    canvasId: canvasId,//页面组件canvas-id
                    type: 'pie',//图表类型
                    fontSize: 11,
                    padding: [15, 15, 0, 15],
                    legend: {
                        show: true,
                        padding: 5,
                        lineHeight: 11,
                        margin: 0,
                    },
                    background: '#FFFFFF',
                    pixelRatio: _self.pixelRatio,
                    series: chartData,
                    animation: false,
                    width: _self.cWidth * _self.pixelRatio,
                    height: _self.cHeight * _self.pixelRatio,
                    dataLabel: true,
                    extra: {
                        pie: {
                            lableWidth: 15
                        }
                    },
                });
            },
            touchPie(e, id) {
                canvasObj[id].showToolTip(e, {
                    format: function(item) {
                        return item.name + ':' + item.data
                    }
                });
            },

                 }
}
</script>