u-echarts

<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>
    import uCharts from '@/components/u-charts/u-charts.js';
    var _self;
    var canvaPie=null;
    export default {
        data() {
            return {
                cWidth:'',
                cHeight:'',
                pixelRatio:1,
                serverData:'',
            }
        },
        onLoad() {
            _self = this;
            this.cWidth=uni.upx2px(750);
            this.cHeight=uni.upx2px(500);
            this.getServerData();
        },
        methods: {
            getServerData(){
                uni.request({
                    url : '',
                    data:{
                    },
                    success: function(res) {
                       let Pie={categories:[],series:[]};

                                               Pie.series=[{
                                                    "name": "一班",
                                                       "data": 50,
                                                   color:'#409eff'
                                               },{
                                                    "name": "一班",
                                                       "data": 50,
                                                   color:'#e6a23c'
                                               },{
                                                    "name": "一班",
                                                       "data": 50,
                                                   color:'#f56c6c'
                                               }];
                                                                    _self.showPie("canvasPie",Pie);
                    },
                    fail: () => {
                        _self.tips="网络错误，小程序端请检查合法域名";
                    },
                });
            },
            showPie(canvasId,chartData){
                canvaPie=new uCharts({
                    $this:_self,
                    canvasId: canvasId,
                    type: 'pie',
                    fontSize:11,
                    legend:true,
                    background:'#FFFFFF',
                    pixelRatio:_self.pixelRatio,
                    series: chartData.series,
                    animation: true,
                    width: _self.cWidth*_self.pixelRatio,
                    height: _self.cHeight*_self.pixelRatio,
                    dataLabel: true,
                    extra: {
                        pie: {
                          lableWidth:15
                        }
                    },
                });
            },
            // touchPie(e){
            //     canvasPie.showToolTip(e, {
            //         format: function (item) {
            //             return item.name + ':' + item.data 
            //         }
            //     });
            // },
        }
    }

</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>