wuhui_zzw
/
wyyl
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

后台首页图表

This commit is contained in:
pushuo 2022-07-29 17:19:22 +08:00
parent 55a57244f9
commit d36e991ab0
5 changed files with 241 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
beike/Admin/View/Components/Sidebar.php
View File

@ -33,6 +33,11 @@ class Sidebar extends Component
$routeNameWithPrefix = request()->route()->getName(); $routeNameWithPrefix = request()->route()->getName();
$routeName = str_replace($adminName . '.', '', $routeNameWithPrefix); $routeName = str_replace($adminName . '.', '', $routeNameWithPrefix);
if (Str::startsWith($routeName, ['home.'])) {
$this->addLink('首页装修', admin_route('design.index'), 'fa fa-tachometer-alt', $this->equalRoute('design.index'), true);
$this->addLink('插件列表', admin_route('plugins.index'), 'fa fa-tachometer-alt', $this->equalRoute('plugins.index'));
}
if (Str::startsWith($routeName, ['products.', 'categories.', 'brands.'])) { if (Str::startsWith($routeName, ['products.', 'categories.', 'brands.'])) {
$this->addLink('商品分类', admin_route('categories.index'), 'fa fa-tachometer-alt', $this->equalRoute('categories.index')); $this->addLink('商品分类', admin_route('categories.index'), 'fa fa-tachometer-alt', $this->equalRoute('categories.index'));
$this->addLink('商品列表', admin_route('products.index'), 'fa fa-tachometer-alt', $this->equalRoute('products.index')); $this->addLink('商品列表', admin_route('products.index'), 'fa fa-tachometer-alt', $this->equalRoute('products.index'));

124
public/build/beike/admin/css/bootstrap.css vendored
View File

@ -6803,7 +6803,7 @@
--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)); --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
--bs-body-font-family: var(--bs-font-sans-serif); --bs-body-font-family: var(--bs-font-sans-serif);
--bs-body-font-size: 0.92rem; --bs-body-font-size: 0.82rem;
--bs-body-font-weight: 400; --bs-body-font-weight: 400;
--bs-body-line-height: 1.5; --bs-body-line-height: 1.5;
--bs-body-color: #212529; --bs-body-color: #212529;
@ -6855,47 +6855,42 @@ h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
} }
h1, .h1 { h1, .h1 {
font-size: calc(1.355rem + 1.26vw); font-size: calc(1.33rem + 0.96vw);
} }
@media (min-width: 1200px) { @media (min-width: 1200px) {
h1, .h1 { h1, .h1 {
font-size: 2.3rem; font-size: 2.05rem;
} }
} }
h2, .h2 { h2, .h2 {
font-size: calc(1.309rem + 0.708vw); font-size: calc(1.289rem + 0.468vw);
} }
@media (min-width: 1200px) { @media (min-width: 1200px) {
h2, .h2 { h2, .h2 {
font-size: 1.84rem; font-size: 1.64rem;
} }
} }
h3, .h3 { h3, .h3 {
font-size: calc(1.286rem + 0.432vw); font-size: calc(1.2685rem + 0.222vw);
} }
@media (min-width: 1200px) { @media (min-width: 1200px) {
h3, .h3 { h3, .h3 {
font-size: 1.61rem; font-size: 1.435rem;
} }
} }
h4, .h4 { h4, .h4 {
font-size: calc(1.263rem + 0.156vw); font-size: 1.23rem;
}
@media (min-width: 1200px) {
h4, .h4 {
font-size: 1.38rem;
}
} }
h5, .h5 { h5, .h5 {
font-size: 1.15rem; font-size: 1.025rem;
} }
h6, .h6 { h6, .h6 {
font-size: 0.92rem; font-size: 0.82rem;
} }
p { p {
@ -7055,7 +7050,7 @@ table {
caption { caption {
padding-top: 0.5rem; padding-top: 0.5rem;
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
color: #6c757d; color: #95aac9;
text-align: left; text-align: left;
} }
@ -7234,7 +7229,7 @@ progress {
} }
.lead { .lead {
font-size: 1.15rem; font-size: 1.025rem;
font-weight: 300; font-weight: 300;
} }
@ -7328,7 +7323,7 @@ progress {
.blockquote { .blockquote {
margin-bottom: 1rem; margin-bottom: 1rem;
font-size: 1.15rem; font-size: 1.025rem;
} }
.blockquote > :last-child { .blockquote > :last-child {
margin-bottom: 0; margin-bottom: 0;
@ -8916,26 +8911,26 @@ progress {
.col-form-label-lg { .col-form-label-lg {
padding-top: calc(0.5rem + 1px); padding-top: calc(0.5rem + 1px);
padding-bottom: calc(0.5rem + 1px); padding-bottom: calc(0.5rem + 1px);
font-size: 1.15rem; font-size: 1.025rem;
} }
.col-form-label-sm { .col-form-label-sm {
padding-top: calc(0.25rem + 1px); padding-top: calc(0.25rem + 1px);
padding-bottom: calc(0.25rem + 1px); padding-bottom: calc(0.25rem + 1px);
font-size: 0.805rem; font-size: 0.7175rem;
} }
.form-text { .form-text {
margin-top: 0.25rem; margin-top: 0.25rem;
font-size: 0.875em; font-size: 0.875em;
color: #6c757d; color: #95aac9;
} }
.form-control { .form-control {
display: block; display: block;
width: 100%; width: 100%;
padding: 0.375rem 0.75rem; padding: 0.375rem 0.75rem;
font-size: 0.92rem; font-size: 0.82rem;
font-weight: 400; font-weight: 400;
line-height: 1.5; line-height: 1.5;
color: #212529; color: #212529;
@ -9076,7 +9071,7 @@ progress {
.form-control-sm { .form-control-sm {
min-height: calc(1.5em + 0.5rem + 2px); min-height: calc(1.5em + 0.5rem + 2px);
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
font-size: 0.805rem; font-size: 0.7175rem;
border-radius: 0.2rem; border-radius: 0.2rem;
} }
.form-control-sm::-webkit-file-upload-button { .form-control-sm::-webkit-file-upload-button {
@ -9101,7 +9096,7 @@ progress {
.form-control-lg { .form-control-lg {
min-height: calc(1.5em + 1rem + 2px); min-height: calc(1.5em + 1rem + 2px);
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
font-size: 1.15rem; font-size: 1.025rem;
border-radius: 0.3rem; border-radius: 0.3rem;
} }
.form-control-lg::-webkit-file-upload-button { .form-control-lg::-webkit-file-upload-button {
@ -9155,7 +9150,7 @@ textarea.form-control-lg {
width: 100%; width: 100%;
padding: 0.375rem 2.25rem 0.375rem 0.75rem; padding: 0.375rem 2.25rem 0.375rem 0.75rem;
-moz-padding-start: calc(0.75rem - 3px); -moz-padding-start: calc(0.75rem - 3px);
font-size: 0.92rem; font-size: 0.82rem;
font-weight: 400; font-weight: 400;
line-height: 1.5; line-height: 1.5;
color: #212529; color: #212529;
@ -9197,7 +9192,7 @@ textarea.form-control-lg {
padding-top: 0.25rem; padding-top: 0.25rem;
padding-bottom: 0.25rem; padding-bottom: 0.25rem;
padding-left: 0.5rem; padding-left: 0.5rem;
font-size: 0.805rem; font-size: 0.7175rem;
border-radius: 0.2rem; border-radius: 0.2rem;
} }
@ -9205,13 +9200,13 @@ textarea.form-control-lg {
padding-top: 0.5rem; padding-top: 0.5rem;
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
padding-left: 1rem; padding-left: 1rem;
font-size: 1.15rem; font-size: 1.025rem;
border-radius: 0.3rem; border-radius: 0.3rem;
} }
.form-check { .form-check {
display: block; display: block;
min-height: 1.38rem; min-height: 1.23rem;
padding-left: 1.7em; padding-left: 1.7em;
margin-bottom: 0.125rem; margin-bottom: 0.125rem;
} }
@ -9509,7 +9504,7 @@ textarea.form-control-lg {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0.375rem 0.75rem; padding: 0.375rem 0.75rem;
font-size: 0.92rem; font-size: 0.82rem;
font-weight: 400; font-weight: 400;
line-height: 1.5; line-height: 1.5;
color: #212529; color: #212529;
@ -9525,7 +9520,7 @@ textarea.form-control-lg {
.input-group-lg > .input-group-text, .input-group-lg > .input-group-text,
.input-group-lg > .btn { .input-group-lg > .btn {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
font-size: 1.15rem; font-size: 1.025rem;
border-radius: 0.3rem; border-radius: 0.3rem;
} }
@ -9534,7 +9529,7 @@ textarea.form-control-lg {
.input-group-sm > .input-group-text, .input-group-sm > .input-group-text,
.input-group-sm > .btn { .input-group-sm > .btn {
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
font-size: 0.805rem; font-size: 0.7175rem;
border-radius: 0.2rem; border-radius: 0.2rem;
} }
@ -9575,7 +9570,7 @@ textarea.form-control-lg {
max-width: 100%; max-width: 100%;
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
margin-top: 0.1rem; margin-top: 0.1rem;
font-size: 0.805rem; font-size: 0.7175rem;
color: #fff; color: #fff;
background-color: rgba(25, 135, 84, 0.9); background-color: rgba(25, 135, 84, 0.9);
border-radius: 0; border-radius: 0;
@ -9664,7 +9659,7 @@ textarea.form-control-lg {
max-width: 100%; max-width: 100%;
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
margin-top: 0.1rem; margin-top: 0.1rem;
font-size: 0.805rem; font-size: 0.7175rem;
color: #fff; color: #fff;
background-color: rgba(220, 53, 69, 0.9); background-color: rgba(220, 53, 69, 0.9);
border-radius: 0; border-radius: 0;
@ -9752,7 +9747,7 @@ textarea.form-control-lg {
background-color: transparent; background-color: transparent;
border: 1px solid transparent; border: 1px solid transparent;
padding: 0.375rem 0.75rem; padding: 0.375rem 0.75rem;
font-size: 0.92rem; font-size: 0.82rem;
border-radius: 0; border-radius: 0;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
} }
@ -10227,13 +10222,13 @@ textarea.form-control-lg {
.btn-lg, .btn-group-lg > .btn { .btn-lg, .btn-group-lg > .btn {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
font-size: 1.15rem; font-size: 1.025rem;
border-radius: 0.3rem; border-radius: 0.3rem;
} }
.btn-sm, .btn-group-sm > .btn { .btn-sm, .btn-group-sm > .btn {
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
font-size: 0.805rem; font-size: 0.7175rem;
border-radius: 0.2rem; border-radius: 0.2rem;
} }
@ -10305,7 +10300,7 @@ textarea.form-control-lg {
min-width: 10rem; min-width: 10rem;
padding: 0.5rem 0; padding: 0.5rem 0;
margin: 0; margin: 0;
font-size: 0.92rem; font-size: 0.82rem;
color: #212529; color: #212529;
text-align: left; text-align: left;
list-style: none; list-style: none;
@ -10539,7 +10534,7 @@ textarea.form-control-lg {
display: block; display: block;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
margin-bottom: 0; margin-bottom: 0;
font-size: 0.805rem; font-size: 0.7175rem;
color: #6c757d; color: #6c757d;
white-space: nowrap; white-space: nowrap;
} }
@ -10792,10 +10787,10 @@ textarea.form-control-lg {
justify-content: space-between; justify-content: space-between;
} }
.navbar-brand { .navbar-brand {
padding-top: 0.3275rem; padding-top: 0.34625rem;
padding-bottom: 0.3275rem; padding-bottom: 0.34625rem;
margin-right: 1rem; margin-right: 1rem;
font-size: 1.15rem; font-size: 1.025rem;
white-space: nowrap; white-space: nowrap;
} }
.navbar-nav { .navbar-nav {
@ -10826,7 +10821,7 @@ textarea.form-control-lg {
.navbar-toggler { .navbar-toggler {
padding: 0.25rem 0.75rem; padding: 0.25rem 0.75rem;
font-size: 1.15rem; font-size: 1.025rem;
line-height: 1; line-height: 1;
background-color: transparent; background-color: transparent;
border: 1px solid transparent; border: 1px solid transparent;
@ -11412,7 +11407,7 @@ textarea.form-control-lg {
align-items: center; align-items: center;
width: 100%; width: 100%;
padding: 1rem 1.25rem; padding: 1rem 1.25rem;
font-size: 0.92rem; font-size: 0.82rem;
color: #212529; color: #212529;
text-align: left; text-align: left;
background-color: #fff; background-color: #fff;
@ -11600,7 +11595,7 @@ textarea.form-control-lg {
.pagination-lg .page-link { .pagination-lg .page-link {
padding: 0.75rem 1.5rem; padding: 0.75rem 1.5rem;
font-size: 1.15rem; font-size: 1.025rem;
} }
.pagination-lg .page-item:first-child .page-link { .pagination-lg .page-item:first-child .page-link {
border-top-left-radius: 0.3rem; border-top-left-radius: 0.3rem;
@ -11613,7 +11608,7 @@ textarea.form-control-lg {
.pagination-sm .page-link { .pagination-sm .page-link {
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
font-size: 0.805rem; font-size: 0.7175rem;
} }
.pagination-sm .page-item:first-child .page-link { .pagination-sm .page-item:first-child .page-link {
border-top-left-radius: 0.2rem; border-top-left-radius: 0.2rem;
@ -11634,7 +11629,7 @@ textarea.form-control-lg {
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
vertical-align: baseline; vertical-align: baseline;
border-radius: 0; border-radius: 2px;
} }
.badge:empty { .badge:empty {
display: none; display: none;
@ -11759,7 +11754,7 @@ textarea.form-control-lg {
display: flex; display: flex;
height: 1rem; height: 1rem;
overflow: hidden; overflow: hidden;
font-size: 0.69rem; font-size: 0.615rem;
background-color: #e9ecef; background-color: #e9ecef;
border-radius: 0; border-radius: 0;
} }
@ -12515,7 +12510,7 @@ textarea.form-control-lg {
word-spacing: normal; word-spacing: normal;
white-space: normal; white-space: normal;
line-break: auto; line-break: auto;
font-size: 0.805rem; font-size: 0.7175rem;
word-wrap: break-word; word-wrap: break-word;
opacity: 0; opacity: 0;
} }
@ -12617,7 +12612,7 @@ textarea.form-control-lg {
word-spacing: normal; word-spacing: normal;
white-space: normal; white-space: normal;
line-break: auto; line-break: auto;
font-size: 0.805rem; font-size: 0.7175rem;
word-wrap: break-word; word-wrap: break-word;
background-color: #fff; background-color: #fff;
background-clip: padding-box; background-clip: padding-box;
@ -12711,7 +12706,7 @@ textarea.form-control-lg {
.popover-header { .popover-header {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
margin-bottom: 0; margin-bottom: 0;
font-size: 0.92rem; font-size: 0.82rem;
background-color: #f0f0f0; background-color: #f0f0f0;
border-bottom: 1px solid rgba(0, 0, 0, 0.2); border-bottom: 1px solid rgba(0, 0, 0, 0.2);
border-top-left-radius: calc(0.3rem - 1px); border-top-left-radius: calc(0.3rem - 1px);
@ -14336,27 +14331,27 @@ textarea.form-control-lg {
} }
.fs-1 { .fs-1 {
font-size: calc(1.355rem + 1.26vw) !important; font-size: calc(1.33rem + 0.96vw) !important;
} }
.fs-2 { .fs-2 {
font-size: calc(1.309rem + 0.708vw) !important; font-size: calc(1.289rem + 0.468vw) !important;
} }
.fs-3 { .fs-3 {
font-size: calc(1.286rem + 0.432vw) !important; font-size: calc(1.2685rem + 0.222vw) !important;
} }
.fs-4 { .fs-4 {
font-size: calc(1.263rem + 0.156vw) !important; font-size: 1.23rem !important;
} }
.fs-5 { .fs-5 {
font-size: 1.15rem !important; font-size: 1.025rem !important;
} }
.fs-6 { .fs-6 {
font-size: 0.92rem !important; font-size: 0.82rem !important;
} }
.fst-italic { .fst-italic {
@ -14511,7 +14506,7 @@ textarea.form-control-lg {
.text-muted { .text-muted {
--bs-text-opacity: 1; --bs-text-opacity: 1;
color: #6c757d !important; color: #95aac9 !important;
} }
.text-black-50 { .text-black-50 {
@ -17970,19 +17965,15 @@ textarea.form-control-lg {
} }
@media (min-width: 1200px) { @media (min-width: 1200px) {
.fs-1 { .fs-1 {
font-size: 2.3rem !important; font-size: 2.05rem !important;
} }
.fs-2 { .fs-2 {
font-size: 1.84rem !important; font-size: 1.64rem !important;
} }
.fs-3 { .fs-3 {
font-size: 1.61rem !important; font-size: 1.435rem !important;
}
.fs-4 {
font-size: 1.38rem !important;
} }
} }
@media print { @media print {
@ -18041,3 +18032,8 @@ textarea.form-control-lg {
width: 3em; width: 3em;
height: 1.6em; height: 1.6em;
} }
.badge.bg-success-soft {
color: #00d97e;
background-color: #ccf7e5;
}

13
public/vendor/chart/chart.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

9
resources/beike/admin/css/bootstrap/bootstrap.scss vendored
View File

@ -10,7 +10,7 @@
$primary: #fd560f; $primary: #fd560f;
$border-radius: 0; $border-radius: 0;
$font-size-base: 0.92rem; $font-size-base: 0.82rem;
$form-check-input-width: 1.2em; $form-check-input-width: 1.2em;
$form-switch-width: 2.6em; $form-switch-width: 2.6em;
$link-decoration: none; $link-decoration: none;
@ -23,6 +23,8 @@ $btn-focus-width: 0;
$table-border-color: #e9ecef; $table-border-color: #e9ecef;
$border-color: #e2e2e2; $border-color: #e2e2e2;
$input-border-color: #e2e2e2; $input-border-color: #e2e2e2;
$badge-border-radius: 2px;
$text-muted: #95aac9;
@import './bootstrap-icons'; @import './bootstrap-icons';
@import 'node_modules/bootstrap-5.1.3/scss/bootstrap'; @import 'node_modules/bootstrap-5.1.3/scss/bootstrap';
@ -44,3 +46,8 @@ $input-border-color: #e2e2e2;
height: 1.6em; height: 1.6em;
} }
} }
.badge.bg-success-soft {
color: #00d97e;
background-color: #ccf7e5;
}

187
resources/beike/admin/views/pages/home.blade.php
View File

@ -2,45 +2,168 @@
@section('title', '后台管理') @section('title', '后台管理')
@section('content') @push('header')
<div class="card mb-3"> <script src="{{ asset('vendor/chart/chart.min.js') }}"></script>
<div class="card-header">产品统计</div> @endpush
<div class="card-body">
<div><ul>
<li>产品总数</li>
<li>查看次数排序</li>
<li>卖出总额排序</li>
</ul>
</div>
</div>
</div>
<div class="card mb-3"> @section('content')
<div class="row">
<div class="col-lg-3 col-6">
<div class="card mb-4">
{{-- <div class="card-header">产品总数</div> --}}
<div class="card-body">
<h6 class="text-uppercase text-black-50 mb-3">产品总数</h6>
<div class="d-flex align-items-center justify-content-between">
<div class="d-flex align-items-center">
<div class="fs-2 lh-1 fw-bold">90</div><span class="mt-n1 ms-2 badge bg-success-soft">+3.5%</span>
</div>
<div><i class="fs-4 bi bi-cart"></i></div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-6">
<div class="card mb-4">
{{-- <div class="card-header">订单总数</div> --}}
<div class="card-body">
<h6 class="text-uppercase text-black-50 mb-3">订单总数</h6>
<div class="d-flex align-items-center justify-content-between">
<div class="d-flex align-items-center">
<div class="fs-2 lh-1 fw-bold">190</div>
</div>
<div><i class="fs-4 bi bi-journal-text"></i></div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-6">
<div class="card mb-4">
{{-- <div class="card-header">会员总数</div> --}}
<div class="card-body">
<h6 class="text-uppercase text-black-50 mb-3">会员总数</h6>
<div class="d-flex align-items-center justify-content-between">
<div class="d-flex align-items-center">
<div class="fs-2 lh-1 fw-bold">190</div>
</div>
<div><i class="fs-4 bi bi-person"></i></div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-6">
<div class="card mb-4">
{{-- <div class="card-header">会员总数</div> --}}
<div class="card-body">
<h6 class="text-uppercase text-black-50 mb-3">XXXXX</h6>
<div class="d-flex align-items-center justify-content-between">
<div class="d-flex align-items-center">
<div class="fs-2 lh-1 fw-bold">190</div>
</div>
<div><i class="fs-4 bi bi-person"></i></div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-8 col-12">
<div class="card mb-4">
<div class="card-header">客户统计</div> <div class="card-header">客户统计</div>
<div class="card-body"> <div class="card-body">
<div><ul> <canvas id="customer-chart"></canvas>
<li>新注册</li>
<li>最近访问</li>
<li>活跃用户</li>
<li>近期下单</li>
<li>订单总额排序</li>
<li>订单总数排序</li>
</ul>
</div>
</div> </div>
</div>
</div> </div>
<div class="col-lg-4 col-12">
<div class="card mb-3"> <div class="card mb-4">
<div class="card-header">订单统计</div> <div class="card-header">客户统计</div>
<div class="card-body"> <div class="card-body">
<div><ul> <canvas id="customer-chart-1"></canvas>
<li>新订单</li>
<li>已付款</li>
<li>已发货</li>
<li>已完成</li>
</ul>
</div>
</div> </div>
</div>
</div> </div>
</div>
<div class="card mb-3">
<div class="card-header">订单统计</div>
<div class="card-body">
<div>
<ul>
<li>新订单</li>
<li>已付款</li>
<li>已发货</li>
<li>已完成</li>
</ul>
</div>
</div>
</div>
@endsection @endsection
@push('footer')
<script>
const ctx = document.getElementById('customer-chart').getContext('2d');
const ctx1 = document.getElementById('customer-chart-1').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['新注册', '最近访问', '活跃用户', '近期下单'],
datasets: [{
label: '# of Votes',
data: [112, 19, 3, 5, 2, 3],
// borderRadius: 5,
borderWidth: 2,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
const myChart1 = new Chart(ctx1, {
type: 'doughnut',
data: {
labels: ['Red', 'Orange', 'Yellow'],
datasets: [{
label: '# of Votes',
data: [112, 19, 3],
cutout: '80%',
radius: '80%',
spacing: 6,
hoverOffset: 4,
// weight: 1,
// hoverBorderWidth: 5,
// borderRadius: 5,
backgroundColor: [
'#2c7be4',
'#a5c5f7',
'#d2ddec',
],
borderWidth: 0
}]
}
});
</script>
@endpush