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

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

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

  • 标题 / 粗斜体
  • 代码片段
  • 超链接 / 图片 / 视频
  • 列表 / 引用

文章内容较多时,可以用标题分段 :

## 大标题 
### 小标题

斜体 / 粗体 :

**粗体** 
*斜体*
***粗斜体***

代码片段 :

``` javascript
代码片段
```

超链接 :

[链接文字](链接地址) 例: [百度](http://www.baidu.com)

图片 :

![图片说明](图片地址) 例: ![百度logo](http://www.baidu.com/img/bdlogo.gif)

视频 :

!![视频说明](视频地址) 例: !![优酷视频](http://youku.com)

有序列表 :

1. 123
2. 123
3. 123

无序列表 :

- 123
- 123
- 123

引用 : ( 双回车后结束引用 )

> 引用内容
引用内容
引用内容