陌上华年
陌上华年
  • 发布:2020-06-27 18:25
  • 更新:2021-04-02 16:16
  • 阅读:1259

分类:uni-app
2020-06-27 18:25 负责人:无 分享
已邀请:
古正龙国君

古正龙国君 - 老三的古代

目前按照选取元素确定了dom

     const el = document.querySelector('#myChart')    
     const newCanvas = document.createElement('canvas')  

但是显示的内容却出现了问题,
即初始化代码在mounted内,同步初始化图标可正常显示,但是异步确还是如本帖子一样乱了,


完整代码如下,

<template>  
	<view class="qiun-columns">  
		<view class="qiun-bg-white qiun-title-bar qiun-common-mt" >  
			<view class="qiun-title-dot-light">饼状图</view>  
		</view>  
		<view class="qiun-charts" >  
			<canvas canvas-id="canvasPie" id="canvasPie" class="charts" @touchstart="touchPie"></canvas>  
		</view>  
	</view>  
</template>  
  
<script>  
	let _self;  
	export default {  
		data() {  
			return {  
				cWidth:'',  
				cHeight:'',  
				pixelRatio:1,  
			}  
		},  
		onLoad() {  
			_self = this;  
			this.cWidth=uni.upx2px(750);  
			this.cHeight=uni.upx2px(500);  
			  
			// setTimeout(this.getServerData,3000);  
		},  
		mounted(){  
			setTimeout(this.getServerData,3000);  
			// this.getServerData();  
		},  
		methods: {  
			getServerData(){  
				const data = [{  
				  name: '其他消费',  
				  y: 6371664,  
				  const: 'const'  
				}, {  
				  name: '生活用品',  
				  y: 7216301,  
				  const: 'const'  
				}, {  
				  name: '通讯物流',  
				  y: 1500621,  
				  const: 'const'  
				}, {  
				  name: '交通出行',  
				  y: 586622,  
				  const: 'const'  
				}, {  
				  name: '饮食',  
				  y: 900000,  
				  const: 'const'  
				}];  
				let ele=document.getElementById("canvasPie").querySelector("canvas");  
				const chart = new F2.Chart({  
				  // id: 'canvasPie',  
				  el:ele,  
				  pixelRatio: _self.pixelRatio,  
				  width:_self.cWidth*_self.pixelRatio,  
				  height:_self.cHeight*_self.pixelRatio  
				    
				});  
				  
				chart.source(data);  
				chart.coord('polar', {  
				  transposed: true,  
				  radius: 0.75  
				});  
				chart.legend(false);  
				chart.axis(false);  
				chart.tooltip(false);  
				  
				// 添加饼图文本  
				chart.pieLabel({  
				  sidePadding: 40,  
				  label1: function label1(data, color) {  
				    return {  
				      text: data.name,  
				      fill: color  
				    };  
				  },  
				  label2: function label2(data) {  
				    return {  
				      text: '¥' + String(Math.floor(data.y * 100) / 100).replace(/\B(?=(\d{3})+(?!\d))/g, ','),  
				      fill: '#808080',  
				      fontWeight: 'bold'  
				    };  
				  }  
				});  
				  
				chart.interval()  
				  .position('const*y')  
				  .color('name', [ '#1890FF', '#13C2C2', '#2FC25B', '#FACC14', '#F04864' ])  
				  .adjust('stack');  
				chart.render();  
			},  
		}  
	}  
</script>  
  
<style>  
page{background:#F2F2F2;width: 750upx;overflow-x: hidden;}  
.qiun-padding{padding:2%; width:96%;}  
.qiun-wrap{display:flex; flex-wrap:wrap;}  
.qiun-rows{display:flex; flex-direction:row !important;}  
.qiun-columns{display:flex; flex-direction:column !important;}  
.qiun-common-mt{margin-top:10upx;}  
.qiun-bg-white{background:#FFFFFF;}  
.qiun-title-bar{width:96%; padding:10upx 2%; flex-wrap:nowrap;}  
.qiun-title-dot-light{border-left: 10upx solid #0ea391; padding-left: 10upx; font-size: 32upx;color: #000000}  
.qiun-charts{width: 750upx; height:500upx;background-color: #FFFFFF;}  
.charts{width: 750upx; height:500upx;background-color: #FFFFFF;}  
</style>  

陌上华年

陌上华年 (作者)

已完成兼容
https://ext.dcloud.net.cn/plugin?id=4613

该问题目前已经被锁定, 无法添加新回复