diff --git a/src/demo/Demo.vue b/src/demo/Demo.vue index 2d47094..18d71bd 100644 --- a/src/demo/Demo.vue +++ b/src/demo/Demo.vue @@ -297,7 +297,7 @@ input { } label { - display: flex; + display: inline-flex; align-items: center; justify-content: center; } @@ -381,11 +381,13 @@ select { } } } +} - .actions { - display: flex; - justify-content: center; - } +.actions { + display: flex; + justify-content: center; + align-items: center; + gap: 8px; } .renderer, diff --git a/src/demo/examples/PolarChart.vue b/src/demo/examples/PolarChart.vue index 038d514..953cd32 100644 --- a/src/demo/examples/PolarChart.vue +++ b/src/demo/examples/PolarChart.vue @@ -7,7 +7,7 @@ import { LegendComponent, TooltipComponent } from "echarts/components"; -import { shallowRef } from "vue"; +import { computed, shallowRef } from "vue"; import VChart from "../../ECharts"; import VExample from "./Example"; import getData from "../data/polar"; @@ -22,6 +22,23 @@ use([ const option = shallowRef(getData()); const theme = shallowRef("dark"); +const loading = shallowRef(false); +const loadingOptions = computed(() => + theme.value === "dark" + ? { + color: "#fff", + textColor: "#fff", + maskColor: "rgba(0, 0, 0, 0.7)" + } + : null +); +const style = computed(() => { + return theme.value === "dark" + ? loading.value + ? "background-color: #05040d" + : "background-color: #100c2a" + : ""; +});