fix: render graphs

src/components/Graph.vue

@@ -43,7 +43,6 @@ const props = defineProps({
 
 onMounted(() => {
   setTimeout(() => {
-    console.log(chart.value);
     drawEcharts();
     window.addEventListener("resize", state.instanceChart.resize);
   }, 50);

src/store/modules/data.ts

@@ -23,7 +23,7 @@ export const ConfigData: LayoutConfig = {
   i: "0",
   metrics: ["service_resp_time"],
   queryMetricType: "readMetricsValues",
-  visualization: "Line",
+  visualization: "Bar",
   widget: {
     title: "Title",
     tips: "Tooltip",

src/views/dashboard/configuration/ConfigEdit.vue

@@ -86,7 +86,7 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts">
-import { reactive, defineComponent, ref } from "vue";
+import { reactive, defineComponent } from "vue";
 import { useI18n } from "vue-i18n";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { useAppStoreWithOut } from "@/store/modules/app";

src/views/dashboard/graphs/Bar.vue

@@ -13,10 +13,10 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
-  <Graph ref="chart" :option="option" :autoResize="true" />
+  <Graph :option="option" />
 </template>
 <script lang="ts" setup>
-import { defineProps, ref, computed } from "vue";
+import { defineProps, computed } from "vue";
 import type { PropType } from "vue";
 import { Event } from "@/types/events";
 
@@ -37,8 +37,6 @@ const props = defineProps({
     default: () => ({ theme: "light", showBackground: true, barWidth: 20 }),
   },
 });
-/*global Nullable */
-const chart = ref<Nullable<HTMLElement>>(null);
 const option = computed(() => getOption());
 
 function getOption() {

src/views/dashboard/graphs/HeatMap.vue

@@ -13,7 +13,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
-  <Graph ref="chart" :option="option" :autoResize="true" />
+  <Graph :option="option" />
 </template>
 <script lang="ts" setup>
 import { defineProps, ref, computed } from "vue";

src/views/dashboard/graphs/Line.vue

@@ -13,7 +13,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
-  <Graph ref="chart" :option="option" :autoResize="true" />
+  <Graph :option="option" />
 </template>
 <script lang="ts" setup>
 import { defineProps, ref, computed } from "vue";
@@ -30,8 +30,6 @@ const props = defineProps({
   theme: { type: String, default: "light" },
   itemEvents: { type: Array as PropType<Event[]>, default: () => [] },
 });
-/*global Nullable */
-const chart = ref<Nullable<HTMLElement>>(null);
 const option = computed(() => getOption());
 function getOption() {
   const keys = Object.keys(props.data || {}).filter(

src/views/dashboard/graphs/Pie.vue

@@ -13,7 +13,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
-  <Graph ref="chart" :option="option" :autoResize="true" />
+  <Graph :option="option" />
 </template>
 <script lang="ts" setup>
 import { defineProps, ref, computed } from "vue";

src/views/dashboard/panel/Widget.vue

@@ -35,24 +35,28 @@ limitations under the License. -->
     </div>
   </div>
 </template>
-<script lang="ts" setup>
-import { defineProps, reactive, onMounted } from "vue";
+<script lang="ts">
+import { toRefs, reactive, defineComponent } from "vue";
 import type { PropType } from "vue";
 import { LayoutConfig } from "@/types/dashboard";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { useAppStoreWithOut } from "@/store/modules/app";
-
+import graphs from "../graphs";
+const props = {
+  item: { type: Object as PropType<LayoutConfig>, default: () => ({}) },
+};
+export default defineComponent({
+  name: "Widget",
+  components: { ...graphs },
+  props,
+  setup(props) {
     const state = reactive({
       source: {},
     });
-const props = defineProps({
-  item: { type: Object as PropType<LayoutConfig>, default: () => ({}) },
-});
+    const { item } = toRefs(props);
     const appStoreWithOut = useAppStoreWithOut();
     const dashboardStore = useDashboardStore();
-onMounted(() => {
     queryMetrics();
-});
     async function queryMetrics() {
       const json = await dashboardStore.fetchMetricValue(props.item);
 
@@ -69,7 +73,6 @@ async function queryMetrics() {
       state.source = {
         [m]: metricVal,
       };
-  console.log(state.source);
     }
 
     function removeWidget() {
@@ -79,6 +82,15 @@ function setConfig() {
       dashboardStore.setConfigPanel(true);
       dashboardStore.selectWidget(props.item);
     }
+    return {
+      state,
+      appStoreWithOut,
+      removeWidget,
+      setConfig,
+      item,
+    };
+  },
+});
 </script>
 <style lang="scss" scoped>
 .widget {