时舟年
80 lines
2.0 KiB
Vue
80 lines
2.0 KiB
Vue
<template>
|
|
<view class="bt-radar">
|
|
<canvas
|
|
:id="canvasId"
|
|
:canvas-id="canvasId"
|
|
type="2d"
|
|
class="bt-radar__canvas"
|
|
:style="{ width: width + 'px', height: height + 'px' }"
|
|
/>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { drawRadarChart } from '@/common/memberInfo/bodyTestChart.js'
|
|
|
|
export default {
|
|
options: {
|
|
virtualHost: false,
|
|
styleIsolation: 'apply-shared'
|
|
},
|
|
props: {
|
|
labels: { type: Array, default: () => [] },
|
|
values: { type: Array, default: () => [] },
|
|
width: { type: Number, default: 280 },
|
|
height: { type: Number, default: 240 }
|
|
},
|
|
data() {
|
|
return {
|
|
canvasId: `bt-radar-${Math.random().toString(36).slice(2, 9)}`
|
|
}
|
|
},
|
|
watch: {
|
|
values: {
|
|
deep: true,
|
|
handler() {
|
|
this.renderChart()
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.renderChart()
|
|
},
|
|
methods: {
|
|
renderChart() {
|
|
this.$nextTick(() => {
|
|
const query = uni.createSelectorQuery().in(this)
|
|
query
|
|
.select(`#${this.canvasId}`)
|
|
.fields({ node: true, size: true })
|
|
.exec((res) => {
|
|
const node = res?.[0]?.node
|
|
if (!node) return
|
|
const dpr = uni.getSystemInfoSync().pixelRatio || 1
|
|
drawRadarChart(node, {
|
|
width: this.width,
|
|
height: this.height,
|
|
labels: this.labels,
|
|
values: this.values,
|
|
dpr
|
|
})
|
|
})
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.bt-radar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.bt-radar__canvas {
|
|
display: block;
|
|
}
|
|
</style>
|