🚸 响应主题

This commit is contained in:
目棃
2025-01-13 15:07:36 +08:00
parent 9d995994ca
commit dd7e8e2261

View File

@@ -1,6 +1,6 @@
<template> <template>
<div class="gro-echart"> <div class="gro-echart">
<v-chart :option="getPoolData()" autoresize /> <v-chart :option="getPoolData()" autoresize :theme="echartsTheme" />
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@@ -20,8 +20,11 @@ import { LabelLayout } from "echarts/features.js";
// @ts-expect-error no-exported-member // @ts-expect-error no-exported-member
import { CanvasRenderer } from "echarts/renderers.js"; import { CanvasRenderer } from "echarts/renderers.js";
import type { EChartsOption } from "echarts/types/dist/shared.js"; import type { EChartsOption } from "echarts/types/dist/shared.js";
import { provide } from "vue"; import { storeToRefs } from "pinia";
import VChart, { THEME_KEY } from "vue-echarts"; import { computed } from "vue";
import VChart from "vue-echarts";
import { useAppStore } from "@/store/modules/app.js";
// echarts // echarts
use([ use([
@@ -33,14 +36,14 @@ use([
CanvasRenderer, CanvasRenderer,
LabelLayout, LabelLayout,
]); ]);
// 获取当前主题
provide(THEME_KEY, "dark");
interface GachaOverviewEchartsProps { interface GachaOverviewEchartsProps {
modelValue: TGApp.Sqlite.GachaRecords.SingleTable[]; modelValue: TGApp.Sqlite.GachaRecords.SingleTable[];
} }
const props = defineProps<GachaOverviewEchartsProps>(); const props = defineProps<GachaOverviewEchartsProps>();
const { theme } = storeToRefs(useAppStore());
const echartsTheme = computed<"dark" | "light">(() => (theme.value === "dark" ? "dark" : "light"));
// data // data
const defaultOptions = <EChartsOption>{ const defaultOptions = <EChartsOption>{