1137 lines
39 KiB
HTML
1137 lines
39 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
|
|
|
<title>Charts / ECharts - NiceAdmin Bootstrap Template</title>
|
|
<meta content="" name="description">
|
|
<meta content="" name="keywords">
|
|
|
|
<!-- Favicons -->
|
|
<link href="assets/img/favicon.png" rel="icon">
|
|
<link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
|
|
|
|
<!-- Google Fonts -->
|
|
<link href="https://fonts.gstatic.com" rel="preconnect">
|
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Nunito:300,300i,400,400i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
|
|
|
|
<!-- Vendor CSS Files -->
|
|
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
|
|
<link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
|
|
<link href="assets/vendor/quill/quill.snow.css" rel="stylesheet">
|
|
<link href="assets/vendor/quill/quill.bubble.css" rel="stylesheet">
|
|
<link href="assets/vendor/remixicon/remixicon.css" rel="stylesheet">
|
|
<link href="assets/vendor/simple-datatables/style.css" rel="stylesheet">
|
|
|
|
<!-- Template Main CSS File -->
|
|
<link href="assets/css/style.css" rel="stylesheet">
|
|
|
|
<!-- =======================================================
|
|
* Template Name: NiceAdmin
|
|
* Updated: May 30 2023 with Bootstrap v5.3.0
|
|
* Template URL: https://bootstrapmade.com/nice-admin-bootstrap-admin-html-template/
|
|
* Author: BootstrapMade.com
|
|
* License: https://bootstrapmade.com/license/
|
|
======================================================== -->
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!-- ======= Header ======= -->
|
|
<header id="header" class="header fixed-top d-flex align-items-center">
|
|
|
|
<div class="d-flex align-items-center justify-content-between">
|
|
<a href="/dashboard" class="logo d-flex align-items-center">
|
|
<img src="assets/img/logo.png" alt="">
|
|
<span class="d-none d-lg-block">NiceAdmin</span>
|
|
</a>
|
|
<i class="bi bi-list toggle-sidebar-btn"></i>
|
|
</div><!-- End Logo -->
|
|
|
|
<div class="search-bar">
|
|
<form class="search-form d-flex align-items-center" method="POST" action="#">
|
|
<input type="text" name="query" placeholder="Search" title="Enter search keyword">
|
|
<button type="submit" title="Search"><i class="bi bi-search"></i></button>
|
|
</form>
|
|
</div><!-- End Search Bar -->
|
|
|
|
<nav class="header-nav ms-auto">
|
|
<ul class="d-flex align-items-center">
|
|
|
|
<li class="nav-item d-block d-lg-none">
|
|
<a class="nav-link nav-icon search-bar-toggle " href="#">
|
|
<i class="bi bi-search"></i>
|
|
</a>
|
|
</li><!-- End Search Icon-->
|
|
|
|
<li class="nav-item dropdown">
|
|
|
|
<a class="nav-link nav-icon" href="#" data-bs-toggle="dropdown">
|
|
<i class="bi bi-bell"></i>
|
|
<span class="badge bg-primary badge-number">4</span>
|
|
</a><!-- End Notification Icon -->
|
|
|
|
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow notifications">
|
|
<li class="dropdown-header">
|
|
You have 4 new notifications
|
|
<a href="#"><span class="badge rounded-pill bg-primary p-2 ms-2">View all</span></a>
|
|
</li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
|
|
<li class="notification-item">
|
|
<i class="bi bi-exclamation-circle text-warning"></i>
|
|
<div>
|
|
<h4>Lorem Ipsum</h4>
|
|
<p>Quae dolorem earum veritatis oditseno</p>
|
|
<p>30 min. ago</p>
|
|
</div>
|
|
</li>
|
|
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
|
|
<li class="notification-item">
|
|
<i class="bi bi-x-circle text-danger"></i>
|
|
<div>
|
|
<h4>Atque rerum nesciunt</h4>
|
|
<p>Quae dolorem earum veritatis oditseno</p>
|
|
<p>1 hr. ago</p>
|
|
</div>
|
|
</li>
|
|
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
|
|
<li class="notification-item">
|
|
<i class="bi bi-check-circle text-success"></i>
|
|
<div>
|
|
<h4>Sit rerum fuga</h4>
|
|
<p>Quae dolorem earum veritatis oditseno</p>
|
|
<p>2 hrs. ago</p>
|
|
</div>
|
|
</li>
|
|
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
|
|
<li class="notification-item">
|
|
<i class="bi bi-info-circle text-primary"></i>
|
|
<div>
|
|
<h4>Dicta reprehenderit</h4>
|
|
<p>Quae dolorem earum veritatis oditseno</p>
|
|
<p>4 hrs. ago</p>
|
|
</div>
|
|
</li>
|
|
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li class="dropdown-footer">
|
|
<a href="#">Show all notifications</a>
|
|
</li>
|
|
|
|
</ul><!-- End Notification Dropdown Items -->
|
|
|
|
</li><!-- End Notification Nav -->
|
|
|
|
<li class="nav-item dropdown">
|
|
|
|
<a class="nav-link nav-icon" href="#" data-bs-toggle="dropdown">
|
|
<i class="bi bi-chat-left-text"></i>
|
|
<span class="badge bg-success badge-number">3</span>
|
|
</a><!-- End Messages Icon -->
|
|
|
|
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow messages">
|
|
<li class="dropdown-header">
|
|
You have 3 new messages
|
|
<a href="#"><span class="badge rounded-pill bg-primary p-2 ms-2">View all</span></a>
|
|
</li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
|
|
<li class="message-item">
|
|
<a href="#">
|
|
<img src="assets/img/messages-1.jpg" alt="" class="rounded-circle">
|
|
<div>
|
|
<h4>Maria Hudson</h4>
|
|
<p>Velit asperiores et ducimus soluta repudiandae labore officia est ut...</p>
|
|
<p>4 hrs. ago</p>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
|
|
<li class="message-item">
|
|
<a href="#">
|
|
<img src="assets/img/messages-2.jpg" alt="" class="rounded-circle">
|
|
<div>
|
|
<h4>Anna Nelson</h4>
|
|
<p>Velit asperiores et ducimus soluta repudiandae labore officia est ut...</p>
|
|
<p>6 hrs. ago</p>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
|
|
<li class="message-item">
|
|
<a href="#">
|
|
<img src="assets/img/messages-3.jpg" alt="" class="rounded-circle">
|
|
<div>
|
|
<h4>David Muldon</h4>
|
|
<p>Velit asperiores et ducimus soluta repudiandae labore officia est ut...</p>
|
|
<p>8 hrs. ago</p>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
|
|
<li class="dropdown-footer">
|
|
<a href="#">Show all messages</a>
|
|
</li>
|
|
|
|
</ul><!-- End Messages Dropdown Items -->
|
|
|
|
</li><!-- End Messages Nav -->
|
|
|
|
<li class="nav-item dropdown pe-3">
|
|
|
|
<a class="nav-link nav-profile d-flex align-items-center pe-0" href="#" data-bs-toggle="dropdown">
|
|
<img src="assets/img/profile-img.jpg" alt="Profile" class="rounded-circle">
|
|
<span class="d-none d-md-block dropdown-toggle ps-2">K. Anderson</span>
|
|
</a><!-- End Profile Iamge Icon -->
|
|
|
|
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow profile">
|
|
<li class="dropdown-header">
|
|
<h6>Kevin Anderson</h6>
|
|
<span>Web Designer</span>
|
|
</li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
|
|
<li>
|
|
<a class="dropdown-item d-flex align-items-center" href="user-profile.html">
|
|
<i class="bi bi-person"></i>
|
|
<span>My Profile</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
|
|
<li>
|
|
<a class="dropdown-item d-flex align-items-center" href="user-profile.html">
|
|
<i class="bi bi-gear"></i>
|
|
<span>Account Settings</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
|
|
<li>
|
|
<a class="dropdown-item d-flex align-items-center" href="pages-faq.html">
|
|
<i class="bi bi-question-circle"></i>
|
|
<span>Need Help?</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
|
|
<li>
|
|
<a class="dropdown-item d-flex align-items-center" href="#">
|
|
<i class="bi bi-box-arrow-right"></i>
|
|
<span>Sign Out</span>
|
|
</a>
|
|
</li>
|
|
|
|
</ul><!-- End Profile Dropdown Items -->
|
|
</li><!-- End Profile Nav -->
|
|
|
|
</ul>
|
|
</nav><!-- End Icons Navigation -->
|
|
|
|
</header><!-- End Header -->
|
|
|
|
<!-- ======= Sidebar ======= -->
|
|
<aside id="sidebar" class="sidebar">
|
|
|
|
<ul class="sidebar-nav" id="sidebar-nav">
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link collapsed" href="/dashboard">
|
|
<i class="bi bi-grid"></i>
|
|
<span>Dashboard</span>
|
|
</a>
|
|
</li><!-- End Dashboard Nav -->
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link collapsed" data-bs-target="#components-nav" data-bs-toggle="collapse" href="#">
|
|
<i class="bi bi-menu-button-wide"></i><span>Components</span><i class="bi bi-chevron-down ms-auto"></i>
|
|
</a>
|
|
<ul id="components-nav" class="nav-content collapse " data-bs-parent="#sidebar-nav">
|
|
<li>
|
|
<a href="components-alerts.html">
|
|
<i class="bi bi-circle"></i><span>Alerts</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="components-accordion.html">
|
|
<i class="bi bi-circle"></i><span>Accordion</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="components-badges.html">
|
|
<i class="bi bi-circle"></i><span>Badges</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="components-breadcrumbs.html">
|
|
<i class="bi bi-circle"></i><span>Breadcrumbs</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="components-buttons.html">
|
|
<i class="bi bi-circle"></i><span>Buttons</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="components-cards.html">
|
|
<i class="bi bi-circle"></i><span>Cards</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="components-carousel.html">
|
|
<i class="bi bi-circle"></i><span>Carousel</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="components-list-group.html">
|
|
<i class="bi bi-circle"></i><span>List group</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="components-modal.html">
|
|
<i class="bi bi-circle"></i><span>Modal</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="components-tabs.html">
|
|
<i class="bi bi-circle"></i><span>Tabs</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="components-pagination.html">
|
|
<i class="bi bi-circle"></i><span>Pagination</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="components-progress.html">
|
|
<i class="bi bi-circle"></i><span>Progress</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="components-spinners.html">
|
|
<i class="bi bi-circle"></i><span>Spinners</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="components-tooltips.html">
|
|
<i class="bi bi-circle"></i><span>Tooltips</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li><!-- End Components Nav -->
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link collapsed" data-bs-target="#forms-nav" data-bs-toggle="collapse" href="#">
|
|
<i class="bi bi-journal-text"></i><span>Forms</span><i class="bi bi-chevron-down ms-auto"></i>
|
|
</a>
|
|
<ul id="forms-nav" class="nav-content collapse " data-bs-parent="#sidebar-nav">
|
|
<li>
|
|
<a href="forms-elements.html">
|
|
<i class="bi bi-circle"></i><span>Form Elements</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="forms-layouts.html">
|
|
<i class="bi bi-circle"></i><span>Form Layouts</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="forms-editors.html">
|
|
<i class="bi bi-circle"></i><span>Form Editors</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="forms-validation.html">
|
|
<i class="bi bi-circle"></i><span>Form Validation</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li><!-- End Forms Nav -->
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link collapsed" data-bs-target="#tables-nav" data-bs-toggle="collapse" href="#">
|
|
<i class="bi bi-layout-text-window-reverse"></i><span>Tables</span><i class="bi bi-chevron-down ms-auto"></i>
|
|
</a>
|
|
<ul id="tables-nav" class="nav-content collapse " data-bs-parent="#sidebar-nav">
|
|
<li>
|
|
<a href="tables-general.html">
|
|
<i class="bi bi-circle"></i><span>General Tables</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="tables-data.html">
|
|
<i class="bi bi-circle"></i><span>Data Tables</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li><!-- End Tables Nav -->
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " data-bs-target="#charts-nav" data-bs-toggle="collapse" href="#">
|
|
<i class="bi bi-bar-chart"></i><span>Charts</span><i class="bi bi-chevron-down ms-auto"></i>
|
|
</a>
|
|
<ul id="charts-nav" class="nav-content collapse show" data-bs-parent="#sidebar-nav">
|
|
<li>
|
|
<a href="charts-chartjs.html">
|
|
<i class="bi bi-circle"></i><span>Chart.js</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="charts-apexcharts.html">
|
|
<i class="bi bi-circle"></i><span>ApexCharts</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="charts-echarts.html" class="active">
|
|
<i class="bi bi-circle"></i><span>ECharts</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li><!-- End Charts Nav -->
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link collapsed" data-bs-target="#icons-nav" data-bs-toggle="collapse" href="#">
|
|
<i class="bi bi-gem"></i><span>Icons</span><i class="bi bi-chevron-down ms-auto"></i>
|
|
</a>
|
|
<ul id="icons-nav" class="nav-content collapse " data-bs-parent="#sidebar-nav">
|
|
<li>
|
|
<a href="icons-bootstrap.html">
|
|
<i class="bi bi-circle"></i><span>Bootstrap Icons</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="icons-remix.html">
|
|
<i class="bi bi-circle"></i><span>Remix Icons</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="icons-boxicons.html">
|
|
<i class="bi bi-circle"></i><span>Boxicons</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li><!-- End Icons Nav -->
|
|
|
|
<li class="nav-heading">Pages</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link collapsed" href="user-profile.html">
|
|
<i class="bi bi-person"></i>
|
|
<span>Profile</span>
|
|
</a>
|
|
</li><!-- End Profile Page Nav -->
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link collapsed" href="pages-faq.html">
|
|
<i class="bi bi-question-circle"></i>
|
|
<span>F.A.Q</span>
|
|
</a>
|
|
</li><!-- End F.A.Q Page Nav -->
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link collapsed" href="pages-contact.html">
|
|
<i class="bi bi-envelope"></i>
|
|
<span>Contact</span>
|
|
</a>
|
|
</li><!-- End Contact Page Nav -->
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link collapsed" href="pages-register.html">
|
|
<i class="bi bi-card-list"></i>
|
|
<span>Register</span>
|
|
</a>
|
|
</li><!-- End Register Page Nav -->
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link collapsed" href="pages-login.html">
|
|
<i class="bi bi-box-arrow-in-right"></i>
|
|
<span>Login</span>
|
|
</a>
|
|
</li><!-- End Login Page Nav -->
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link collapsed" href="pages-error-404.html">
|
|
<i class="bi bi-dash-circle"></i>
|
|
<span>Error 404</span>
|
|
</a>
|
|
</li><!-- End Error 404 Page Nav -->
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link collapsed" href="pages-blank.html">
|
|
<i class="bi bi-file-earmark"></i>
|
|
<span>Blank</span>
|
|
</a>
|
|
</li><!-- End Blank Page Nav -->
|
|
|
|
</ul>
|
|
|
|
</aside><!-- End Sidebar-->
|
|
|
|
<main id="main" class="main">
|
|
|
|
<div class="pagetitle">
|
|
<h1>ECharts</h1>
|
|
<nav>
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item"><a href="/dashboard">Home</a></li>
|
|
<li class="breadcrumb-item">Charts</li>
|
|
<li class="breadcrumb-item active">ECharts</li>
|
|
</ol>
|
|
</nav>
|
|
</div><!-- End Page Title -->
|
|
|
|
<p>ECharts Examples. You can check the <a href="https://echarts.apache.org/examples/en/index.html" target="_blank">official website</a> for more examples.</p>
|
|
|
|
<section class="section">
|
|
<div class="row">
|
|
|
|
<div class="col-lg-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Line Chart</h5>
|
|
|
|
<!-- Line Chart -->
|
|
<div id="lineChart" style="min-height: 400px;" class="echart"></div>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
echarts.init(document.querySelector("#lineChart")).setOption({
|
|
xAxis: {
|
|
type: 'category',
|
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
series: [{
|
|
data: [150, 230, 224, 218, 135, 147, 260],
|
|
type: 'line',
|
|
smooth: true
|
|
}]
|
|
});
|
|
});
|
|
</script>
|
|
<!-- End Line Chart -->
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Area Chart</h5>
|
|
|
|
<!-- Area Chart -->
|
|
<div id="areaChart" style="min-height: 400px;" class="echart"></div>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
echarts.init(document.querySelector("#areaChart")).setOption({
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
series: [{
|
|
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
|
type: 'line',
|
|
smooth: true,
|
|
areaStyle: {}
|
|
}]
|
|
});
|
|
});
|
|
</script>
|
|
<!-- End Area Chart -->
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Bar Chart</h5>
|
|
|
|
<!-- Bar Chart -->
|
|
<div id="barChart" style="min-height: 400px;" class="echart"></div>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
echarts.init(document.querySelector("#barChart")).setOption({
|
|
xAxis: {
|
|
type: 'category',
|
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
series: [{
|
|
data: [120, 200, 150, 80, 70, 110, 130],
|
|
type: 'bar'
|
|
}]
|
|
});
|
|
});
|
|
</script>
|
|
<!-- End Bar Chart -->
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Vertical Bar Chart</h5>
|
|
|
|
<!-- Vertical Bar Chart -->
|
|
<div id="verticalBarChart" style="min-height: 400px;" class="echart"></div>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
echarts.init(document.querySelector("#verticalBarChart")).setOption({
|
|
title: {
|
|
text: 'World Population'
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
legend: {},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'value',
|
|
boundaryGap: [0, 0.01]
|
|
},
|
|
yAxis: {
|
|
type: 'category',
|
|
data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
|
|
},
|
|
series: [{
|
|
name: '2011',
|
|
type: 'bar',
|
|
data: [18203, 23489, 29034, 104970, 131744, 630230]
|
|
},
|
|
{
|
|
name: '2012',
|
|
type: 'bar',
|
|
data: [19325, 23438, 31000, 121594, 134141, 681807]
|
|
}
|
|
]
|
|
});
|
|
});
|
|
</script>
|
|
<!-- End Vertical Bar Chart -->
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Pie Chart</h5>
|
|
|
|
<!-- Pie Chart -->
|
|
<div id="pieChart" style="min-height: 400px;" class="echart"></div>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
echarts.init(document.querySelector("#pieChart")).setOption({
|
|
title: {
|
|
text: 'Referer of a Website',
|
|
subtext: 'Fake Data',
|
|
left: 'center'
|
|
},
|
|
tooltip: {
|
|
trigger: 'item'
|
|
},
|
|
legend: {
|
|
orient: 'vertical',
|
|
left: 'left'
|
|
},
|
|
series: [{
|
|
name: 'Access From',
|
|
type: 'pie',
|
|
radius: '50%',
|
|
data: [{
|
|
value: 1048,
|
|
name: 'Search Engine'
|
|
},
|
|
{
|
|
value: 735,
|
|
name: 'Direct'
|
|
},
|
|
{
|
|
value: 580,
|
|
name: 'Email'
|
|
},
|
|
{
|
|
value: 484,
|
|
name: 'Union Ads'
|
|
},
|
|
{
|
|
value: 300,
|
|
name: 'Video Ads'
|
|
}
|
|
],
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
}
|
|
}
|
|
}]
|
|
});
|
|
});
|
|
</script>
|
|
<!-- End Pie Chart -->
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Donut Chart</h5>
|
|
|
|
<!-- Donut Chart -->
|
|
<div id="donutChart" style="min-height: 400px;" class="echart"></div>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
echarts.init(document.querySelector("#donutChart")).setOption({
|
|
tooltip: {
|
|
trigger: 'item'
|
|
},
|
|
legend: {
|
|
top: '5%',
|
|
left: 'center'
|
|
},
|
|
series: [{
|
|
name: 'Access From',
|
|
type: 'pie',
|
|
radius: ['40%', '70%'],
|
|
avoidLabelOverlap: false,
|
|
label: {
|
|
show: false,
|
|
position: 'center'
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: true,
|
|
fontSize: '18',
|
|
fontWeight: 'bold'
|
|
}
|
|
},
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
data: [{
|
|
value: 1048,
|
|
name: 'Search Engine'
|
|
},
|
|
{
|
|
value: 735,
|
|
name: 'Direct'
|
|
},
|
|
{
|
|
value: 580,
|
|
name: 'Email'
|
|
},
|
|
{
|
|
value: 484,
|
|
name: 'Union Ads'
|
|
},
|
|
{
|
|
value: 300,
|
|
name: 'Video Ads'
|
|
}
|
|
]
|
|
}]
|
|
});
|
|
});
|
|
</script>
|
|
<!-- End Donut Chart -->
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Radar Chart</h5>
|
|
|
|
<!-- Radar Chart -->
|
|
<div id="radarChart" style="min-height: 400px;" class="echart"></div>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
echarts.init(document.querySelector("#radarChart")).setOption({
|
|
legend: {
|
|
data: ['Allocated Budget', 'Actual Spending']
|
|
},
|
|
radar: {
|
|
// shape: 'circle',
|
|
indicator: [{
|
|
name: 'Sales',
|
|
max: 6500
|
|
},
|
|
{
|
|
name: 'Administration',
|
|
max: 16000
|
|
},
|
|
{
|
|
name: 'Information Technology',
|
|
max: 30000
|
|
},
|
|
{
|
|
name: 'Customer Support',
|
|
max: 38000
|
|
},
|
|
{
|
|
name: 'Development',
|
|
max: 52000
|
|
},
|
|
{
|
|
name: 'Marketing',
|
|
max: 25000
|
|
}
|
|
]
|
|
},
|
|
series: [{
|
|
name: 'Budget vs spending',
|
|
type: 'radar',
|
|
data: [{
|
|
value: [4200, 3000, 20000, 35000, 50000, 18000],
|
|
name: 'Allocated Budget'
|
|
},
|
|
{
|
|
value: [5000, 14000, 28000, 26000, 42000, 21000],
|
|
name: 'Actual Spending'
|
|
}
|
|
]
|
|
}]
|
|
});
|
|
});
|
|
</script>
|
|
<!-- End Radar Chart -->
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Polar Area Chart</h5>
|
|
|
|
<!-- Polar Area Chart -->
|
|
<div id="polarAreaChart" style="min-height: 400px;" class="echart"></div>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
echarts.init(document.querySelector("#polarAreaChart")).setOption({
|
|
angleAxis: {
|
|
type: 'category',
|
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
|
},
|
|
radiusAxis: {},
|
|
polar: {},
|
|
series: [{
|
|
type: 'bar',
|
|
data: [1, 2, 3, 4, 3, 5, 1],
|
|
coordinateSystem: 'polar',
|
|
name: 'A',
|
|
stack: 'a',
|
|
emphasis: {
|
|
focus: 'series'
|
|
}
|
|
},
|
|
{
|
|
type: 'bar',
|
|
data: [2, 4, 6, 1, 3, 2, 1],
|
|
coordinateSystem: 'polar',
|
|
name: 'B',
|
|
stack: 'a',
|
|
emphasis: {
|
|
focus: 'series'
|
|
}
|
|
},
|
|
{
|
|
type: 'bar',
|
|
data: [1, 2, 3, 4, 1, 2, 5],
|
|
coordinateSystem: 'polar',
|
|
name: 'C',
|
|
stack: 'a',
|
|
emphasis: {
|
|
focus: 'series'
|
|
}
|
|
}
|
|
],
|
|
legend: {
|
|
show: true,
|
|
data: ['A', 'B', 'C']
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
<!-- End Polar Area Chart -->
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Candle Stick Chart</h5>
|
|
|
|
<!-- Candle Stick Chart -->
|
|
<div id="candleStickChart" style="min-height: 400px;" class="echart"></div>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
echarts.init(document.querySelector("#candleStickChart")).setOption({
|
|
xAxis: {
|
|
data: ['2017-10-24', '2017-10-25', '2017-10-26', '2017-10-27']
|
|
},
|
|
yAxis: {},
|
|
series: [{
|
|
type: 'candlestick',
|
|
data: [
|
|
[20, 34, 10, 38],
|
|
[40, 35, 30, 50],
|
|
[31, 38, 33, 44],
|
|
[38, 15, 5, 42]
|
|
]
|
|
}]
|
|
});
|
|
});
|
|
</script>
|
|
<!-- End Candle Stick Chart -->
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Bubble Chart</h5>
|
|
|
|
<!-- Bubble Chart -->
|
|
<div id="bubbleChart" style="min-height: 400px;" class="echart"></div>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
const data = [
|
|
[
|
|
[28604, 77, 17096869, 'Australia', 1990],
|
|
[31163, 77.4, 27662440, 'Canada', 1990],
|
|
[1516, 68, 1154605773, 'China', 1990],
|
|
[13670, 74.7, 10582082, 'Cuba', 1990],
|
|
[28599, 75, 4986705, 'Finland', 1990],
|
|
[29476, 77.1, 56943299, 'France', 1990],
|
|
[31476, 75.4, 78958237, 'Germany', 1990],
|
|
[28666, 78.1, 254830, 'Iceland', 1990],
|
|
[1777, 57.7, 870601776, 'India', 1990],
|
|
[29550, 79.1, 122249285, 'Japan', 1990],
|
|
[2076, 67.9, 20194354, 'North Korea', 1990],
|
|
[12087, 72, 42972254, 'South Korea', 1990],
|
|
[24021, 75.4, 3397534, 'New Zealand', 1990],
|
|
[43296, 76.8, 4240375, 'Norway', 1990],
|
|
[10088, 70.8, 38195258, 'Poland', 1990],
|
|
[19349, 69.6, 147568552, 'Russia', 1990],
|
|
[10670, 67.3, 53994605, 'Turkey', 1990],
|
|
[26424, 75.7, 57110117, 'United Kingdom', 1990],
|
|
[37062, 75.4, 252847810, 'United States', 1990]
|
|
],
|
|
[
|
|
[44056, 81.8, 23968973, 'Australia', 2015],
|
|
[43294, 81.7, 35939927, 'Canada', 2015],
|
|
[13334, 76.9, 1376048943, 'China', 2015],
|
|
[21291, 78.5, 11389562, 'Cuba', 2015],
|
|
[38923, 80.8, 5503457, 'Finland', 2015],
|
|
[37599, 81.9, 64395345, 'France', 2015],
|
|
[44053, 81.1, 80688545, 'Germany', 2015],
|
|
[42182, 82.8, 329425, 'Iceland', 2015],
|
|
[5903, 66.8, 1311050527, 'India', 2015],
|
|
[36162, 83.5, 126573481, 'Japan', 2015],
|
|
[1390, 71.4, 25155317, 'North Korea', 2015],
|
|
[34644, 80.7, 50293439, 'South Korea', 2015],
|
|
[34186, 80.6, 4528526, 'New Zealand', 2015],
|
|
[64304, 81.6, 5210967, 'Norway', 2015],
|
|
[24787, 77.3, 38611794, 'Poland', 2015],
|
|
[23038, 73.13, 143456918, 'Russia', 2015],
|
|
[19360, 76.5, 78665830, 'Turkey', 2015],
|
|
[38225, 81.4, 64715810, 'United Kingdom', 2015],
|
|
[53354, 79.1, 321773631, 'United States', 2015]
|
|
]
|
|
];
|
|
echarts.init(document.querySelector("#bubbleChart")).setOption({
|
|
legend: {
|
|
right: '10%',
|
|
top: '3%',
|
|
data: ['1990', '2015']
|
|
},
|
|
grid: {
|
|
left: '8%',
|
|
top: '10%'
|
|
},
|
|
xAxis: {
|
|
splitLine: {
|
|
lineStyle: {
|
|
type: 'dashed'
|
|
}
|
|
}
|
|
},
|
|
yAxis: {
|
|
splitLine: {
|
|
lineStyle: {
|
|
type: 'dashed'
|
|
}
|
|
},
|
|
scale: true
|
|
},
|
|
series: [{
|
|
name: '1990',
|
|
data: data[0],
|
|
type: 'scatter',
|
|
symbolSize: function(data) {
|
|
return Math.sqrt(data[2]) / 5e2;
|
|
},
|
|
emphasis: {
|
|
focus: 'series',
|
|
label: {
|
|
show: true,
|
|
formatter: function(param) {
|
|
return param.data[3];
|
|
},
|
|
position: 'top'
|
|
}
|
|
},
|
|
itemStyle: {
|
|
color: 'rgb(251, 118, 123)'
|
|
}
|
|
},
|
|
{
|
|
name: '2015',
|
|
data: data[1],
|
|
type: 'scatter',
|
|
symbolSize: function(data) {
|
|
return Math.sqrt(data[2]) / 5e2;
|
|
},
|
|
emphasis: {
|
|
focus: 'series',
|
|
label: {
|
|
show: true,
|
|
formatter: function(param) {
|
|
return param.data[3];
|
|
},
|
|
position: 'top'
|
|
}
|
|
},
|
|
itemStyle: {
|
|
color: 'rgb(129, 227, 238)'
|
|
}
|
|
}
|
|
]
|
|
});
|
|
});
|
|
</script>
|
|
<!-- End Bubble Chart -->
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
</main><!-- End #main -->
|
|
|
|
<!-- ======= Footer ======= -->
|
|
<footer id="footer" class="footer">
|
|
<div class="copyright">
|
|
© Copyright <strong><span>NiceAdmin</span></strong>. All Rights Reserved
|
|
</div>
|
|
<div class="credits">
|
|
<!-- All the links in the footer should remain intact. -->
|
|
<!-- You can delete the links only if you purchased the pro version. -->
|
|
<!-- Licensing information: https://bootstrapmade.com/license/ -->
|
|
<!-- Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/nice-admin-bootstrap-admin-html-template/ -->
|
|
Designed by <a href="https://bootstrapmade.com/">BootstrapMade</a>
|
|
</div>
|
|
</footer><!-- End Footer -->
|
|
|
|
<a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>
|
|
|
|
<!-- Vendor JS Files -->
|
|
<script src="assets/vendor/apexcharts/apexcharts.min.js"></script>
|
|
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
|
|
<script src="assets/vendor/chart.js/chart.umd.js"></script>
|
|
<script src="assets/vendor/echarts/echarts.min.js"></script>
|
|
<script src="assets/vendor/quill/quill.min.js"></script>
|
|
<script src="assets/vendor/simple-datatables/simple-datatables.js"></script>
|
|
<script src="assets/vendor/tinymce/tinymce.min.js"></script>
|
|
<script src="assets/vendor/php-email-form/validate.js"></script>
|
|
|
|
<!-- Template Main JS File -->
|
|
<script src="assets/js/main.js"></script>
|
|
|
|
</body>
|
|
|
|
</html> |