88 lines
1.8 KiB
Vue
88 lines
1.8 KiB
Vue
<template>
|
|
<view>
|
|
|
|
<view class="" style="position: relative;">
|
|
<view :style="'position: absolute;width: 100%; height: 60px;background-color: #000;z-index: 1;display: '+zz">
|
|
<image src="../../static/image/1722482824117.jpg" style="width: 100%;" mode="widthFix"></image>
|
|
</view>
|
|
<view class="">
|
|
<canvas id="myCanvas" :canvas-id="canvasId" style="width: 100%; height: 60px;"></canvas>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
name:"sleep-list-data",
|
|
props:{
|
|
dataList:Array,
|
|
canvasId:String
|
|
},
|
|
data() {
|
|
return {
|
|
zz:'block',
|
|
|
|
};
|
|
},
|
|
watch:{
|
|
dataList(newVal,oldVal){
|
|
|
|
if(newVal.length > 0){
|
|
this.zz = 'none'
|
|
const query = uni.createSelectorQuery().in(this);
|
|
query.select('#myCanvas').boundingClientRect(data => {
|
|
if (data) {
|
|
// data.width就是画布的宽度
|
|
let canvasWidth = data.width;
|
|
this.doDraw(canvasWidth)
|
|
}
|
|
}).exec();
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
|
|
},
|
|
methods:{
|
|
doDraw(canvasWidth){
|
|
const colorArr = [
|
|
'#e933dd',
|
|
'#6452da',
|
|
'#4faffc'
|
|
]
|
|
const heightArr = [
|
|
40,
|
|
20,
|
|
0
|
|
]
|
|
let current = 0;
|
|
let times = 0;
|
|
// 计算出每个线条的宽度
|
|
const oneLineWidth = (canvasWidth / this.dataList.length).toFixed(2)
|
|
const ctx = uni.createCanvasContext(this.canvasId, this);
|
|
// 设置填充颜色为红色
|
|
this.dataList.map((v,i) => {
|
|
// if(current == v){
|
|
// times += 1;
|
|
// }else{
|
|
ctx.setFillStyle(colorArr[parseInt(v)]);
|
|
// 绘制矩形
|
|
ctx.fillRect((i * oneLineWidth).toFixed(2), heightArr[parseInt(v)],oneLineWidth, 20);
|
|
// current = v;
|
|
// times = 1
|
|
// }
|
|
|
|
})
|
|
|
|
// 将绘制的内容渲染到画布
|
|
ctx.draw();
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
|
|
</style> |