mirrors/nginx-ui
1
0
Fork 0
mirror of https://github.com/0xJacky/nginx-ui.git synced 2025-05-11 02:15:48 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

redesign Dashboard

Browse source
This commit is contained in:
0xJacky 2022-02-23 11:22:50 +08:00
parent d50bb154f1
commit 46e86d2a3d
17 changed files with 834 additions and 167 deletions
Download patch file Download diff file Expand all files Collapse all files

93
frontend/src/components/Chart/RadialBarChart.vue Normal file
View file

@ -0,0 +1,93 @@
<template>
<div class="container">
<p class="text">{{ centerText }}</p>
<apexchart type="radialBar" height="205" :options="chartOptions" :series="series" ref="chart"/>
</div>
</template>
<script>
import VueApexCharts from 'vue-apexcharts'
import Vue from 'vue'
Vue.use(VueApexCharts)
Vue.component('apexchart', VueApexCharts)
export default {
name: 'RadialBarChart',
props: {
series: Array,
centerText: String,
colors: String,
name: String,
},
watch: {
series: {
deep: true,
handler() {
this.$refs.chart.updateSeries(this.series)
}
}
},
data() {
return {
chartOptions: {
series: this.series,
chart: {
type: 'radialBar',
offsetY: -10
},
plotOptions: {
radialBar: {
startAngle: -135,
endAngle: 135,
dataLabels: {
name: {
fontSize: '15px',
color: this.colors,
offsetY: 56
},
value: {
offsetY: 60,
fontSize: '14px',
color: undefined,
formatter: function (val) {
return val + "%";
}
}
}
}
},
fill: {
colors: this.colors
},
labels: [this.name],
states: {
hover: {
filter: {
type: 'none'
}
},
active: {
filter: {
type: 'none'
}
}
}
}
}
}
}
</script>
<style lang="less" scoped>
.container {
position: relative;
margin: 0 auto;
.text {
position: absolute;
top: calc(72px);
width: 100%;
text-align: center;
}
}
</style>