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