Система управления на Vue

<a href="https://github.com/vuejs/vue">
    <img src="https://img.shields.io/badge/vue-2.6.10-brightgreen.svg" alt="vue">
</a>
<a href="https://github.com/ElemeFE/element">
    <img src="https://img.shields.io/badge/element--ui-2.8.2-brightgreen.svg" alt="element-ui">
</a>
<a href="https://github.com/lin-xin/vue-manage-system/blob/master/LICENSE">
    <img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license">
</a>
<a href="https://github.com/lin-xin/vue-manage-system/releases">
    <img src="https://img.shields.io/github/release/lin-xin/vue-manage-system.svg" alt="GitHub release">
</a>
<a href="https://lin-xin.gitee.io/example/work/#/donate">
    <img src="https://img.shields.io/badge/$ -donate-ff69b4.svg" alt="donate">
</a>

git clone https://github.com/lin-xin/vue-manage-system.git // Клонирование шаблонов
cd vue-manage-system // Вход в каталог шаблонов
npm install // Установка зависимостей

npm run dev

// Сборка проекта
npm run build

<template>
    <div>
        <schart class="wrapper" canvasId="myCanvas" :options="options"></schart>
    </div>
</template>
<script setup>
import { ref } from 'vue';
import Schart from "vue-schart"; // Импорт компонента Schart
const options = ref({
    type: "bar",
    title: {
        text: "График продаж по категориям за последнюю неделю",
    },
    labels: ["Понедельник", "Вторник", "Среда", "Четверг", "Пятница"],
    datasets: [
        {
            label: "Бытовая техника",
            data: [234, 278, 270, 190, 230],
        },
        {
            label: "Универсальный магазин",
            data: [164, 178, 190, 135, 160],
        },
        {
            label: "Продукты питания",
            data: [144, 198, 150, 235, 120],
        },
    ],
})
</script>
<style>
    .wrapper {
        width: 7rem;
        height: 5rem;
    }
</style>