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