关于vue.js:在uniapp项目中基于uCharts绘制统计图以饼图为例

8次阅读

共计 1570 个字符，预计需要花费 4 分钟才能阅读完成。

在 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>

正文完