完整可直接运行代码，全屏自适应、窗口缩放自动重绘、深色大屏风格，一次性包含5类常用图表，开箱即用，适合后台报表、数据大屏集成。
整体布局
- 顶部：标题栏
- 左上：柱状图
- 右上：折线图
- 左下：饼图
- 右下：中国地图
- 底部中间：仪表盘
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>ECharts 多图表组合大屏</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100vh;
background: #0a101f;
overflow: hidden;
}
.container {
width: 100vw;
height: 100vh;
padding: 1vw;
}
.title {
height: 6vh;
line-height: 6vh;
text-align: center;
font-size: 1.8vw;
color: #fff;
letter-spacing: 4px;
margin-bottom: 1vh;
}
.wrap {
width: 100%;
height: 92vh;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 42% 42% 16%;
gap: 1vw;
}
.chart-item {
width: 100%;
height: 100%;
background: rgba(30, 60, 114, 0.2);
border: 1px solid rgba(64, 158, 255, 0.3);
border-radius: 6px;
}
/* 仪表盘独占一行 */
.gauge-box {
grid-column: 1 / 3;
}
</style>
</head>
<body>
<div class="container">
<div class="title">ECharts 综合数据可视化大屏</div>
<div class="wrap">
<!-- 柱状图 -->
<div class="chart-item" id="barChart"></div>
<!-- 折线图 -->
<div class="chart-item" id="lineChart"></div>
<!-- 饼图 -->
<div class="chart-item" id="pieChart"></div>
<!-- 中国地图 -->
<div class="chart-item" id="mapChart"></div>
<!-- 仪表盘 -->
<div class="chart-item gauge-box" id="gaugeChart"></div>
</div>
</div>
<!-- 引入ECharts + 中国地图JSON -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
<script>
// 1. 初始化所有图表实例
const barChart = echarts.init(document.getElementById('barChart'));
const lineChart = echarts.init(document.getElementById('lineChart'));
const pieChart = echarts.init(document.getElementById('pieChart'));
const mapChart = echarts.init(document.getElementById('mapChart'));
const gaugeChart = echarts.init(document.getElementById('gaugeChart'));
// ========== 1、柱状图配置 ==========
const barOption = {
title: { text: '各部门业绩', left: 'center', textStyle: { color: '#fff' } },
tooltip: { trigger: 'axis' },
grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
xAxis: {
type: 'category',
data: ['销售部','技术部','财务部','人事部','运营部'],
axisLine: { lineStyle: { color: '#409eff' } },
axisLabel: { color: '#ccc' }
},
yAxis: {
type: 'value',
axisLine: { lineStyle: { color: '#409eff' } },
splitLine: { lineStyle: { color: 'rgba(64,158,255,0.2)' } },
axisLabel: { color: '#ccc' }
},
series: [{
name: '业绩',
type: 'bar',
data: [120, 200, 150, 80, 170],
itemStyle: { color: '#36cbcb' },
barWidth: '40%'
}]
};
// ========== 2、折线图配置 ==========
const lineOption = {
title: { text: '月度趋势变化', left: 'center', textStyle: { color: '#fff' } },
tooltip: { trigger: 'axis' },
grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
xAxis: {
type: 'category',
boundaryGap: false,
data: ['1月','2月','3月','4月','5月','6月'],
axisLine: { lineStyle: { color: '#409eff' } },
axisLabel: { color: '#ccc' }
},
yAxis: {
type: 'value',
axisLine: { lineStyle: { color: '#409eff' } },
splitLine: { lineStyle: { color: 'rgba(64,158,255,0.2)' } },
axisLabel: { color: '#ccc' }
},
series: [{
name: '营收',
type: 'line',
smooth: true,
data: [820, 932, 901, 934, 1290, 1330],
itemStyle: { color: '#f59c29' },
areaStyle: { color: 'rgba(245,156,41,0.2)' }
}]
};
// ========== 3、饼图配置 ==========
const pieOption = {
title: { text: '业务占比分布', left: 'center', textStyle: { color: '#fff' } },
tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
legend: { bottom: '5%', textStyle: { color: '#ccc' } },
series: [{
name: '业务',
type: 'pie',
radius: ['30%', '65%'],
center: ['50%', '45%'],
data: [
{ value: 1048, name: '软件服务' },
{ value: 735, name: '硬件销售' },
{ value: 580, name: '技术外包' },
{ value: 484, name: '运维服务' },
{ value: 300, name: '其他' }
],
itemStyle: {
color: ['#409eff','#67c23a','#e6a23c','#f56c6c','#9c88ff']
}
}]
};
// ========== 4、中国地图配置 ==========
const mapOption = {
title: { text: '全国区域数据', left: 'center', textStyle: { color: '#fff' } },
tooltip: { trigger: 'item' },
visualMap: {
min: 0,
max: 1500,
left: 'left',
bottom: '5%',
textStyle: { color: '#fff' },
inRange: { color: ['#0e3b75','#1976d2','#409eff'] }
},
series: [{
name: '区域数值',
type: 'map',
map: 'china',
roam: true,
label: { show: false },
data: [
{ name: '北京', value: 1350 },
{ name: '上海', value: 1280 },
{ name: '广东', value: 1100 },
{ name: '江苏', value: 980 },
{ name: '山东', value: 860 },
{ name: '河北', value: 720 }
]
}]
};
// ========== 5、仪表盘配置 ==========
const gaugeOption = {
title: { text: '系统负载监控', left: 'center', textStyle: { color: '#fff' } },
tooltip: { formatter: '{b}: {c}%' },
series: [{
name: '负载',
type: 'gauge',
radius: '75%',
progress: { show: true, width: 20 },
detail: { valueAnimation: true, formatter: '{value}%', fontSize:20, color:'#fff' },
data: [{ value: 68, name: '服务器负载' }],
axisLine: {
lineStyle: {
width: 20,
color: [
[0.3, '#67c23a'],
[0.7, '#e6a23c'],
[1, '#f56c6c']
]
}
}
}]
};
// 逐个渲染图表
barChart.setOption(barOption);
lineChart.setOption(lineOption);
pieChart.setOption(pieOption);
mapChart.setOption(mapOption);
gaugeChart.setOption(gaugeOption);
// 全局自适应：窗口缩放自动重绘所有图表
window.addEventListener('resize', () => {
barChart.resize();
lineChart.resize();
pieChart.resize();
mapChart.resize();
gaugeChart.resize();
})
</script>
</body>
</html>
核心特性说明
-
五大图表全覆盖
- 柱状图：分类对比
- 折线图：趋势分析+面积填充
- 环形饼图：占比统计
- 中国地图：地理区域数据+缩放漫游
- 仪表盘：进度/负载指标监控
-
自适应核心
- Grid 弹性网格布局，自动分配容器
- 统一监听
resize，所有图表自动缩放 - 深色大屏主题，蓝绿科技风，适配项目常用UI
-
可直接改造点
- 替换
data即可对接后端接口、JSON数据 - 修改
itemStyle颜色，切换主题配色 - 开启地图
label.show显示省份文字 - 仪表盘修改阈值颜色，适配告警场景
- 替换
扩展对接后端（极简示例）
如需异步接口渲染数据，以柱状图为例：
// 模拟fetch请求
fetch('/api/getBarData')
.then(res=>res.json())
.then(res=>{
barOption.series[0].data = res.list;
barChart.setOption(barOption);
})
