132 lines
2.8 KiB
Vue
132 lines
2.8 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" :disable-scroll="true"
|
|
@touchstart="touchColumn" @touchmove="moveColumn" @touchend="touchEndColumn"></canvas>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
let _self;
|
|
import uCharts from '@/components/u-charts/u-charts.js';
|
|
export default {
|
|
data() {
|
|
return {
|
|
canvaColumn: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.showColumn(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){
|
|
this.showColumn(this.canvasId,this.chartData);
|
|
}
|
|
},
|
|
methods: {
|
|
toJSON(){},
|
|
showColumn(canvasId,chartData){
|
|
console.log(canvasId,"canvasIdcanvasIdcanvasId");
|
|
console.log(chartData,"chartData");
|
|
|
|
this.canvaColumn=new uCharts({
|
|
$this:_self,
|
|
canvasId: canvasId,
|
|
type: 'column',
|
|
padding:[15,15,0,15],
|
|
legend:{
|
|
show:true,
|
|
padding:5,
|
|
lineHeight:11,
|
|
margin:0,
|
|
},
|
|
fontSize:11,
|
|
background:'#FFFFFF',
|
|
pixelRatio:_self.pixelRatio,
|
|
animation: false,
|
|
rotate:true,
|
|
// #ifdef MP-ALIPAY
|
|
rotateLock:true,//百度及支付宝需要锁定旋转
|
|
// #endif
|
|
categories: chartData.categories,
|
|
series: chartData.series,
|
|
xAxis: {
|
|
disableGrid:true,
|
|
},
|
|
yAxis: {
|
|
//disabled:true
|
|
},
|
|
dataLabel: true,
|
|
width: _self.cWidth*_self.pixelRatio,
|
|
height: _self.cHeight*_self.pixelRatio,
|
|
extra: {
|
|
column: {
|
|
type:'group',
|
|
width: _self.cWidth*_self.pixelRatio*0.45/chartData.categories.length,
|
|
meter:{
|
|
//这个是外层边框的宽度
|
|
border:4,
|
|
//这个是内部填充颜色
|
|
fillColor:'#E5FDC3'
|
|
}
|
|
}
|
|
}
|
|
});
|
|
},
|
|
touchColumn(e){
|
|
this.canvaColumn.scrollStart(e);
|
|
},
|
|
moveColumn(e) {
|
|
this.canvaColumn.scroll(e);
|
|
},
|
|
touchEndColumn(e) {
|
|
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>
|