176 lines
3.9 KiB
Vue
176 lines
3.9 KiB
Vue
<style lang='scss' scoped>
|
||
.canvas-leakage{
|
||
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'}" class="canvas-leakage" disable-scroll="true"
|
||
@touchstart="touchLineA" @touchmove="moveLineA" @touchend="touchEndLineA"></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 {
|
||
canvaLineA:null,
|
||
cWidth:'',
|
||
cHeight:'',
|
||
pixelRatio:1,
|
||
has_data: false
|
||
}
|
||
},
|
||
props:{
|
||
// 曲线curve，直线straight
|
||
extraLineType:{
|
||
type:String,
|
||
default:"straight"
|
||
},
|
||
yAxisTitle:{
|
||
type:String,
|
||
default:""
|
||
},
|
||
canvasId:{
|
||
type:String,
|
||
default:"canvasLine"
|
||
},
|
||
width:{
|
||
type:[String,Number],
|
||
default:750
|
||
},
|
||
height:{
|
||
type:[String,Number],
|
||
default:550
|
||
},
|
||
// 数据
|
||
chartData:{
|
||
type:[Object],
|
||
default:null
|
||
},
|
||
reshowStatus:{
|
||
type:Boolean,
|
||
default() {
|
||
return false
|
||
}
|
||
}
|
||
},
|
||
watch:{
|
||
chartData(newVal){
|
||
if(Object.keys(newVal).length > 0){
|
||
if(this.canvaLineA){
|
||
this.canvaLineA.updateData(newVal);
|
||
} else {
|
||
this.showLineA(this.canvasId,this.chartData);
|
||
}
|
||
|
||
}
|
||
this.has_data = Object.keys(newVal).length > 0 ? true : false;
|
||
},
|
||
reshowStatus(val){
|
||
console.log("this.chartData",this.chartData)
|
||
if(Object.keys(this.chartData).length > 0){
|
||
this.has_data = true;
|
||
this.showLineA(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.showLineA(this.canvasId,this.chartData);
|
||
} else {
|
||
this.has_data = false;
|
||
}
|
||
},
|
||
methods: {
|
||
toJSON(){},
|
||
showLineA(canvasId,chartData){
|
||
// console.log("render");
|
||
this.canvaLineA=new uCharts({
|
||
$this:_self,
|
||
canvasId: canvasId,
|
||
type: 'line',
|
||
fontSize:11,
|
||
padding:[15,15,0,15],
|
||
legend:{
|
||
show:true,
|
||
padding:5,
|
||
lineHeight:11,
|
||
margin:5,
|
||
},
|
||
dataLabel:true,
|
||
dataPointShape:true,
|
||
dataPointShapeType:'hollow',
|
||
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: {
|
||
// showTitle:!!_self.yAxisTitle?true:false,
|
||
// title:!!_self.yAxisTitle?_self.yAxisTitle:"",
|
||
// //disabled:true
|
||
gridType:'dash',
|
||
// splitNumber:8,
|
||
// min:10,
|
||
// max:180,
|
||
format:(val)=>{return val.toFixed(1)}//如不写此方法，Y轴刻度默认保留两位小数
|
||
},
|
||
width: _self.cWidth*_self.pixelRatio,
|
||
height: _self.cHeight*_self.pixelRatio,
|
||
extra: {
|
||
line:{
|
||
type: _self.extraLineType
|
||
}
|
||
},
|
||
});
|
||
this.canvaLineA.addEventListener('renderComplete', () => {
|
||
this.$emit("onRenderComplete",true)
|
||
});
|
||
|
||
},
|
||
touchLineA(e){
|
||
this.canvaLineA.scrollStart(e);
|
||
},
|
||
moveLineA(e) {
|
||
this.canvaLineA.scroll(e);
|
||
},
|
||
touchEndLineA(e) {
|
||
this.canvaLineA.scrollEnd(e);
|
||
//下面是toolTip事件，如果滚动后不需要显示，可不填写
|
||
this.canvaLineA.touchLegend(e);
|
||
this.canvaLineA.showToolTip(e, {
|
||
format: function (item, category) {
|
||
return category + ' ' + item.name + ':' + item.data
|
||
}
|
||
});
|
||
},
|
||
}
|
||
}
|
||
</script>
|