<think>我们将使用
ECharts（一个由百度开源的JavaScript图表库）来创建具有科技感的生产报表。由于要求不使用
Vue，我们将使用纯HTML和JavaScript来实现。
步骤：
1. 引入
ECharts的JS文件（这里使用最新版本的
ECharts 5，通过CDN引入）。
2. 创建一个具有科技感
背景的容器（可以使用CSS
设置背景颜色、
渐变或
背景图片）。
3. 使用
ECharts初始化图表，并
设置具有科技感的主题（
ECharts自带一些主题，也可以自定义主题）。
4. 配置图表的选项（option），包括标题、工具提示、图例、坐标轴、系列数据等。为了体现科技感，我们可以选择深色
背景，并使用一些动态效果和光效。
这里我们以
柱状图和折线图为例，展示一个包含多个指标的生产报表。
注意：为了增加科技感，我们可以：
- 使用深色
背景（如黑色、深蓝色）和亮色（如蓝色、绿色）的
渐变。
- 添加数据阴影、光点、动画效果等。
- 使用带有科技感的字体（需要引入字体文件，这里我们使用默认字体，但你可以自行替换）。
我们将创建一个包含两个图表的报表：一个是
柱状图（表示产量），另一个是折线图（表示生产效率）。
由于
ECharts 5支持更丰富的图形效果，我们将使用一些新的特性，比如
渐变色、阴影、动画延迟等。
以下是一个示例代码，包含一个
柱状图和一个折线图，并具有科技感的样式。</think>下面是一个使用
ECharts和HTML创建科技感生产报表的解决方案。这个报表包含动态数据可视化、深色科技主题和交互功能：
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>智能生产监控仪表板</title>
<script src="https://cdn.jsdelivr.net/npm/
echarts@5.4.3/dist/
echarts.min.js"></script>
<style>
:root {
--primary-color: #00f2fe;
--secondary-color: #4facfe;
--accent-color: #00ff9d;
--dark-bg: #0f1c3f;
--card-bg: rgba(16, 33, 82, 0.6);
}
body {
margin: 0;
padding: 0;
background: linear-gradient(135deg, var(--dark-bg) 0%, #0a122a 100%);
color: #e0f7ff;
font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
overflow-x: hidden;
}
.dashboard {
max-width: 1400px;
margin: 0 auto;
padding: 20px;
}
.header {
text-align: center;
padding: 20px 0;
margin-bottom: 30px;
border-bottom: 1px solid rgba(0, 242, 254, 0.3);
position: relative;
}
.header h1 {
font-size: 2.5rem;
margin: 0;
background: linear-gradient(to right, var(--primary-color), var(--accent-color));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 0 20px rgba(0, 242, 254, 0.5);
letter-spacing: 1px;
}
.header p {
color: #a0d7ff;
margin-top: 8px;
font-size: 1.1rem;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
gap: 25px;
margin-bottom: 30px;
}
.card {
background: var(--card-bg);
border-radius: 12px;
padding: 20px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
border: 1px solid rgba(64, 224, 208, 0.1);
position: relative;
overflow: hidden;
transition: transform 0.3s ease;
}
.card:
hover {
transform: translateY(-5px);
box-shadow: 0 12px 40px rgba(0, 242, 254, 0.2);
}
.card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(to right, var(--primary-color), var(--accent-color));
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.card-title {
font-size: 1.4rem;
font-weight: 600;
color: var(--primary-color);
display: flex;
align-items: center;
}
.card-title i {
margin-right: 10px;
font-size: 1.2rem;
}
.chart-container {
width: 100%;
height: 350px;
}
.stats-container {
display: flex;
justify-content: space-around;
margin-top: 25px;
flex-wrap: wrap;
}
.stat-card {
background: rgba(10, 25, 47, 0.7);
border-radius: 10px;
padding: 15px;
text-align: center;
min-width: 120px;
margin: 0 5px 10px;
border: 1px solid rgba(0, 242, 254, 0.1);
}
.stat-value {
font-size: 2rem;
font-weight: bold;
background: linear-gradient(to bottom, #ffffff, var(--primary-color));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin: 5px 0;
}
.stat-label {
color: #a0d7ff;
font-size: 0.9rem;
}
.trend-up {
color: #00ff9d;
}
.trend-down {
color: #ff4d7d;
}
.glow {
position: absolute;
width: 300px;
height: 300px;
border-radius: 50%;
background: radial-gradient(circle, rgba(0, 242, 254, 0.2) 0%, transparent 70%);
filter: blur(30px);
z-index: -1;
}
.glow-1 {
top: 10%;
left: 5%;
}
.glow-2 {
bottom: 10%;
right: 5%;
background: radial-gradient(circle, rgba(0, 255, 157, 0.2) 0%, transparent 70%);
}
.footer {
text-align: center;
padding: 20px;
color: #6a89b3;
font-size: 0.9rem;
border-top: 1px solid rgba(64, 224, 208, 0.1);
margin-top: 20px;
}
@media (max-width: 768px) {
.grid {
grid-template-columns: 1fr;
}
.header h1 {
font-size: 2rem;
}
}
</style>
</head>
<body>
<div class="dashboard">
<div class="glow glow-1"></div>
<div class="glow glow-2"></div>
<div class="header">
<h1>智能生产监控仪表板</h1>
<p>实
时数据监控 • 生产效能分析 • 质量指标追踪</p>
</div>
<div class="grid">
<!-- 产量趋势图 -->
<div class="card">
<div class="card-header">
<h2 class="card-title">生产线产量趋势</h2>
</div>
<div id="productionChart" class="chart-container"></div>
</div>
<!-- 良品率仪表盘 -->
<div class="card">
<div class="card-header">
<h2 class="card-title">产品质量分析</h2>
</div>
<div id="qualityChart" class="chart-container"></div>
</div>
<!-- 设备状态 -->
<div class="card">
<div class="card-header">
<h2 class="card-title">设备运行状态</h2>
</div>
<div id="equipmentChart" class="chart-container"></div>
</div>
<!-- 能耗分析 -->
<div class="card">
<div class="card-header">
<h2 class="card-title">能源消耗分析</h2>
</div>
<div id="energyChart" class="chart-container"></div>
</div>
</div>
<!-- 关键指标卡片 -->
<div class="grid">
<div class="card">
<div class="card-header">
<h2 class="card-title">生产关键指标</h2>
</div>
<div class="stats-container">
<div class="stat-card">
<div class="stat-label">日产量</div>
<div class="stat-value">8,425</div>
<div class="trend-up">↑ 12.5%</div>
</div>
<div class="stat-card">
<div class="stat-label">良品率</div>
<div class="stat-value">98.7%</div>
<div class="trend-up">↑ 1.2%</div>
</div>
<div class="stat-card">
<div class="stat-label">设备利用率</div>
<div class="stat-value">92.4%</div>
<div class="trend-down">↓ 0.8%</div>
</div>
<div class="stat-card">
<div class="stat-label">单位能耗</div>
<div class="stat-value">0.87</div>
<div class="trend-down">↓ 5.3%</div>
</div>
</div>
</div>
</div>
<div class="footer">
<p>数据更新
时间: 2023年11月15日 14:28:45 | 系统版本: V2.3.1</p>
</div>
</div>
<script>
// 初始化所有图表
document.addEventListener('DOMContentLoaded', function() {
// 产量趋势图
const productionChart =
echarts.init(document.getElementById('productionChart'));
productionChart.setOption({
backgroundColor: 'transparent',
tooltip: { trigger: 'axis' },
legend: {
data: ['计划产量', '实际产量', '良品数'],
textStyle: { color: '#a0d7ff' }
},
grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月'],
axisLine: { lineStyle: { color: '#2a4a90' } },
axisLabel: { color: '#8ca0c8' }
},
yAxis: {
type: 'value',
name: '产量 (千件)',
nameTextStyle: { color: '#8ca0c8' },
splitLine: { lineStyle: { color: 'rgba(42, 74, 144, 0.5)' } },
axisLabel: { color: '#8ca0c8' }
},
series: [
{
name: '计划产量',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 8,
lineStyle: { width: 4, color: '#4facfe' },
itemStyle: { color: '#4facfe' },
areaStyle: {
color: new
echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(79, 172, 254, 0.3)' },
{ offset: 1, color: 'rgba(79, 172, 254, 0.05)' }
])
},
data: [8200, 8320, 8010, 9340, 8900, 9300, 10200, 11000, 11500, 11200, 11800]
},
{
name: '实际产量',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 8,
lineStyle: { width: 4, color: '#00f2fe' },
itemStyle: { color: '#00f2fe' },
data: [7850, 8100, 8320, 8900, 8650, 9050, 9800, 10500, 11000, 10800, 11250]
},
{
name: '良品数',
type: 'bar',
barWidth: '40%',
itemStyle: {
color: new
echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#00ff9d' },
{ offset: 1, color: 'rgba(0, 255, 157, 0.3)' }
]),
borderRadius: [6, 6, 0, 0]
},
data: [7650, 7950, 8150, 8700, 8450, 8850, 9600, 10200, 10700, 10500, 11000]
}
]
});
// 产品质量分析
const qualityChart =
echarts.init(document.getElementById('qualityChart'));
qualityChart.setOption({
backgroundColor: 'transparent',
tooltip: { trigger: 'item' },
legend: {
orient: 'vertical',
right: 10,
top: 'center',
textStyle: { color: '#a0d7ff' }
},
series: [
{
name: '良品率',
type: 'pie',
radius: ['40%', '70%'],
center: ['40%', '50%'],
avoidLabelOverlap: false,
itemStyle: { borderRadius: 10 },
label: {
show: true,
position: 'center',
formatter: '{c}%',
fontSize: 28,
fontWeight: 'bold',
color: '#00f2fe'
},
emphasis: {
label: { show: true, fontSize: '32', fontWeight: 'bold' }
},
labelLine: { show: false },
data: [
{ value: 98.7, name: '良品率', itemStyle: { color: '#00ff9d' } },
{ value: 1.3, name: '不良品率', itemStyle: { color: '#ff4d7d' } }
]
}
]
});
// 设备运行状态
const equipmentChart =
echarts.init(document.getElementById('equipmentChart'));
equipmentChart.setOption({
backgroundColor: 'transparent',
tooltip: { trigger: 'axis' },
legend: {
data: ['运行率', '故障率', '待机率'],
textStyle: { color: '#a0d7ff' }
},
radar: {
indicator: [
{ name: '生产线A', max: 100 },
{ name: '生产线B', max: 100 },
{ name: '生产线C', max: 100 },
{ name: '生产线D', max: 100 },
{ name: '生产线E', max: 100 }
],
shape: 'circle',
splitNumber: 5,
axisName: {
color: '#8ca0c8',
backgroundColor: 'rgba(10, 25, 47, 0.7)',
borderRadius: 3,
padding: [3, 5]
},
splitLine: { lineStyle: { color: 'rgba(42, 74, 144, 0.5)' } },
splitArea: { show: false },
axisLine: { lineStyle: { color: 'rgba(42, 74, 144, 0.8)' } }
},
series: [
{
name: '设备状态',
type: 'radar',
symbolSize: 0,
lineStyle: { width: 3 },
areaStyle: {},
data: [
{
value: [92, 89, 94, 87, 91],
name: '运行率',
areaStyle: {
color: new
echarts.graphic.RadialGradient(0.5, 0.5, 1, [
{ offset: 0, color: 'rgba(0, 242, 254, 0.3)' },
{ offset: 1, color: 'rgba(0, 242, 254, 0.1)' }
])
},
lineStyle: { color: '#00f2fe' }
},
{
value: [3, 5, 2, 7, 4],
name: '故障率',
areaStyle: {
color: new
echarts.graphic.RadialGradient(0.5, 0.5, 1, [
{ offset: 0, color: 'rgba(255, 77, 125, 0.3)' },
{ offset: 1, color: 'rgba(255, 77, 125, 0.1)' }
])
},
lineStyle: { color: '#ff4d7d' }
},
{
value: [5, 6, 4, 6, 5],
name: '待机率',
areaStyle: {
color: new
echarts.graphic.RadialGradient(0.5, 0.5, 1, [
{ offset: 0, color: 'rgba(79, 172, 254, 0.3)' },
{ offset: 1, color: 'rgba(79, 172, 254, 0.1)' }
])
},
lineStyle: { color: '#4facfe' }
}
]
}
]
});
// 能源消耗分析
const energyChart =
echarts.init(document.getElementById('energyChart'));
energyChart.setOption({
backgroundColor: 'transparent',
tooltip: { trigger: 'axis' },
grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月'],
axisLine: { lineStyle: { color: '#2a4a90' } },
axisLabel: { color: '#8ca0c8' }
},
yAxis: {
type: 'value',
name: '能耗 (kWh)',
nameTextStyle: { color: '#8ca0c8' },
splitLine: { lineStyle: { color: 'rgba(42, 74, 144, 0.5)' } },
axisLabel: { color: '#8ca0c8' }
},
series: [
{
name: '电力消耗',
type: 'bar',
barWidth: '40%',
itemStyle: {
color: new
echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#4facfe' },
{ offset: 1, color: 'rgba(79, 172, 254, 0.3)' }
]),
borderRadius: [6, 6, 0, 0]
},
data: [12500, 13200, 14100, 15300, 14600, 13800, 16200, 17800, 18200, 17500, 16800]
},
{
name: '单位能耗',
type: 'line',
yAxisIndex: 0,
smooth: true,
symbol: 'circle',
symbolSize: 8,
lineStyle: { width: 4, color: '#00ff9d' },
itemStyle: { color: '#00ff9d' },
data: [1.59, 1.63, 1.70, 1.72, 1.69, 1.52, 1.65, 1.70, 1.65, 1.62, 1.49]
}
]
});
// 响应窗口大小变化
window.addEventListener('resize', function() {
productionChart.resize();
qualityChart.resize();
equipmentChart.resize();
energyChart.resize();
});
});
</script>
</body>
</html>
```
### 设计特点和技术说明
1. **科技感视觉设计**：
- 深色
渐变背景（#0f1c3f → #0a122a）
- 霓虹
渐变标题（#00f2fe → #00ff9d）
- 发光效果（glow元素）
- 半透明卡片（带边框光效）
- 数据卡片悬浮动画
2. **
ECharts 图表组件**：
- **产量趋势图**：组合折线图
+柱状图展示计划/实际产量对比
- **良品率仪表盘**：环形饼图显示良品率百分比
- **设备状态雷达图**：多维度展示各生产线运行状态
- **能源消耗分析**：
柱状图+折线图展示能耗趋势
3. **响应式布局**：
- CSS Grid实现自适应卡片布局
- 媒体查询适配移动设备
- 图表自动重绘（resize事件监听）
4. **动态数据展示**：
- 梯度颜色和阴影增强立体感
-
悬停动画和交互提示
- 关键指标卡片实
时数据显示
5. **性能优化**：
- 直接使用
ECharts CDN
- 轻量级DOM结构
- 硬件加速动画（transform）
### 使用说明
1. 复制完整代码到HTML文件
2. 在浏览器中直接打开即可查看报表
3.
悬停图表可查看详细数据
4. 调整浏览器窗口大小可测试响应式效果
### 自定义建议
- 修改`:root`中的CSS变量调整主色调
- 更新图表数据源（目前为静态数据）
- 添加
ECharts事件处理实现下钻功能
- 集成WebSocket实现实
时数据更新
本文介绍如何仅通过设置tooltip的axisPointer属性，实现ECharts中阴影效果的自定义，提供了一个使用LinearGradient渐变色和宽度设置的实例。
扫一扫
5311
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
