178 lines
4.0 KiB
Vue
178 lines
4.0 KiB
Vue
<style lang='scss' scoped>
|
||
.canvas{
|
||
width: 100%;
|
||
}
|
||
</style>
|
||
<template>
|
||
<view class="chart" :style="{height: height+'rpx',width:width+'rpx'}">
|
||
<template v-if="has_data">
|
||
<canvas :canvas-id="canvasId" :style="{height: height+'rpx',width:width+'rpx'}" class="canvas" :disable-scroll="true"
|
||
@touchstart="touchColumn" @touchmove="moveColumn" @touchend="touchEndColumn"></canvas>
|
||
</template>
|
||
<template v-else>
|
||
<u-empty text="数据为空" mode="data"></u-empty>
|
||
</template>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
let _self;
|
||
import uCharts from '@/components/u-charts/u-charts.js';
|
||
export default {
|
||
data() {
|
||
return {
|
||
canvaColumn:null,
|
||
cWidth:'',
|
||
cHeight:'',
|
||
pixelRatio:1,
|
||
has_data: false,
|
||
}
|
||
},
|
||
props:{
|
||
canvasId:{
|
||
type:String,
|
||
default:"canvasColumn"
|
||
},
|
||
width:{
|
||
type:[String,Number],
|
||
default:750
|
||
},
|
||
height:{
|
||
type:[String,Number],
|
||
default:550
|
||
},
|
||
chartData:{
|
||
type:[Object],
|
||
default() {
|
||
return {}
|
||
}
|
||
},
|
||
reshowStatus:{
|
||
type:Boolean,
|
||
default() {
|
||
return false
|
||
}
|
||
}
|
||
},
|
||
watch:{
|
||
chartData(newVal){
|
||
if(Object.keys(newVal).length > 0){
|
||
if(this.canvaColumn){
|
||
this.canvaColumn.updateData(newVal);
|
||
} else {
|
||
this.showColumn(this.canvasId,this.chartData);
|
||
}
|
||
|
||
}
|
||
this.has_data = Object.keys(newVal).length > 0 ? true : false;
|
||
},
|
||
reshowStatus(val){
|
||
if(Object.keys(this.chartData).length > 0){
|
||
this.has_data = true;
|
||
this.showColumn(this.canvasId,this.chartData);
|
||
} else {
|
||
this.has_data = false;
|
||
}
|
||
}
|
||
|
||
},
|
||
created() {
|
||
_self = this;
|
||
this.cWidth=uni.upx2px(this.width);
|
||
this.cHeight=uni.upx2px(this.height);
|
||
},
|
||
mounted() {
|
||
if(Object.keys(this.chartData).length > 0){
|
||
this.has_data = true;
|
||
this.showColumn(this.canvasId,this.chartData);
|
||
} else {
|
||
this.has_data = false;
|
||
}
|
||
},
|
||
methods: {
|
||
toJSON(){},
|
||
showColumn(canvasId,chartData){
|
||
// console.log(canvasId,"canvasIdcanvasIdcanvasId");
|
||
// console.log(chartData,"chartData");
|
||
this.canvaColumn = new uCharts({
|
||
$this:_self,
|
||
canvasId: canvasId,
|
||
type: 'column',
|
||
fontSize:11,
|
||
padding:[5,15,15,15],
|
||
legend:{
|
||
show:true,
|
||
position:'top',
|
||
float:'center',
|
||
itemGap:30,
|
||
padding:5,
|
||
margin:5,
|
||
//backgroundColor:'rgba(41,198,90,0.2)',
|
||
//borderColor :'rgba(41,198,90,0.5)',
|
||
borderWidth :1
|
||
},
|
||
dataLabel:true,
|
||
dataPointShape:true,
|
||
background:'#FFFFFF',
|
||
pixelRatio:_self.pixelRatio,
|
||
categories: chartData.categories,
|
||
series: chartData.series,
|
||
animation: true,
|
||
enableScroll: true,
|
||
reshow:_self.reshowStatus,
|
||
xAxis: {
|
||
disableGrid:false,
|
||
type:'grid',
|
||
gridType:'dash',
|
||
itemCount:4,
|
||
scrollShow:true,
|
||
scrollAlign:'left',
|
||
},
|
||
yAxis: {
|
||
//disabled:true
|
||
gridType:'dash',
|
||
// splitNumber:4,
|
||
// min:10,
|
||
// max:180,
|
||
format:(val)=>{return val.toFixed(1)}//如不写此方法，Y轴刻度默认保留两位小数
|
||
},
|
||
width: _self.cWidth*_self.pixelRatio,
|
||
height: _self.cHeight*_self.pixelRatio,
|
||
extra: {
|
||
column: {
|
||
type:'group',
|
||
// width: _self.cWidth*_self.pixelRatio*0.45/chartData.categories.length
|
||
width:20
|
||
}
|
||
},
|
||
});
|
||
// 监听图表渲染完成
|
||
this.canvaColumn.addEventListener('renderComplete', () => {
|
||
// your code here
|
||
_self.$emit("onRenderFinsh","ok");
|
||
console.log("onRenderFinsh","onRenderFinsh");
|
||
});
|
||
},
|
||
touchColumn(e){
|
||
if(!this.canvaColumn) return;
|
||
this.canvaColumn.scrollStart(e);
|
||
},
|
||
moveColumn(e) {
|
||
if(!this.canvaColumn) return;
|
||
this.canvaColumn.scroll(e);
|
||
},
|
||
touchEndColumn(e) {
|
||
if(!this.canvaColumn) return;
|
||
this.canvaColumn.scrollEnd(e);
|
||
this.canvaColumn.touchLegend(e, {
|
||
animation:true,
|
||
});
|
||
this.canvaColumn.showToolTip(e, {
|
||
format: function (item, category) {
|
||
return category + ' ' + item.name + ':' + item.data
|
||
}
|
||
});
|
||
},
|
||
}
|
||
}
|
||
</script>
|