124 lines
2.4 KiB
Vue
124 lines
2.4 KiB
Vue
<style lang='scss' scoped>
|
|
.canvas{
|
|
width: 100%;
|
|
}
|
|
</style>
|
|
<template>
|
|
<view class="chart" :style="{height: height+'rpx',width:width+'rpx'}">
|
|
<canvas :canvas-id="canvasId" :style="{height: height+'rpx',width:width+'rpx'}" class="canvas"
|
|
@touchstart="touchRing" ></canvas>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
let _self;
|
|
import uCharts from '@/components/u-charts/u-charts.js';
|
|
export default {
|
|
data() {
|
|
return {
|
|
canvaRing:null,
|
|
cWidth:'',
|
|
cHeight:'',
|
|
pixelRatio:1,
|
|
isShow:false,
|
|
}
|
|
},
|
|
props:{
|
|
canvasId:{
|
|
type:String,
|
|
default:"canvasColumn"
|
|
},
|
|
width:{
|
|
type:[String,Number],
|
|
default:750
|
|
},
|
|
height:{
|
|
type:[String,Number],
|
|
default:550
|
|
},
|
|
chartData:{
|
|
type:[Object],
|
|
default:null
|
|
}
|
|
},
|
|
watch:{
|
|
chartData(newVal){
|
|
console.log(newVal,"newVal");
|
|
if(this.isShow){
|
|
this.showRing(this.canvasId,newVal);
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
_self = this;
|
|
this.cWidth=uni.upx2px(this.width);
|
|
this.cHeight=uni.upx2px(this.height);
|
|
},
|
|
mounted() {
|
|
this.isShow = true;
|
|
if(!!this.chartData){
|
|
console.log("ok?");
|
|
this.showRing(this.canvasId,this.chartData);
|
|
}
|
|
},
|
|
methods: {
|
|
toJSON(){},
|
|
showRing(canvasId,chartData){
|
|
this.canvaRing=new uCharts({
|
|
$this:_self,
|
|
canvasId: canvasId,
|
|
type: 'ring',
|
|
fontSize:11,
|
|
padding:[5,5,5,5],
|
|
legend:{
|
|
show:true,
|
|
position:'right',
|
|
float:'center',
|
|
itemGap:10,
|
|
padding:5,
|
|
lineHeight:26,
|
|
margin:5,
|
|
//backgroundColor:'rgba(41,198,90,0.2)',
|
|
//borderColor :'rgba(41,198,90,0.5)',
|
|
borderWidth :1
|
|
},
|
|
background:'#FFFFFF',
|
|
pixelRatio:_self.pixelRatio,
|
|
series: chartData.series,
|
|
animation: false,
|
|
width: _self.cWidth*_self.pixelRatio,
|
|
height: _self.cHeight*_self.pixelRatio,
|
|
disablePieStroke: true,
|
|
dataLabel: true,
|
|
subtitle: {
|
|
name: '',
|
|
color: '#7cb5ec',
|
|
fontSize: 25*_self.pixelRatio,
|
|
},
|
|
title: {
|
|
name: '总电量',
|
|
color: '#666666',
|
|
fontSize: 15*_self.pixelRatio,
|
|
},
|
|
extra: {
|
|
pie: {
|
|
offsetAngle: 0,
|
|
ringWidth: 26*_self.pixelRatio,
|
|
labelWidth:15
|
|
}
|
|
},
|
|
});
|
|
},
|
|
touchRing(e){
|
|
this.canvaRing.touchLegend(e, {
|
|
animation : false
|
|
});
|
|
this.canvaRing.showToolTip(e, {
|
|
format: function (item) {
|
|
return item.name + ':' + item.data
|
|
}
|
|
});
|
|
},
|
|
}
|
|
}
|
|
</script>
|