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

refactor: update Graph component

Browse Source
This commit is contained in:
Qiuxia Fan 2022-01-10 19:51:14 +08:00
parent a496b6d24c
commit 2fb39ca82f
2 changed files with 25 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
src/components/Graph.vue
View File

@ -13,24 +13,16 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and See the License for the specific language governing permissions and
limitations under the License. --> limitations under the License. -->
<template> <template>
<div ref="chart" :style="`height:${height};width:${width};`"></div> <div ref="chartRef" :style="`height:${height};width:${width};`"></div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { import { watch, ref, defineProps, Ref } from "vue";
onMounted,
watch,
reactive,
ref,
defineProps,
onBeforeUnmount,
} from "vue";
import type { PropType } from "vue"; import type { PropType } from "vue";
import * as echarts from "echarts"; import { useECharts } from "@/hooks/useECharts";
/*global Nullable*/ /*global Nullable*/
const chart = ref<Nullable<HTMLElement>>(null); const chartRef = ref<Nullable<HTMLDivElement>>(null);
const state = reactive<{ instanceChart: any }>({ const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
instanceChart: null,
});
const props = defineProps({ const props = defineProps({
clickEvent: { type: Function as PropType<(param: unknown) => void> }, clickEvent: { type: Function as PropType<(param: unknown) => void> },
height: { type: String, default: "100%" }, height: { type: String, default: "100%" },
@ -41,46 +33,10 @@ const props = defineProps({
}, },
}); });
onMounted(() => {
setTimeout(() => {
drawEcharts();
window.addEventListener("resize", state.instanceChart.resize);
}, 50);
});
function drawEcharts(): void {
if (!chart.value) {
return;
}
if (state.instanceChart) {
return;
}
state.instanceChart = echarts.init(chart.value, "");
unWarp(state.instanceChart).setOption(props.option);
state.instanceChart.on("click", (params: any) => {
if (!props.clickEvent) {
return;
}
props.clickEvent(params);
});
}
function unWarp(obj: any) {
return obj && (obj.__v_raw || obj.valueOf() || obj);
}
watch( watch(
() => props.option, () => props.option,
(opt) => { (opt) => {
if (state.instanceChart) { setOptions(opt);
state.instanceChart.setOption(opt, true);
} else {
drawEcharts();
}
} }
); );
onBeforeUnmount(() => {
if (state.instanceChart.dispose) {
state.instanceChart.dispose();
}
window.removeEventListener("resize", state.instanceChart.resize);
});
</script> </script>

36
src/views/dashboard/Edit.vue
View File

@ -29,30 +29,30 @@ limitations under the License. -->
<script lang="ts" setup> <script lang="ts" setup>
import { ElDialog } from "element-plus"; import { ElDialog } from "element-plus";
import GridLayout from "./panel/Layout.vue"; import GridLayout from "./panel/Layout.vue";
import { LayoutConfig } from "@/types/dashboard"; // import { LayoutConfig } from "@/types/dashboard";
import Tool from "./panel/Tool.vue"; import Tool from "./panel/Tool.vue";
import WidgetConfig from "./configuration/ConfigEdit.vue"; import WidgetConfig from "./configuration/ConfigEdit.vue";
import { useDashboardStore } from "@/store/modules/dashboard"; import { useDashboardStore } from "@/store/modules/dashboard";
const dashboardStore = useDashboardStore(); const dashboardStore = useDashboardStore();
// fetch layout data from serve side // fetch layout data from serve side
const layout: any[] = [ // const layout: any[] = [
{ x: 0, y: 0, w: 4, h: 12, i: "0" }, // { x: 0, y: 0, w: 4, h: 12, i: "0" },
{ x: 4, y: 0, w: 4, h: 12, i: "1" }, // { x: 4, y: 0, w: 4, h: 12, i: "1" },
{ x: 8, y: 0, w: 4, h: 15, i: "2" }, // { x: 8, y: 0, w: 4, h: 15, i: "2" },
{ x: 12, y: 0, w: 4, h: 9, i: "3" }, // { x: 12, y: 0, w: 4, h: 9, i: "3" },
{ x: 16, y: 0, w: 4, h: 9, i: "4" }, // { x: 16, y: 0, w: 4, h: 9, i: "4" },
{ x: 20, y: 0, w: 4, h: 9, i: "5" }, // { x: 20, y: 0, w: 4, h: 9, i: "5" },
{ x: 0, y: 12, w: 4, h: 15, i: "7" }, // { x: 0, y: 12, w: 4, h: 15, i: "7" },
{ x: 4, y: 12, w: 4, h: 15, i: "8" }, // { x: 4, y: 12, w: 4, h: 15, i: "8" },
{ x: 8, y: 15, w: 4, h: 12, i: "9" }, // { x: 8, y: 15, w: 4, h: 12, i: "9" },
{ x: 12, y: 9, w: 4, h: 12, i: "10" }, // { x: 12, y: 9, w: 4, h: 12, i: "10" },
{ x: 16, y: 9, w: 4, h: 12, i: "11" }, // { x: 16, y: 9, w: 4, h: 12, i: "11" },
{ x: 20, y: 9, w: 4, h: 15, i: "12" }, // { x: 20, y: 9, w: 4, h: 15, i: "12" },
{ x: 0, y: 27, w: 4, h: 12, i: "14" }, // { x: 0, y: 27, w: 4, h: 12, i: "14" },
{ x: 4, y: 27, w: 4, h: 12, i: "15" }, // { x: 4, y: 27, w: 4, h: 12, i: "15" },
{ x: 8, y: 27, w: 4, h: 15, i: "16" }, // { x: 8, y: 27, w: 4, h: 15, i: "16" },
]; // ];
// dashboardStore.setLayout(layout); // dashboardStore.setLayout(layout);
function handleClick(e: any) { function handleClick(e: any) {
e.stopPropagation(); e.stopPropagation();