Perf: Dashboard Chart

This commit is contained in:
zhaojisen
2025-02-21 18:22:02 +08:00
committed by ZhaoJiSen
parent 8be5c22ae4
commit f13e7fd1d0
2 changed files with 29 additions and 13 deletions

View File

@@ -96,6 +96,14 @@ export default {
} }
] ]
// 过滤出值大于0的项目
let filteredData = data.filter(item => item.value > 0)
// 如果没有值大于0的项目则显示前5个
if (filteredData.length === 0) {
filteredData = data.slice(0, 5)
}
return { return {
grid: { grid: {
top: '5%', top: '5%',
@@ -123,7 +131,7 @@ export default {
}, },
yAxis: { yAxis: {
type: 'category', type: 'category',
data: data.map(item => item.name), data: filteredData.map(item => item.name),
axisLine: { show: false }, axisLine: { show: false },
axisTick: { show: false }, axisTick: { show: false },
axisLabel: { axisLabel: {
@@ -145,7 +153,7 @@ export default {
series: [ series: [
{ {
type: 'bar', type: 'bar',
data: data.map(item => item.value), data: filteredData.map(item => item.value),
barWidth: '60%', barWidth: '60%',
label: { label: {
show: false, show: false,

View File

@@ -79,19 +79,14 @@ export default {
show: false show: false
}, },
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis'
axisPointer: {
type: 'cross',
label: {
}
}
}, },
legend: { legend: {
show: false show: false
}, },
grid: { grid: {
left: '3%', left: '3%',
right: 0, right: '3%',
bottom: 0 bottom: 0
}, },
xAxis: [ xAxis: [
@@ -99,7 +94,7 @@ export default {
show: false, show: false,
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] data: [this.$t('Privileged'), this.$t('ResetSecret'), this.$t('Connectable'), this.$t('Valid')]
} }
], ],
yAxis: [ yAxis: [
@@ -110,7 +105,6 @@ export default {
], ],
series: [ series: [
{ {
name: 'Line 1',
type: 'line', type: 'line',
stack: 'Total', stack: 'Total',
smooth: true, smooth: true,
@@ -123,7 +117,6 @@ export default {
}, },
showSymbol: false, showSymbol: false,
areaStyle: { areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ {
offset: 0, offset: 0,
@@ -138,12 +131,27 @@ export default {
emphasis: { emphasis: {
focus: 'series' focus: 'series'
}, },
data: [0, 232, 101, 264, 90, 340, 0] data: []
} }
] ]
} }
} }
}, },
watch: {
config: {
handler(newData) {
if (this.chart) {
this.chart.setOption({
series: [{
data: [newData.privileged, newData.resetSecret, newData.valid, newData.connectable]
}]
})
}
},
immediate: true,
deep: true
}
},
mounted() { mounted() {
this.initChart() this.initChart()
window.addEventListener('resize', this.resizeChart) window.addEventListener('resize', this.resizeChart)