|
|
@@ -40,60 +40,104 @@
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
- // 通用配置生成逻辑
|
|
|
- const commonOption = (title, unit, threshold) => ({
|
|
|
- animation: false, // 禁用动画确保截图完整
|
|
|
- tooltip: { trigger: 'axis' },
|
|
|
- legend: { bottom: 0, type: 'scroll', itemWidth: 10, textStyle: { fontSize: 10 } },
|
|
|
- grid: { top: 40, left: '3%', right: '4%', bottom: '15%', containLabel: true },
|
|
|
+ // 基础配置保持不变...
|
|
|
+ const commonOption = (title, unit) => ({
|
|
|
+ animation: false,
|
|
|
+ tooltip: { trigger: 'axis', confine: true },
|
|
|
+ legend: { bottom: 0, type: 'scroll', itemWidth: 10 },
|
|
|
+ grid: { top: 40, left: '5%', right: '5%', bottom: '15%', containLabel: true },
|
|
|
xAxis: { type: 'category', boundaryGap: false, data: [${report.timeLabels}] },
|
|
|
yAxis: { type: 'value', axisLabel: { formatter: '{value}' + unit } }
|
|
|
});
|
|
|
|
|
|
- // 1. CPU Chart
|
|
|
+ // 辅助函数:生成水位线配置
|
|
|
+ const getWatermarkLines = (warn, crit) => ({
|
|
|
+ symbol: ['none', 'none'], // 不显示箭头
|
|
|
+ silent: true, // 鼠标悬停不触发事件
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ yAxis: warn,
|
|
|
+ name: '70% Warning',
|
|
|
+ lineStyle: { color: '#fa8c16', type: 'dashed', width: 1, opacity: 0.6 },
|
|
|
+ label: { position: 'end', formatter: warn + '%', fontSize: 10, color: '#fa8c16' }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ yAxis: crit,
|
|
|
+ name: '80% Critical',
|
|
|
+ lineStyle: { color: '#ff4d4f', type: 'dashed', width: 1.5, opacity: 0.8 },
|
|
|
+ label: { position: 'end', formatter: crit + '%', fontSize: 10, color: '#ff4d4f' }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ });
|
|
|
+
|
|
|
+ // --- CPU Chart ---
|
|
|
const cpuChart = echarts.init(document.getElementById('cpuChart'));
|
|
|
cpuChart.setOption({
|
|
|
- ...commonOption('CPU', '%'),
|
|
|
+ ...commonOption('CPU Usage', '%'),
|
|
|
series: [
|
|
|
<#list report.cpuSeries?keys as ip>
|
|
|
- { name: '${ip}', type: 'line', smooth: true, symbol: 'none', data: [${report.cpuSeries[ip]?join(",")}] }<#if ip_has_next>,</#if>
|
|
|
+ {
|
|
|
+ name: '${ip}',
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ symbol: 'none',
|
|
|
+ lineStyle: { width: 1.2 },
|
|
|
+ data: [${report.cpuSeries[ip]?join(",")}],
|
|
|
+ <#if ip_index == 0> // 仅在第一条曲线上绘制水位线,避免重复绘制渲染开销
|
|
|
+ markLine: getWatermarkLines(70, 80)
|
|
|
+ </#if>
|
|
|
+ }<#if ip_has_next>,</#if>
|
|
|
</#list>
|
|
|
- ],
|
|
|
- visualMap: { show: false, pieces: [{ gt: 0, lte: 80, color: '#1890ff' }, { gt: 80, color: '#ff4d4f' }] }
|
|
|
+ ]
|
|
|
});
|
|
|
|
|
|
- // 2. Memory Chart
|
|
|
+ // --- Memory Chart ---
|
|
|
const memChart = echarts.init(document.getElementById('memChart'));
|
|
|
memChart.setOption({
|
|
|
- ...commonOption('Memory', '%'),
|
|
|
+ ...commonOption('Memory Usage', '%'),
|
|
|
series: [
|
|
|
<#list report.memSeries?keys as ip>
|
|
|
- { name: '${ip}', type: 'line', smooth: true, symbol: 'none', data: [${report.memSeries[ip]?join(",")}] }<#if ip_has_next>,</#if>
|
|
|
+ {
|
|
|
+ name: '${ip}',
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ symbol: 'none',
|
|
|
+ data: [${report.memSeries[ip]?join(",")}],
|
|
|
+ <#if ip_index == 0>
|
|
|
+ markLine: getWatermarkLines(70, 85) // 内存可以稍微高一点,设为 70/85
|
|
|
+ </#if>
|
|
|
+ }<#if ip_has_next>,</#if>
|
|
|
</#list>
|
|
|
]
|
|
|
});
|
|
|
|
|
|
- // 3. Disk Chart (包含 90% 警戒线)
|
|
|
+ // --- Disk Chart ---
|
|
|
const diskChart = echarts.init(document.getElementById('diskChart'));
|
|
|
diskChart.setOption({
|
|
|
- ...commonOption('Disk', '%'),
|
|
|
+ ...commonOption('Disk I/O', '%'),
|
|
|
series: [
|
|
|
<#list report.diskSeries?keys as ip>
|
|
|
{
|
|
|
- name: '${ip}', type: 'line', smooth: true, symbol: 'none', data: [${report.diskSeries[ip]?join(",")}],
|
|
|
- markLine: { symbol: 'none', data: [{ yAxis: 90, lineStyle: { color: 'red', type: 'dashed' } }] }
|
|
|
+ name: '${ip}',
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ symbol: 'none',
|
|
|
+ data: [${report.diskSeries[ip]?join(",")}],
|
|
|
+ <#if ip_index == 0>
|
|
|
+ markLine: getWatermarkLines(80, 90) // 磁盘水位线通常设为 80/90
|
|
|
+ </#if>
|
|
|
}<#if ip_has_next>,</#if>
|
|
|
</#list>
|
|
|
]
|
|
|
});
|
|
|
|
|
|
- // 4. Network Chart
|
|
|
+ // --- Network Chart (通常不设水位线,除非有固定带宽限制) ---
|
|
|
const netChart = echarts.init(document.getElementById('netChart'));
|
|
|
netChart.setOption({
|
|
|
...commonOption('Network', 'MB/s'),
|
|
|
series: [
|
|
|
<#list report.netSeries?keys as ip>
|
|
|
- { name: '${ip}', type: 'line', smooth: true, symbol: 'none', data: [${report.netSeries[ip]?join(",")}] }<#if ip_has_next>,</#if>
|
|
|
+ { name: '${ip}', type: 'line', smooth: true, symbol: 'none', data: [${report.netSeries[ip]?join(", ")}] }<#if ip_has_next>,</#if>
|
|
|
</#list>
|
|
|
]
|
|
|
});
|