github/skywalking-booster-ui
3
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-10-14 11:21:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: create line, area, heatmap components

Browse Source
This commit is contained in:
Qiuxia Fan
2021-12-30 21:26:47 +08:00
parent 09ab161183
commit a58ad5e8f0
7 changed files with 400 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/Graph.vue
View File

@@ -26,23 +26,30 @@ import {
} from "vue";
import type { PropType } from "vue";
import * as echarts from "echarts";
const dom = ref<any>(null);
const state = reactive<any>({
// eslint-disable-next-line no-undef
const dom = ref<Nullable<HTMLElement>>(null);
const state = reactive<{ instanceChart: any }>({
instanceChart: null,
});
const props = defineProps({
clickEvent: { type: Function as PropType<(param: unknown) => void> },
height: { type: Number, default: 100 },
width: { type: Number, default: 300 },
option: { type: Object as PropType<any>, default: () => ({}) },
height: { type: String, default: "100%" },
width: { type: String, default: "100%" },
option: {
type: Object as PropType<{ [key: string]: unknown }>,
default: () => ({}),
},
});
onMounted(() => {
drawEcharts();
window.addEventListener("resize", state.instanceChart.resize);
});
function drawEcharts(): void {
if (!dom.value) {
return;
}
state.instanceChart = echarts.init(dom.value, "");
state.instanceChart.setOption(state.option);
state.instanceChart.setOption(props.option);
state.instanceChart.on("click", (params: any) => {
if (!props.clickEvent) {
return;