<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <lineChart
    :lineList="lineList"
    legendData="漏操作量"
  ></lineChart>
</template>

<script>
import { ref } from "vue";
import lineChart from "./components/lineChart.vue";

export default {
  name: "App",
  components: {
    lineChart,
  },
  setup() {
    const lineList = ref([]);

    lineList.value = [
      {
        name: "2023-01-04",
        value: 7.36,
      },
      {
        name: "2023-01-05",
        value: 7.43,
      },
      {
        name: "2023-01-06",
        value: 29.69,
      },
      {
        name: "2023-01-07",
        value: 28.99,
      },
      {
        name: "2023-01-08",
        value: 10.14,
      },
      {
        name: "2023-01-09",
        value: 46.32,
      },
      {
        name: "2023-01-10",
        value: 31.95,
      },
    ];

    return {
      lineList,
    };
  },
};
</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>
