github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-12 15:52:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: update echarts graphs style

Browse Source
This commit is contained in:
Fine 2023-11-09 15:09:46 +08:00
parent 6f1e3dc3ae
commit 8431115d60
3 changed files with 18 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/hooks/useEcharts.ts
View File

@ -30,6 +30,7 @@ import { useDebounceFn } from "@vueuse/core";
import { useEventListener } from "./useEventListener";
import { useBreakpoint } from "./useBreakpoint";
import echarts from "@/utils/echarts";
import { useAppStoreWithOut } from "@/store/modules/app";
export type ECOption = echarts.ComposeOption<
| BarSeriesOption
@ -44,8 +45,9 @@ export type ECOption = echarts.ComposeOption<
>;
export function useECharts(elRef: Ref<HTMLDivElement>, theme: "light" | "dark" | "default" = "default"): Indexable {
const appStore = useAppStoreWithOut();
const getDarkMode = computed(() => {
return theme === "default" ? "light" : theme;
return appStore.theme === "default" ? "light" : theme;
});
let chartInstance: Nullable<echarts.ECharts> = null;
let resizeFn: Fn = resize;

7
src/views/dashboard/graphs/Bar.vue
View File

@ -24,6 +24,7 @@ limitations under the License. -->
import type { BarConfig, EventParams, RelatedTrace, Filters } from "@/types/dashboard";
import useLegendProcess from "@/hooks/useLegendProcessor";
import Legend from "./components/Legend.vue";
import { useAppStoreWithOut } from "@/store/modules/app";
/*global defineProps, defineEmits */
const emits = defineEmits(["click"]);
@ -46,6 +47,7 @@ limitations under the License. -->
default: () => ({}),
},
});
const appStore = useAppStoreWithOut();
const { showEchartsLegend, isRight, chartColors } = useLegendProcess(props.config.legend);
const option = computed(() => getOption());
@ -91,8 +93,11 @@ limitations under the License. -->
top: 0,
left: 0,
itemWidth: 12,
backgroundColor: appStore.theme === "dark" ? "#333" : "#fff",
borderColor: appStore.theme === "dark" ? "#333" : "#fff",
textStyle: {
color: "#333",
fontSize: 12,
color: appStore.theme === "dark" ? "#eee" : "#333",
},
},
grid: {

13
src/views/dashboard/graphs/Line.vue
View File

@ -31,6 +31,7 @@ limitations under the License. -->
import Legend from "./components/Legend.vue";
import useLegendProcess from "@/hooks/useLegendProcessor";
import { isDef } from "@/utils/is";
import { useAppStoreWithOut } from "@/store/modules/app";
/*global defineProps, defineEmits */
const emits = defineEmits(["click"]);
@ -40,7 +41,6 @@ limitations under the License. -->
default: () => ({}),
},
intervalTime: { type: Array as PropType<string[]>, default: () => [] },
theme: { type: String, default: "light" },
config: {
type: Object as PropType<
LineConfig & {
@ -62,6 +62,7 @@ limitations under the License. -->
}),
},
});
const appStore = useAppStoreWithOut();
const setRight = ref<boolean>(false);
const option = computed(() => getOption());
function getOption() {
@ -93,9 +94,11 @@ limitations under the License. -->
const color: string[] = chartColors(keys);
const tooltip = {
trigger: "axis",
backgroundColor: appStore.theme === "dark" ? "#333" : "#fff",
borderColor: appStore.theme === "dark" ? "#333" : "#fff",
textStyle: {
fontSize: 12,
color: "#333",
color: appStore.theme === "dark" ? "#eee" : "#333",
},
enterable: true,
confine: true,
@ -108,9 +111,11 @@ limitations under the License. -->
confine: true,
extraCssText: `height: 20px; padding:0 2px;`,
trigger: "axis",
backgroundColor: appStore.theme === "dark" ? "#666" : "#eee",
borderColor: appStore.theme === "dark" ? "#666" : "#eee",
textStyle: {
fontSize: 12,
color: "#333",
color: appStore.theme === "dark" ? "#eee" : "#333",
},
};
@ -125,7 +130,7 @@ limitations under the License. -->
left: 0,
itemWidth: 12,
textStyle: {
color: props.theme === "dark" ? "#fff" : "#333",
color: appStore.theme === "dark" ? "#fff" : "#333",
},
},
grid: {