🐛 修复未知dom大小,调整UI

This commit is contained in:
目棃
2024-08-27 10:54:18 +08:00
parent a37be91b48
commit c81629e14f
2 changed files with 29 additions and 15 deletions

View File

@@ -1,5 +1,7 @@
<template> <template>
<div class="gro-echart">
<v-chart :option="getPoolData()" autoresize /> <v-chart :option="getPoolData()" autoresize />
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import type { EChartsOption } from "echarts"; import type { EChartsOption } from "echarts";
@@ -13,10 +15,9 @@ import {
import { use } from "echarts/core"; import { use } from "echarts/core";
import { LabelLayout } from "echarts/features"; import { LabelLayout } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers"; import { CanvasRenderer } from "echarts/renderers";
import { onMounted, provide } from "vue"; import { provide } from "vue";
import VChart, { THEME_KEY } from "vue-echarts"; import VChart, { THEME_KEY } from "vue-echarts";
import showSnackbar from "../func/snackbar.js";
// echarts // echarts
use([ use([
@@ -37,13 +38,6 @@ interface GachaOverviewEchartsProps {
const props = defineProps<GachaOverviewEchartsProps>(); const props = defineProps<GachaOverviewEchartsProps>();
onMounted(async () => {
const totalNum = props.modelValue.length;
showSnackbar({
text: `成功获取 ${totalNum} 条祈愿数据`,
});
});
// data // data
const defaultOptions = <EChartsOption>{ const defaultOptions = <EChartsOption>{
title: [ title: [
@@ -213,3 +207,12 @@ function getPoolData(): EChartsOption {
return data; return data;
} }
</script> </script>
<style lang="css" scoped>
.gro-echart {
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
}
</style>

View File

@@ -155,12 +155,13 @@ function getBox(id: number): TItemBoxData {
display: "inner", display: "inner",
clickable: true, clickable: true,
lt: `/icon/element/${cFind.element}元素.webp`, lt: `/icon/element/${cFind.element}元素.webp`,
ltSize: "30px", ltSize: "20px",
innerHeight: 20, innerHeight: 20,
innerIcon: `/icon/weapon/${cFind.weapon}.webp`, innerIcon: `/icon/weapon/${cFind.weapon}.webp`,
innerText: cFind.name, innerText: cFind.name,
}; };
} else if (wFind) { }
if (wFind) {
return { return {
bg: `/icon/bg/${wFind.star}-Star.webp`, bg: `/icon/bg/${wFind.star}-Star.webp`,
icon: `/WIKI/weapon/${wFind.id}.webp`, icon: `/WIKI/weapon/${wFind.id}.webp`,
@@ -169,13 +170,23 @@ function getBox(id: number): TItemBoxData {
display: "inner", display: "inner",
clickable: true, clickable: true,
lt: wFind.weaponIcon, lt: wFind.weaponIcon,
ltSize: "30px", ltSize: "20px",
innerHeight: 20, innerHeight: 20,
innerText: wFind.name, innerText: wFind.name,
}; };
} else {
throw new Error("未找到对应角色或武器");
} }
return {
bg: "/icon/bg/0-Star.webp",
icon: "/source/UI/empty/webp",
size: "80px",
height: "80px",
display: "inner",
clickable: false,
lt: "",
ltSize: "0",
innerHeight: 20,
innerText: "未找到对应角色或武器",
};
} }
</script> </script>
<style lang="css" scoped> <style lang="css" scoped>