first commit

src/components/chart/index.vue

@@ -0,0 +1,56 @@
+<script lang="ts" setup>
+import { onBeforeUnmount, onMounted, ref, watch } from "vue";
+import * as echarts from "echarts";
+import { EChartsOption } from "echarts";
+
+let chart: echarts.ECharts | null = null;
+
+const chartRef = ref<HTMLElement | undefined>();
+
+const props = defineProps({
+  option: {
+    type: Object as () => EChartsOption | {},
+    required: true,
+  },
+});
+
+function applyOption(option?: EChartsOption | Record<string, never>) {
+  if (!chart || !option) {
+    return;
+  }
+
+  chart.clear();
+  chart.setOption(option);
+}
+
+onMounted(() => {
+  chart = echarts.init(chartRef.value, "t-theme");
+  applyOption(props.option);
+});
+
+watch(
+  () => props.option,
+  (value) => {
+    applyOption(value);
+  },
+  { deep: true },
+);
+
+onBeforeUnmount(() => {
+  if (chart) {
+    chart.dispose();
+    chart = null;
+  }
+});
+</script>
+
+<template>
+  <div ref="chartRef" class="t-chart" />
+</template>
+
+<style scoped>
+.t-chart {
+  width: 100%;
+  height: 100%;
+}
+</style>