目前按照选取元素确定了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>
2 个回复
古正龙国君 - 老三的古代
目前按照选取元素确定了dom
但是显示的内容却出现了问题,
即初始化代码在mounted内,同步初始化图标可正常显示,但是异步确还是如本帖子一样乱了,
完整代码如下,
陌上华年 (作者)
已完成兼容
https://ext.dcloud.net.cn/plugin?id=4613