<template>
  <FmDashboardBasicBar :width="400" :height="300" :dataSource="dataSource" />
  <FmDashboardBasicLine :width="400" :height="300" :dataSource="lineDataSource" />
</template>

<script lang="ts">
import { defineComponent, defineAsyncComponent } from "vue";

export default defineComponent({
  name: "App",
  setup: () => {
    return {
      dataSource: {
        sourceType: 0,
        data: {
          xData: ["轴标签A", "轴标签B", "轴标签C", "轴标签D"],
          series: [
            {
              type: "bar",
              name: "系列1",
              data: [89.3, 92.1, 94.4, 85.4],
            },
            {
              type: "bar",
              name: "系列2",
              data: [95.8, 89.4, 91.2, 76.9],
            },
          ],
        },
      },
      lineDataSource: {
        sourceType: 0,
        data: {
          xData: ["轴标签A", "轴标签B", "轴标签C", "轴标签D"],
          series: [
            {
              type: "line",
              name: "系列1",
              data: [89.3, 92.1, 94.4, 85.4],
            },
            {
              type: "line",
              name: "系列2",
              data: [95.8, 89.4, 91.2, 76.9],
            },
          ],
        },
      },
    };
  },
});
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
