|
@@ -1,5 +1,5 @@ |
|
|
<script setup> |
|
|
<script setup> |
|
|
import { computed, onMounted, ref, watch } from "vue"; |
|
|
|
|
|
|
|
|
import { computed, nextTick, onMounted, ref, watch } from "vue"; |
|
|
import * as echarts from "echarts"; |
|
|
import * as echarts from "echarts"; |
|
|
import getOptions from "./rateOption"; |
|
|
import getOptions from "./rateOption"; |
|
|
|
|
|
|
|
@@ -33,14 +33,14 @@ watch( |
|
|
); |
|
|
); |
|
|
|
|
|
|
|
|
const rate = computed(() => { |
|
|
const rate = computed(() => { |
|
|
if (!props.rawData.nowYield || props.rawData.nowYield == 0) return [0, 0]; |
|
|
|
|
|
|
|
|
if (!props.rawData?.nowYield || props.rawData.nowYield == 0) return [0, 0]; |
|
|
// const _rate = ((props.rawData.nowYield / props.rawData.targetYield) * 100) |
|
|
// const _rate = ((props.rawData.nowYield / props.rawData.targetYield) * 100) |
|
|
// .toFixed(2) |
|
|
// .toFixed(2) |
|
|
// .toString(); |
|
|
// .toString(); |
|
|
// return [parseInt(_rate), _rate.split(".")[1]]; |
|
|
// return [parseInt(_rate), _rate.split(".")[1]]; |
|
|
return [ |
|
|
return [ |
|
|
parseInt(props.rawData.nowYield), |
|
|
parseInt(props.rawData.nowYield), |
|
|
(props.rawData.nowYield + "").split(".")[1], |
|
|
|
|
|
|
|
|
((props.rawData.nowYield + "").split(".")[1] ?? "").padStart(2, "0"), |
|
|
]; |
|
|
]; |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
@@ -55,7 +55,9 @@ function reInitChart() { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
onMounted(() => { |
|
|
onMounted(() => { |
|
|
reInitChart(); |
|
|
|
|
|
|
|
|
nextTick(() => { |
|
|
|
|
|
reInitChart(); |
|
|
|
|
|
}); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
</script> |
|
|
|
|
|
|
|
@@ -63,10 +65,7 @@ onMounted(() => { |
|
|
<div class="chart rate-chart"> |
|
|
<div class="chart rate-chart"> |
|
|
<div ref="rateChartRef" class="chart-container"></div> |
|
|
<div ref="rateChartRef" class="chart-container"></div> |
|
|
|
|
|
|
|
|
<div |
|
|
|
|
|
v-if="!displayPlaceholder" |
|
|
|
|
|
:class="['fake-chart-title', isOnlyChild ? 'is-only-child' : '']" |
|
|
|
|
|
> |
|
|
|
|
|
|
|
|
<div :class="['fake-chart-title', isOnlyChild ? 'is-only-child' : '']"> |
|
|
<span class="integer-part">{{ rate[0] }}.</span> |
|
|
<span class="integer-part">{{ rate[0] }}.</span> |
|
|
<span class="decimal-part">{{ rate[1] }}%</span> |
|
|
<span class="decimal-part">{{ rate[1] }}%</span> |
|
|
</div> |
|
|
</div> |
|
@@ -104,11 +103,11 @@ onMounted(() => { |
|
|
user-select: none; |
|
|
user-select: none; |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
top: 30%; |
|
|
top: 30%; |
|
|
left: 32%; |
|
|
|
|
|
|
|
|
left: 36%; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.fake-chart-title.is-only-child { |
|
|
.fake-chart-title.is-only-child { |
|
|
left: 42%; |
|
|
|
|
|
|
|
|
left: 36%; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.fake-chart-title > .integer-part { |
|
|
.fake-chart-title > .integer-part { |
|
|