You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
119 lines
2.2 KiB
Vue
119 lines
2.2 KiB
Vue
<template>
|
|
<view class="content">
|
|
<canvas canvas-id="canvasColumn" id="canvasColumn" class="charts" @touchstart="touchColumn"></canvas>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
var _self;
|
|
var canvaColumn=null;
|
|
export default {
|
|
|
|
data() {
|
|
return {
|
|
pixelRatio:1,
|
|
serverData:'',
|
|
type:'',
|
|
Column:{},
|
|
max:"",
|
|
min:"",
|
|
Company:''
|
|
|
|
|
|
}
|
|
},
|
|
mounted() {
|
|
|
|
|
|
},
|
|
methods: {
|
|
show(type,Column,max,min,Company){
|
|
|
|
this.type=type,
|
|
this.Column=Column,
|
|
this.max=max,
|
|
this.min=min,
|
|
this.Company=Company
|
|
console.log(this.Company)
|
|
this.$nextTick(()=>{
|
|
this.cWidth = uni.upx2px(600);
|
|
this.cHeight = uni.upx2px(400)
|
|
this.showColumn('canvasColumn', this.Column)
|
|
})
|
|
},
|
|
showColumn(canvasId,chartData){
|
|
canvaColumn=new this.$uCharts({
|
|
|
|
title:"1111",
|
|
$this:this,
|
|
canvasId: canvasId,
|
|
type:this.type,
|
|
legend:{show:true},
|
|
fontSize:11,
|
|
background:'#FFFFFF',
|
|
pixelRatio:this.pixelRatio,
|
|
animation: true,
|
|
categories: chartData.categories,
|
|
series: chartData.series,
|
|
|
|
xAxis: {
|
|
disableGrid:true,
|
|
},
|
|
yAxis: {
|
|
|
|
splitNumber:5,
|
|
min:this.min,
|
|
max:this.max,
|
|
|
|
},
|
|
|
|
dataLabel: true,
|
|
width: this.cWidth*this.pixelRatio,
|
|
height: this.cHeight*this.pixelRatio,
|
|
extra: {
|
|
column: {
|
|
type:'group',
|
|
width: this.cWidth*this.pixelRatio*0.45/chartData.categories.length
|
|
}
|
|
}
|
|
});
|
|
|
|
},
|
|
touchColumn(e){
|
|
canvaColumn.showToolTip(e, {
|
|
format: function (item, category) {
|
|
|
|
if(typeof item.data === 'object'){
|
|
console.log(item)
|
|
return category + ' ' + item.name + ':' + item.data.value
|
|
}else{
|
|
console.log(item)
|
|
return category + ' ' + item.name + ':' + item.data
|
|
}
|
|
}
|
|
});
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 40rpx;
|
|
|
|
}
|
|
|
|
.charts {
|
|
width: 650upx;
|
|
height: 380upx;
|
|
background-color: #FFFFFF;
|
|
border-radius: 50upx;
|
|
z-index:0;
|
|
position:relative
|
|
}
|
|
</style>
|
|
|