gentelella
Version:
Gentelella v4 — free admin template. 60 pages, 20 chart variants, fully interactive inbox & kanban, live theme generator, component playground, PWA-ready. Vite 8, vanilla JS, no Bootstrap, no jQuery.
162 lines (147 loc) • 9.2 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ECharts | Gentelella 2026 v4</title>
<link rel="icon" href="../images/favicon.svg" type="image/svg+xml">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<script type="module" src="/src/main-v4.js"></script>
</head>
<body data-shell="admin" data-page="echarts" data-breadcrumb="Home > Charts > ECharts">
<main class="main">
<div class="page-wrapper">
<div class="page-header">
<div class="page-header-row">
<div>
<div class="page-pretitle">Visualisations</div>
<h1 class="page-title">ECharts gallery</h1>
</div>
<div class="page-actions">
<a class="btn btn-outline" href="chartjs.html">Chart cards</a>
<a class="btn btn-outline" href="other_charts.html">SVG charts</a>
</div>
</div>
</div>
<!-- Time series row -->
<div class="row col-2">
<div class="card">
<div class="card-header"><div><div class="card-title">Revenue trend</div><div class="card-subtitle">12-month area</div></div></div>
<div class="chart-area" style="height:260px"><div data-chart="revenue-line" style="width:100%;height:100%"></div></div>
</div>
<div class="card">
<div class="card-header"><div><div class="card-title">Plan growth</div><div class="card-subtitle">Stacked area</div></div></div>
<div class="chart-area" style="height:260px"><div data-chart="stacked-area" style="width:100%;height:100%"></div></div>
</div>
</div>
<div class="row col-2">
<div class="card">
<div class="card-header"><div><div class="card-title">Sessions & page views</div><div class="card-subtitle">Multi-series with dashed comparison</div></div></div>
<div class="chart-area" style="height:260px"><div data-chart="dashboard-network" style="width:100%;height:100%"></div></div>
</div>
<div class="card">
<div class="card-header"><div><div class="card-title">Stock OHLC</div><div class="card-subtitle">Candlestick · 14 sessions</div></div></div>
<div class="chart-area" style="height:260px"><div data-chart="candlestick" style="width:100%;height:100%"></div></div>
</div>
</div>
<!-- Categorical row -->
<div class="row col-2">
<div class="card">
<div class="card-header"><div><div class="card-title">Sales by channel</div><div class="card-subtitle">Vertical bar with categorical colors</div></div></div>
<div class="chart-area" style="height:260px"><div data-chart="sales-bar" style="width:100%;height:100%"></div></div>
</div>
<div class="card">
<div class="card-header"><div><div class="card-title">Top countries</div><div class="card-subtitle">Horizontal bar · users by country</div></div></div>
<div class="chart-area" style="height:260px"><div data-chart="horizontal-bar" style="width:100%;height:100%"></div></div>
</div>
</div>
<!-- Mixed + scatter row -->
<div class="row col-2">
<div class="card">
<div class="card-header"><div><div class="card-title">Orders & AOV</div><div class="card-subtitle">Bar with secondary-axis line</div></div></div>
<div class="chart-area" style="height:280px"><div data-chart="mixed-bar-line" style="width:100%;height:100%"></div></div>
</div>
<div class="card">
<div class="card-header"><div><div class="card-title">Engagement vs retention</div><div class="card-subtitle">Bubble plot · size = MAU</div></div></div>
<div class="chart-area" style="height:280px"><div data-chart="scatter" style="width:100%;height:100%"></div></div>
</div>
</div>
<!-- Comparison + funnel row -->
<div class="row col-2">
<div class="card">
<div class="card-header"><div><div class="card-title">v3 vs v4</div><div class="card-subtitle">6-axis radar comparison</div></div></div>
<div class="chart-area" style="height:300px"><div data-chart="radar" style="width:100%;height:100%"></div></div>
</div>
<div class="card">
<div class="card-header"><div><div class="card-title">Conversion funnel</div><div class="card-subtitle">Visitor → Paid stages</div></div></div>
<div class="chart-area" style="height:300px"><div data-chart="funnel" style="width:100%;height:100%"></div></div>
</div>
</div>
<!-- Heatmap + Gauge -->
<div class="row col-3">
<div class="card" style="grid-column: span 2">
<div class="card-header"><div><div class="card-title">Activity heatmap</div><div class="card-subtitle">Events by hour and day-of-week</div></div></div>
<div class="chart-area" style="height:240px"><div data-chart="heatmap" style="width:100%;height:100%"></div></div>
</div>
<div class="card">
<div class="card-header"><div><div class="card-title">Quarterly target</div><div class="card-subtitle">Gauge · 78% of goal</div></div></div>
<div class="chart-area" style="height:240px"><div data-chart="gauge" style="width:100%;height:100%"></div></div>
</div>
</div>
<!-- Donuts + polar -->
<div class="row col-3">
<div class="card">
<div class="card-header"><div><div class="card-title">Traffic sources</div><div class="card-subtitle">Donut with legend</div></div></div>
<div class="card-body">
<div class="donut-block">
<div class="donut-svg" style="width:160px;height:160px">
<div data-chart="traffic-donut" style="width:100%;height:100%"></div>
<div class="donut-center-label"><div class="num">42k</div><div class="sub">visits</div></div>
</div>
<div class="donut-legend">
<div class="donut-legend-item"><span class="dot" style="background:var(--primary)"></span> Organic <span class="pct">40%</span></div>
<div class="donut-legend-item"><span class="dot" style="background:var(--azure)"></span> Direct <span class="pct">20%</span></div>
<div class="donut-legend-item"><span class="dot" style="background:var(--yellow)"></span> Referral <span class="pct">15%</span></div>
<div class="donut-legend-item"><span class="dot" style="background:var(--purple)"></span> Social <span class="pct">12%</span></div>
<div class="donut-legend-item"><span class="dot" style="background:var(--green)"></span> Email <span class="pct">13%</span></div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header"><div><div class="card-title">Devices</div><div class="card-subtitle">Donut</div></div></div>
<div class="card-body">
<div class="donut-block">
<div class="donut-svg" style="width:160px;height:160px">
<div data-chart="device-usage" style="width:100%;height:100%"></div>
<div class="donut-center-label"><div class="num">55%</div><div class="sub">mobile</div></div>
</div>
<div class="donut-legend">
<div class="donut-legend-item"><span class="dot" style="background:var(--primary)"></span> iOS <span class="pct">30%</span></div>
<div class="donut-legend-item"><span class="dot" style="background:var(--azure)"></span> Android <span class="pct">25%</span></div>
<div class="donut-legend-item"><span class="dot" style="background:var(--yellow)"></span> Desktop <span class="pct">20%</span></div>
<div class="donut-legend-item"><span class="dot" style="background:var(--purple)"></span> Tablet <span class="pct">15%</span></div>
<div class="donut-legend-item"><span class="dot" style="background:var(--red)"></span> Other <span class="pct">10%</span></div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header"><div><div class="card-title">Monthly mix</div><div class="card-subtitle">Polar bar</div></div></div>
<div class="chart-area" style="height:240px"><div data-chart="polar-bar" style="width:100%;height:100%"></div></div>
</div>
</div>
<!-- Footer note -->
<div class="row col-1">
<div class="card">
<div class="card-body" style="font-size:12.5px;color:var(--text-secondary);line-height:1.6">
All charts on this page are real <a href="https://echarts.apache.org" target="_blank" rel="noopener">Apache ECharts</a> instances using <code style="font-family:var(--font-mono);font-size:11.5px;background:var(--bg-surface-secondary);padding:1px 5px;border-radius:3px">data-chart="…"</code> attributes. Colors come straight from the v4 design tokens, so changing <code style="font-family:var(--font-mono);font-size:11.5px;background:var(--bg-surface-secondary);padding:1px 5px;border-radius:3px">--primary</code> in <code style="font-family:var(--font-mono);font-size:11.5px;background:var(--bg-surface-secondary);padding:1px 5px;border-radius:3px">_tokens.scss</code> restyles every chart automatically. ECharts is dynamically imported so pages without charts skip the ~360 KB.
</div>
</div>
</div>
</div>
</main>
</body>
</html>