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

分类: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

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