122 lines
2.7 KiB
Vue
122 lines
2.7 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="touchLineA" ></canvas>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
let _self;
|
||
import uCharts from '@/components/u-charts/u-charts.js';
|
||
export default {
|
||
data() {
|
||
return {
|
||
canvaRing:null,
|
||
cWidth:'',
|
||
cHeight:'',
|
||
arcbarWidth:'',//圆弧进度图，进度条宽度,此设置可使各端宽度一致
|
||
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
|
||
},
|
||
subtitleFontSize:{
|
||
type:[String,Number],
|
||
default:15
|
||
},
|
||
offsetY:{
|
||
type:[String,Number],
|
||
default:0
|
||
},
|
||
},
|
||
watch:{
|
||
chartData(newVal){
|
||
console.log(newVal,"newVal");
|
||
if(this.isShow){
|
||
this.showArcbar(this.canvasId,newVal);
|
||
}
|
||
}
|
||
},
|
||
created() {
|
||
_self = this;
|
||
this.cWidth=uni.upx2px(this.width);
|
||
this.cHeight=uni.upx2px(this.height);
|
||
this.arcbarWidth=uni.upx2px(20);
|
||
},
|
||
mounted() {
|
||
this.isShow = true;
|
||
if(!!this.chartData){
|
||
console.log("ok?");
|
||
this.showArcbar(this.canvasId,this.chartData);
|
||
}
|
||
},
|
||
methods: {
|
||
toJSON(){},
|
||
// 展示图标的函数 接收参数，一个块的id,一个数据
|
||
showArcbar(canvasId, chartData) {
|
||
this.canvaArcbar = new uCharts({
|
||
$this:_self,
|
||
canvasId: canvasId,
|
||
type: 'arcbar',
|
||
fontSize:11,
|
||
legend:false,
|
||
title: {
|
||
name: Math.round(chartData.series[0].data*100)+'%',
|
||
color: chartData.series[0].color,
|
||
fontSize: 25*_self.pixelRatio,
|
||
offsetY: parseInt(_self.offsetY)
|
||
},
|
||
subtitle: {
|
||
name: chartData.series[0].name,
|
||
color: '#666666',
|
||
fontSize: _self.subtitleFontSize*_self.pixelRatio
|
||
},
|
||
extra: {
|
||
arcbar:{
|
||
type:'circle',//整圆类型进度条图
|
||
width: _self.arcbarWidth*_self.pixelRatio,//圆弧的宽度
|
||
startAngle:1.5//整圆类型只需配置起始角度即可
|
||
}
|
||
},
|
||
background:'#FFFFFF',
|
||
pixelRatio:_self.pixelRatio,
|
||
series: chartData.series,
|
||
animation: true,
|
||
width: _self.cWidth*_self.pixelRatio,
|
||
height: _self.cHeight*_self.pixelRatio,
|
||
dataLabel: true,
|
||
});
|
||
},
|
||
// 点击图表显示的内容
|
||
touchLineA(e) {
|
||
// 使用声明的变量canvaLineA
|
||
this.canvaArcbar.showToolTip(e, {
|
||
format: function(item, category) {
|
||
return category + ' ' + item.name + ':' + item.data
|
||
}
|
||
});
|
||
}
|
||
}
|
||
}
|
||
</script>
|