mirror of
https://github.com/jumpserver/lina.git
synced 2025-09-20 10:46:35 +00:00
Perf: Dashboard Chart
This commit is contained in:
@@ -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,
|
||||||
|
@@ -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)
|
||||||
|
Reference in New Issue
Block a user