目前按照选取元素确定了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
复制代码
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