144 lines
3.0 KiB
Vue
144 lines
3.0 KiB
Vue
<style lang='scss' scoped>
|
||
.canvas-leakage{
|
||
width: 100%;
|
||
}
|
||
</style>
|
||
<template>
|
||
<view class="chart" :style="{height: height+'rpx',width:width+'rpx'}">
|
||
<canvas :canvas-id="canvasId" :style="{height: height+'rpx'}" class="canvas-leakage" disable-scroll="true"
|
||
@touchstart="touchLineA" @touchmove="moveLineA" @touchend="touchEndLineA"></canvas>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
let _self;
|
||
import uCharts from '@/components/u-charts/u-charts.js';
|
||
export default {
|
||
data() {
|
||
return {
|
||
canvaLineA:null,
|
||
cWidth:'',
|
||
cHeight:'',
|
||
pixelRatio:1,
|
||
}
|
||
},
|
||
props:{
|
||
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
|
||
}
|
||
},
|
||
watch:{
|
||
chartData(newVal){
|
||
this.showAreaFn(this.canvasId,newVal);
|
||
}
|
||
},
|
||
created() {
|
||
_self = this;
|
||
this.cWidth=uni.upx2px(this.width);
|
||
this.cHeight=uni.upx2px(this.height);
|
||
},
|
||
mounted() {
|
||
if(!!this.chartData){
|
||
this.showAreaFn(this.canvasId,this.chartData);
|
||
}
|
||
},
|
||
methods: {
|
||
toJSON(){},
|
||
showAreaFn(canvasId,chartData){
|
||
this.canvaLineA=new uCharts({
|
||
$this:_self,
|
||
canvasId: canvasId,
|
||
type: 'area',
|
||
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,//开启图表拖拽功能
|
||
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
|
||
// },
|
||
area:{
|
||
type: 'curve',
|
||
opacity:0.2,
|
||
addLine:true,
|
||
width:2,
|
||
gradient:false
|
||
}
|
||
},
|
||
});
|
||
|
||
},
|
||
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>
|