Skip to content

N
nse-ui
Commit c6aabfe9 by 周海峰
Options

Merge branch 'master' of https://code.palacesun.com/wuchao/nse-ui

parents f4f5f2e0 a3381a28
正在显示 包含 0 行增加 和 299 行删除
src/views/indexManage/ItemManage/modules/DiskUsageChart.vue deleted 100644 → 0
<template>
<div class="disk-chart" ref="chartRef"></div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
import * as echarts from 'echarts'
const colorPalette = [
'#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF',
'#FF9F40', '#8AC24A', '#F06292', '#7986CB', '#E57373',
'#BA68C8', '#64B5F6', '#4DB6AC', '#81C784', '#FFD54F',
'#FF8A65', '#A1887F', '#90A4AE', '#9575CD', '#4DD0E1'
]
const props = defineProps({
diskData: {
type: Array,
default: () => [
{ name: '/run/user/0', total: 100, used: 10 },
{ name: '/boot/efi', total: 100, used: 20 },
{ name: '/boot', total: 100, used: 30 },
{ name: '/run/lock', total: 100, used: 5 },
{ name: '/dev/shm', total: 100, used: 15 },
{ name: '/', total: 100, used: 90 },
{ name: '/run', total: 100, used: 25 }
]
}
})
const getDiskColor = (index) => {
return colorPalette[index % colorPalette.length]
}
const chartRef = ref(null)
let chartInstance = null
const initChart = () => {
if (!chartRef.value) return
chartInstance = echarts.init(chartRef.value)
const option = {
title: {
text: '磁盘空间',
left: 'center',
textStyle: {
color: '#333',
fontSize: 16,
fontWeight: 'bold'
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: function(params) {
return `${params[0].name}<br/>
已使用: ${params[0].value}G<br/>
总容量: ${params[1].value}G`
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01],
axisLabel: {
formatter: '{value}G'
},
max: 100,
splitLine: {
show: true,
lineStyle: {
color: '#eee'
}
}
},
yAxis: {
type: 'category',
data: props.diskData.map(item => item.name),
axisLine: {
show: true,
lineStyle: {
color: '#999'
}
},
axisTick: {
show: false
}
},
series: [
{
name: '总容量',
type: 'bar',
data: props.diskData.map(item => item.total),
itemStyle: {
color: '#f5f5f5', // 浅灰色表示总容量
borderWidth: 1,
borderColor: '#d9d9d9'
},
barGap: '-100%', // 让总容量条在已使用条后面
silent: true, // 不响应鼠标事件
label: {
show: false
},
barWidth: '60%'
},
{
name: '已使用',
type: 'bar',
data: props.diskData.map((item, index) => ({
value: item.used,
itemStyle: { color: getDiskColor(index) }
})),
label: {
show: true,
position: 'right',
formatter: '{c}G',
color: '#1890ff',
fontWeight: 'bold'
},
barWidth: '60%'
},
]
}
chartInstance.setOption(option)
}
// 监听窗口变化自动调整图表大小
const resizeHandler = () => {
chartInstance?.resize()
}
// 监听props变化更新图表
watch(() => props.diskData, (newVal) => {
if (chartInstance) {
chartInstance.setOption({
yAxis: {
data: newVal.map(item => item.name)
},
series: [
{
data: newVal.map(item => item.used)
},
{
data: newVal.map(item => item.total)
}
]
})
}
}, { deep: true })
onMounted(() => {
initChart()
window.addEventListener('resize', resizeHandler)
})
onBeforeUnmount(() => {
window.removeEventListener('resize', resizeHandler)
chartInstance?.dispose()
})
</script>
<style scoped>
.disk-chart {
width: 100%;
height: 100%;
background-color: white;
border: 1px solid #f0f0f0;
border-radius: 4px;
padding: 10px;
}
</style>
\ No newline at end of file
src/views/indexManage/ItemManage/modules/rateChart.vue deleted 100644 → 0
<template>
<div class="cpu-usage-chart" ref="chartRef"></div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
import * as echarts from 'echarts'
const props = defineProps({
usage: {
type: Number,
default: 0
},
color: {
type: String,
default: '#1890ff'
}
})
const chartRef = ref(null)
let chartInstance = null
const initChart = () => {
if (!chartRef.value) return
chartInstance = echarts.init(chartRef.value)
const option = {
series: [{
type: 'gauge',
startAngle: 90,
endAngle: -270,
pointer: { show: false },
progress: {
show: true,
overlap: false,
roundCap: true,
clip: false,
itemStyle: {
color: props.color // 进度条颜色 - 蓝色
}
},
axisLine: {
lineStyle: {
width: 10,
color: [[1, '#f0f0f0']] // 背景环颜色 - 浅灰色
}
},
axisTick: { show: false },
splitLine: { show: false },
axisLabel: { show: false },
detail: {
valueAnimation: true,
offsetCenter: [0, '0%'],
formatter: '{value}%',
color: props.color, // 百分比数字颜色 - 蓝色
fontSize: 24,
fontWeight: 'bold'
},
title: {
offsetCenter: [0, '30%'],
color: '#666', // "使用率"文字颜色 - 灰色
fontSize: 14
},
data: [{
value: props.usage,
name: '使用率'
}]
}],
// title: {
// text: 'cpu',
// left: 'center',
// top: '10%',
// textStyle: {
// color: '#666', // "cpu"文字颜色 - 灰色
// fontSize: 14
// }
// }
}
chartInstance.setOption(option)
}
// 监听窗口变化自动调整图表大小
const resizeHandler = () => {
chartInstance?.resize()
}
// 监听props变化更新图表
watch(() => props.usage, (newVal) => {
if (chartInstance) {
chartInstance.setOption({
series: [{
data: [{
value: newVal,
name: '使用率'
}]
}]
})
}
})
onMounted(() => {
initChart()
window.addEventListener('resize', resizeHandler)
})
onBeforeUnmount(() => {
window.removeEventListener('resize', resizeHandler)
chartInstance?.dispose()
})
</script>
<style scoped>
.cpu-usage-chart {
width: 100%;
height: 100%;
background-color: white; /* 白色背景 */
}
</style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论