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

[frontend-next] Refactored fronted

Browse source
This commit is contained in:
0xJacky 2022-08-01 20:16:18 +08:00
parent 2f91918f54
commit 2fff1f5181
193 changed files with 3920 additions and 26548 deletions
Download patch file Download diff file Expand all files Collapse all files

131
frontend/src/components/Chart/RadialBarChart.vue
View file

@ -1,102 +1,89 @@
<template>
<div class="container">
<p class="text">{{ centerText }}</p>
<p class="bottom_text">{{ bottomText }}</p>
<apexchart class="radialBar" type="radialBar" height="205" :options="chartOptions" :series="series" ref="chart"/>
</div>
</template>
<script setup lang="ts">
import VueApexCharts from 'vue3-apexcharts'
import {reactive} from 'vue'
<script>
import VueApexCharts from 'vue-apexcharts'
import Vue from 'vue'
const {series, centerText, colors, name, bottomText}
= defineProps(['series', 'centerText', 'colors', 'name', 'bottomText'])
Vue.use(VueApexCharts)
Vue.component('apexchart', VueApexCharts)
export default {
name: 'RadialBarChart',
props: {
series: Array,
centerText: String,
colors: String,
name: String,
bottomText: String,
const chartOptions = reactive({
series: series,
chart: {
type: 'radialBar',
offsetY: 0
},
watch: {
series: {
deep: true,
handler() {
this.$refs.chart.updateSeries(this.series)
}
}
},
data() {
return {
chartOptions: {
series: this.series,
chart: {
type: 'radialBar',
offsetY: 0
plotOptions: {
radialBar: {
startAngle: -135,
endAngle: 135,
dataLabels: {
name: {
fontSize: '14px',
color: colors,
offsetY: 36
},
plotOptions: {
radialBar: {
startAngle: -135,
endAngle: 135,
dataLabels: {
name: {
fontSize: '14px',
color: this.colors,
offsetY: 36
},
value: {
offsetY: 50,
fontSize: '14px',
color: undefined,
formatter: () => {return ''}
}
}
}
},
fill: {
colors: this.colors
},
labels: [this.name],
states: {
hover: {
filter: {
type: 'none'
}
},
active: {
filter: {
type: 'none'
}
value: {
offsetY: 50,
fontSize: '14px',
color: undefined,
formatter: () => {
return ''
}
}
}
}
},
fill: {
colors: colors
},
labels: [name],
states: {
hover: {
filter: {
type: 'none'
}
},
active: {
filter: {
type: 'none'
}
}
}
}
})
</script>
<template>
<div class="radial-bar-container">
<p class="text">{{ centerText }}</p>
<p class="bottom_text">{{ bottomText }}</p>
<VueApexCharts v-if="centerText" class="radialBar" type="radialBar" height="205" :options="chartOptions"
:series="series"
ref="chart"/>
</div>
</template>
<style lang="less" scoped>
.container {
.radial-bar-container {
position: relative;
margin: 0 auto;
height: 112px!important;
height: 112px !important;
.radialBar {
position: absolute;
top: -30px;
@media(max-width: 768px) and (min-width: 290px) {
@media (max-width: 768px) and (min-width: 290px) {
left: 50%;
transform: translateX(-50%);
}
}
.text {
position: absolute;
top: calc(50% - 5px);
width: 100%;
text-align: center;
}
.bottom_text {
position: absolute;
top: calc(106px);