| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Data Analytics Dashboard</title> |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script> |
| | <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/map/js/china.js"></script> |
| | <style> |
| | .chart-container { |
| | width: 100%; |
| | height: 100%; |
| | min-height: 300px; |
| | } |
| | .grid-item { |
| | transition: all 0.3s ease; |
| | } |
| | .grid-item:hover { |
| | transform: translateY(-5px); |
| | box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); |
| | } |
| | .table-container { |
| | max-height: 300px; |
| | overflow-y: auto; |
| | } |
| | .table-container::-webkit-scrollbar { |
| | width: 6px; |
| | } |
| | .table-container::-webkit-scrollbar-track { |
| | background: #f1f1f1; |
| | } |
| | .table-container::-webkit-scrollbar-thumb { |
| | background: #888; |
| | border-radius: 3px; |
| | } |
| | .table-container::-webkit-scrollbar-thumb:hover { |
| | background: #555; |
| | } |
| | </style> |
| | </head> |
| | <body class="bg-gray-50"> |
| | <div class="container mx-auto px-4 py-8"> |
| | <h1 class="text-3xl font-bold text-center text-indigo-700 mb-8">Data Analytics Dashboard</h1> |
| | |
| | <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> |
| | |
| | <div class="space-y-6"> |
| | |
| | <div class="bg-white rounded-xl shadow-md p-4 grid-item"> |
| | <h2 class="text-lg font-semibold text-gray-800 mb-4">Revenue Distribution</h2> |
| | <div class="chart-container" id="pieChart"></div> |
| | </div> |
| | |
| | |
| | <div class="bg-white rounded-xl shadow-md p-4 grid-item"> |
| | <h2 class="text-lg font-semibold text-gray-800 mb-4">Monthly Trends</h2> |
| | <div class="chart-container" id="lineChart"></div> |
| | </div> |
| | |
| | |
| | <div class="bg-white rounded-xl shadow-md p-4 grid-item"> |
| | <h2 class="text-lg font-semibold text-gray-800 mb-4">Category Comparison</h2> |
| | <div class="chart-container" id="barChart"></div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="bg-white rounded-xl shadow-md p-4 grid-item"> |
| | <h2 class="text-lg font-semibold text-gray-800 mb-4">Regional Performance</h2> |
| | <div class="chart-container" id="chinaMap"></div> |
| | </div> |
| | |
| | |
| | <div class="space-y-6"> |
| | |
| | <div class="bg-white rounded-xl shadow-md p-4 grid-item"> |
| | <h2 class="text-lg font-semibold text-gray-800 mb-4">Top Performers</h2> |
| | <div class="table-container"> |
| | <table class="min-w-full divide-y divide-gray-200"> |
| | <thead class="bg-gray-50"> |
| | <tr> |
| | <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Rank</th> |
| | <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Region</th> |
| | <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Revenue</th> |
| | <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Growth</th> |
| | </tr> |
| | </thead> |
| | <tbody class="bg-white divide-y divide-gray-200"> |
| | <tr> |
| | <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">1</td> |
| | <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Guangdong</td> |
| | <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">¥12.4M</td> |
| | <td class="px-6 py-4 whitespace-nowrap text-sm text-green-500">+24%</td> |
| | </tr> |
| | <tr> |
| | <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">2</td> |
| | <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Jiangsu</td> |
| | <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">¥9.8M</td> |
| | <td class="px-6 py-4 whitespace-nowrap text-sm text-green-500">+18%</td> |
| | </tr> |
| | <tr> |
| | <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">3</td> |
| | <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Zhejiang</td> |
| | <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">¥8.2M</td> |
| | <td class="px-6 py-4 whitespace-nowrap text-sm text-green-500">+15%</td> |
| | </tr> |
| | <tr> |
| | <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">4</td> |
| | <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Shandong</td> |
| | <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">¥7.5M</td> |
| | <td class="px-6 py-4 whitespace-nowrap text-sm text-green-500">+12%</td> |
| | </tr> |
| | <tr> |
| | <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">5</td> |
| | <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Henan</td> |
| | <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">¥6.3M</td> |
| | <td class="px-6 py-4 whitespace-nowrap text-sm text-green-500">+9%</td> |
| | </tr> |
| | <tr> |
| | <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">6</td> |
| | <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Sichuan</td> |
| | <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">¥5.8M</td> |
| | <td class="px-6 py-4 whitespace-nowrap text-sm text-green-500">+8%</td> |
| | </tr> |
| | </tbody> |
| | </table> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="bg-white rounded-xl shadow-md p-4 grid-item"> |
| | <h2 class="text-lg font-semibold text-gray-800 mb-4">Relationship Network</h2> |
| | <div class="chart-container" id="graphChart"></div> |
| | </div> |
| | |
| | |
| | <div class="bg-white rounded-xl shadow-md p-4 grid-item"> |
| | <h2 class="text-lg font-semibold text-gray-800 mb-4">Performance Metrics</h2> |
| | <div class="chart-container" id="radarChart"></div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | <script> |
| | |
| | document.addEventListener('DOMContentLoaded', function() { |
| | |
| | const pieChart = echarts.init(document.getElementById('pieChart')); |
| | pieChart.setOption({ |
| | tooltip: { |
| | trigger: 'item' |
| | }, |
| | legend: { |
| | top: '5%', |
| | left: 'center' |
| | }, |
| | series: [ |
| | { |
| | name: 'Revenue Distribution', |
| | type: 'pie', |
| | radius: ['40%', '70%'], |
| | avoidLabelOverlap: false, |
| | itemStyle: { |
| | borderRadius: 10, |
| | borderColor: '#fff', |
| | borderWidth: 2 |
| | }, |
| | label: { |
| | show: false, |
| | position: 'center' |
| | }, |
| | emphasis: { |
| | label: { |
| | show: true, |
| | fontSize: '18', |
| | fontWeight: 'bold' |
| | } |
| | }, |
| | labelLine: { |
| | show: false |
| | }, |
| | data: [ |
| | { value: 1048, name: 'Product A' }, |
| | { value: 735, name: 'Product B' }, |
| | { value: 580, name: 'Product C' }, |
| | { value: 484, name: 'Product D' }, |
| | { value: 300, name: 'Product E' } |
| | ], |
| | color: ['#6366F1', '#8B5CF6', '#EC4899', '#F59E0B', '#10B981'] |
| | } |
| | ] |
| | }); |
| | |
| | |
| | const lineChart = echarts.init(document.getElementById('lineChart')); |
| | lineChart.setOption({ |
| | tooltip: { |
| | trigger: 'axis', |
| | axisPointer: { |
| | type: 'shadow' |
| | } |
| | }, |
| | grid: { |
| | left: '3%', |
| | right: '4%', |
| | bottom: '3%', |
| | containLabel: true |
| | }, |
| | xAxis: { |
| | type: 'category', |
| | data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], |
| | axisLine: { |
| | lineStyle: { |
| | color: '#9CA3AF' |
| | } |
| | }, |
| | axisLabel: { |
| | color: '#6B7280' |
| | } |
| | }, |
| | yAxis: { |
| | type: 'value', |
| | axisLine: { |
| | lineStyle: { |
| | color: '#9CA3AF' |
| | } |
| | }, |
| | axisLabel: { |
| | color: '#6B7280' |
| | }, |
| | splitLine: { |
| | lineStyle: { |
| | color: '#E5E7EB' |
| | } |
| | } |
| | }, |
| | series: [ |
| | { |
| | name: 'Revenue', |
| | type: 'line', |
| | smooth: true, |
| | data: [120, 200, 150, 80, 70, 110, 130, 180, 220, 250, 280, 310], |
| | itemStyle: { |
| | color: '#6366F1' |
| | }, |
| | areaStyle: { |
| | color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
| | { |
| | offset: 0, |
| | color: 'rgba(99, 102, 241, 0.5)' |
| | }, |
| | { |
| | offset: 1, |
| | color: 'rgba(99, 102, 241, 0.1)' |
| | } |
| | ]) |
| | } |
| | } |
| | ] |
| | }); |
| | |
| | |
| | const barChart = echarts.init(document.getElementById('barChart')); |
| | barChart.setOption({ |
| | tooltip: { |
| | trigger: 'axis', |
| | axisPointer: { |
| | type: 'shadow' |
| | } |
| | }, |
| | grid: { |
| | left: '3%', |
| | right: '4%', |
| | bottom: '3%', |
| | containLabel: true |
| | }, |
| | xAxis: { |
| | type: 'value', |
| | axisLine: { |
| | lineStyle: { |
| | color: '#9CA3AF' |
| | } |
| | }, |
| | axisLabel: { |
| | color: '#6B7280' |
| | }, |
| | splitLine: { |
| | lineStyle: { |
| | color: '#E5E7EB' |
| | } |
| | } |
| | }, |
| | yAxis: { |
| | type: 'category', |
| | data: ['Electronics', 'Clothing', 'Food', 'Furniture', 'Books'], |
| | axisLine: { |
| | lineStyle: { |
| | color: '#9CA3AF' |
| | } |
| | }, |
| | axisLabel: { |
| | color: '#6B7280' |
| | } |
| | }, |
| | series: [ |
| | { |
| | name: 'Sales', |
| | type: 'bar', |
| | data: [120, 200, 150, 80, 70], |
| | itemStyle: { |
| | color: function(params) { |
| | const colorList = ['#6366F1', '#8B5CF6', '#EC4899', '#F59E0B', '#10B981']; |
| | return colorList[params.dataIndex]; |
| | }, |
| | borderRadius: [0, 4, 4, 0] |
| | } |
| | } |
| | ] |
| | }); |
| | |
| | |
| | const chinaMap = echarts.init(document.getElementById('chinaMap')); |
| | chinaMap.setOption({ |
| | tooltip: { |
| | trigger: 'item', |
| | formatter: '{b}<br/>Revenue: {c} (¥10K)' |
| | }, |
| | visualMap: { |
| | min: 0, |
| | max: 1200, |
| | text: ['High', 'Low'], |
| | realtime: false, |
| | calculable: true, |
| | inRange: { |
| | color: ['#E0F7FA', '#4DD0E1', '#0097A7', '#006064'] |
| | }, |
| | textStyle: { |
| | color: '#6B7280' |
| | } |
| | }, |
| | series: [ |
| | { |
| | name: 'Revenue', |
| | type: 'map', |
| | map: 'china', |
| | emphasis: { |
| | label: { |
| | show: true |
| | } |
| | }, |
| | data: [ |
| | {name: '北京', value: 1200}, |
| | {name: '天津', value: 800}, |
| | {name: '上海', value: 1100}, |
| | {name: '重庆', value: 600}, |
| | {name: '河北', value: 400}, |
| | {name: '河南', value: 630}, |
| | {name: '云南', value: 350}, |
| | {name: '辽宁', value: 500}, |
| | {name: '黑龙江', value: 380}, |
| | {name: '湖南', value: 450}, |
| | {name: '安徽', value: 420}, |
| | {name: '山东', value: 750}, |
| | {name: '新疆', value: 280}, |
| | {name: '江苏', value: 980}, |
| | {name: '浙江', value: 820}, |
| | {name: '江西', value: 390}, |
| | {name: '湖北', value: 470}, |
| | {name: '广西', value: 360}, |
| | {name: '甘肃', value: 310}, |
| | {name: '山西', value: 380}, |
| | {name: '内蒙古', value: 290}, |
| | {name: '陕西', value: 420}, |
| | {name: '吉林', value: 350}, |
| | {name: '福建', value: 520}, |
| | {name: '贵州', value: 320}, |
| | {name: '广东', value: 1240}, |
| | {name: '青海', value: 180}, |
| | {name: '西藏', value: 150}, |
| | {name: '四川', value: 580}, |
| | {name: '宁夏', value: 220}, |
| | {name: '海南', value: 260} |
| | ] |
| | } |
| | ] |
| | }); |
| | |
| | |
| | const graphChart = echarts.init(document.getElementById('graphChart')); |
| | graphChart.setOption({ |
| | tooltip: {}, |
| | legend: { |
| | data: ['Category 1', 'Category 2', 'Category 3'], |
| | textStyle: { |
| | color: '#6B7280' |
| | } |
| | }, |
| | series: [ |
| | { |
| | name: 'Relationships', |
| | type: 'graph', |
| | layout: 'force', |
| | data: [ |
| | { |
| | name: 'Node 1', |
| | category: 0, |
| | symbolSize: 50 |
| | }, |
| | { |
| | name: 'Node 2', |
| | category: 0, |
| | symbolSize: 30 |
| | }, |
| | { |
| | name: 'Node 3', |
| | category: 1, |
| | symbolSize: 40 |
| | }, |
| | { |
| | name: 'Node 4', |
| | category: 1, |
| | symbolSize: 35 |
| | }, |
| | { |
| | name: 'Node 5', |
| | category: 2, |
| | symbolSize: 45 |
| | }, |
| | { |
| | name: 'Node 6', |
| | category: 2, |
| | symbolSize: 25 |
| | } |
| | ], |
| | links: [ |
| | { |
| | source: 'Node 1', |
| | target: 'Node 2' |
| | }, |
| | { |
| | source: 'Node 1', |
| | target: 'Node 3' |
| | }, |
| | { |
| | source: 'Node 2', |
| | target: 'Node 4' |
| | }, |
| | { |
| | source: 'Node 3', |
| | target: 'Node 5' |
| | }, |
| | { |
| | source: 'Node 4', |
| | target: 'Node 6' |
| | }, |
| | { |
| | source: 'Node 5', |
| | target: 'Node 6' |
| | } |
| | ], |
| | categories: [ |
| | { |
| | name: 'Category 1' |
| | }, |
| | { |
| | name: 'Category 2' |
| | }, |
| | { |
| | name: 'Category 3' |
| | } |
| | ], |
| | roam: true, |
| | label: { |
| | show: true, |
| | position: 'right' |
| | }, |
| | force: { |
| | repulsion: 100 |
| | }, |
| | emphasis: { |
| | focus: 'adjacency', |
| | label: { |
| | show: true |
| | } |
| | }, |
| | lineStyle: { |
| | color: 'source', |
| | curveness: 0.3 |
| | }, |
| | itemStyle: { |
| | color: function(params) { |
| | const colorList = ['#6366F1', '#8B5CF6', '#EC4899']; |
| | return colorList[params.data.category]; |
| | } |
| | } |
| | } |
| | ] |
| | }); |
| | |
| | |
| | const radarChart = echarts.init(document.getElementById('radarChart')); |
| | radarChart.setOption({ |
| | tooltip: {}, |
| | legend: { |
| | data: ['Current', 'Target'], |
| | textStyle: { |
| | color: '#6B7280' |
| | } |
| | }, |
| | radar: { |
| | indicator: [ |
| | { name: 'Sales', max: 100 }, |
| | { name: 'Marketing', max: 100 }, |
| | { name: 'Technology', max: 100 }, |
| | { name: 'Customer', max: 100 }, |
| | { name: 'Development', max: 100 }, |
| | { name: 'Support', max: 100 } |
| | ], |
| | splitArea: { |
| | show: false |
| | }, |
| | axisLine: { |
| | lineStyle: { |
| | color: '#E5E7EB' |
| | } |
| | }, |
| | splitLine: { |
| | lineStyle: { |
| | color: '#E5E7EB' |
| | } |
| | }, |
| | name: { |
| | textStyle: { |
| | color: '#6B7280' |
| | } |
| | } |
| | }, |
| | series: [ |
| | { |
| | name: 'Performance', |
| | type: 'radar', |
| | data: [ |
| | { |
| | value: [80, 75, 85, 90, 70, 60], |
| | name: 'Current', |
| | areaStyle: { |
| | color: 'rgba(99, 102, 241, 0.4)' |
| | }, |
| | lineStyle: { |
| | color: '#6366F1' |
| | }, |
| | itemStyle: { |
| | color: '#6366F1' |
| | } |
| | }, |
| | { |
| | value: [90, 85, 95, 95, 85, 75], |
| | name: 'Target', |
| | areaStyle: { |
| | color: 'rgba(236, 72, 153, 0.4)' |
| | }, |
| | lineStyle: { |
| | color: '#EC4899' |
| | }, |
| | itemStyle: { |
| | color: '#EC4899' |
| | } |
| | } |
| | ] |
| | } |
| | ] |
| | }); |
| | |
| | |
| | window.addEventListener('resize', function() { |
| | pieChart.resize(); |
| | lineChart.resize(); |
| | barChart.resize(); |
| | chinaMap.resize(); |
| | graphChart.resize(); |
| | radarChart.resize(); |
| | }); |
| | }); |
| | </script> |
| | <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=xinghen/ttt" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| | </html> |
