效果图：
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数据大屏展示</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #041633;
color: #fff;
font-family: Arial, sans-serif;
}
.dashboard {
padding: 20px;
}
.header {
text-align: center;
padding: 20px 0;
}
.header h1 {
color: #00ffff;
font-size: 36px;
}
.data-overview {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
.data-card {
background: rgba(0,255,255,0.1);
padding: 20px;
border-radius: 10px;
width: 23%;
text-align: center;
}
.data-card h3 {
font-size: 14px;
margin-bottom: 10px;
}
.data-card .number {
font-size: 24px;
color: #00ffff;
}
.charts-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.chart-box {
background: rgba(0,255,255,0.1);
padding: 20px;
border-radius: 10px;
width: calc(50% - 10px);
min-height: 400px;
}
.chart {
width: 100%;
height: 350px;
}
.image-box {
margin-top: 20px;
text-align: center;
}
.image-box img {
max-width: 100%;
border-radius: 10px;
}
</style>
</head>
<body>
<div id="app" class="dashboard">
<div class="header">
<h1>企业运营数据大屏</h1>
</div>
<div class="data-overview">
<div class="data-card" v-for="item in overviewData" :key="item.title">
<h3>{{item.title}}</h3>
<div class="number">{{item.value}}</div>
</div>
</div>
<div class="charts-container">
<div class="chart-box">
<h3>月度销售趋势</h3>
<div ref="salesChart" class="chart"></div>
</div>
<div class="chart-box">
<h3>产品类别分布</h3>
<div ref="categoryChart" class="chart"></div>
</div>
<div class="chart-box">
<h3>地区分布</h3>
<div ref="regionChart" class="chart"></div>
</div>
<div class="chart-box">
<h3>实时监控</h3>
<div class="image-box">
<img src="https://via.placeholder.com/200x150?text=实时监控" alt="实时监控">
</div>
</div>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
overviewData: [
{ title: '今日销售额', value: '￥1,234,567' },
{ title: '订单总量', value: '8,846' },
{ title: '用户总数', value: '12,345' },
{ title: '同比增长', value: '23.5%' }
],
charts: {}
},
mounted() {
this.initCharts();
// 模拟实时数据更新
setInterval(this.updateData, 5000);
},
methods: {
initCharts() {
// 销售趋势图
this.charts.sales = echarts.init(this.$refs.salesChart);
this.charts.sales.setOption({
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月'],
axisLine: {
lineStyle: {
color: '#fff'
}
}
},
yAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: '#fff'
}
}
},
series: [{
data: [150, 230, 224, 218, 135, 147],
type: 'line',
smooth: true,
itemStyle: {
color: '#00ffff'
}
}]
});
// 产品类别分布图
this.charts.category = echarts.init(this.$refs.categoryChart);
this.charts.category.setOption({
tooltip: {
trigger: 'item'
},
series: [{
type: 'pie',
radius: '60%',
data: [
{ value: 335, name: '电子产品' },
{ value: 310, name: '服装' },
{ value: 234, name: '食品' },
{ value: 135, name: '家具' },
{ value: 1548, name: '其他' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
});
// 地区分布图
this.charts.region = echarts.init(this.$refs.regionChart);
this.charts.region.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
xAxis: {
type: 'category',
data: ['华东', '华南', '华北', '西南', '东北'],
axisLine: {
lineStyle: {
color: '#fff'
}
}
},
yAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: '#fff'
}
}
},
series: [{
data: [320, 302, 301, 334, 390],
type: 'bar',
itemStyle: {
color: '#00ffff'
}
}]
});
},
updateData() {
// 模拟数据更新
const randomData = Array(6).fill(0).map(() =>
Math.floor(Math.random() * 100 + 100)
);
this.charts.sales.setOption({
series: [{
data: randomData
}]
});
}
}
})
</script>
</body>
</html>