首页优化
This commit is contained in:
piexlmax
@@ -1,119 +1,143 @@
|
||||
<template>
|
||||
<div class="dashbord-line" style="height: 400px;width: 100%;"></div>
|
||||
<div class="dashbord-line-box">
|
||||
<div class="dashbord-line-title">Gva 仓库commit 记录</div>
|
||||
<div
|
||||
ref="echart"
|
||||
class="dashbord-line"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import echarts from "echarts";
|
||||
require("echarts/theme/macarons");
|
||||
import echarts from 'echarts'
|
||||
require('echarts/theme/macarons')
|
||||
|
||||
|
||||
var dataAxis = [];
|
||||
for (var i = 1 ; i < 21 ; i++){
|
||||
dataAxis.push(`${i}号`)
|
||||
var dataAxis = []
|
||||
for (var i = 1; i < 21; i++) {
|
||||
dataAxis.push(`${i}号`)
|
||||
}
|
||||
var data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220];
|
||||
var yMax = 500;
|
||||
var dataShadow = [];
|
||||
var data = [
|
||||
220,
|
||||
182,
|
||||
191,
|
||||
234,
|
||||
290,
|
||||
330,
|
||||
310,
|
||||
123,
|
||||
442,
|
||||
321,
|
||||
90,
|
||||
149,
|
||||
210,
|
||||
122,
|
||||
133,
|
||||
334,
|
||||
198,
|
||||
123,
|
||||
125,
|
||||
220,
|
||||
]
|
||||
var yMax = 500
|
||||
var dataShadow = []
|
||||
|
||||
// eslint-disable-next-line no-redeclare
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
dataShadow.push(yMax);
|
||||
dataShadow.push(yMax)
|
||||
}
|
||||
|
||||
export default {
|
||||
name: "line",
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
};
|
||||
name: 'Line',
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$refs.echart, 'macarons')
|
||||
this.setOptions()
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart();
|
||||
});
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return;
|
||||
}
|
||||
this.chart.dispose();
|
||||
this.chart = null;
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$el, "macarons");
|
||||
this.setOptions();
|
||||
setOptions() {
|
||||
this.chart.setOption({
|
||||
xAxis: {
|
||||
data: dataAxis,
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
z: 10,
|
||||
},
|
||||
setOptions() {
|
||||
this.chart.setOption({
|
||||
title: {
|
||||
text: 'GVA 图标示例',
|
||||
},
|
||||
xAxis: {
|
||||
data: dataAxis,
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
z: 10
|
||||
},
|
||||
yAxis: {
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#999'
|
||||
}
|
||||
}
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'inside'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
borderRadius: [5, 5, 0, 0],
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0, 0, 0, 1,
|
||||
[
|
||||
{ offset: 0, color: '#83bff6' },
|
||||
{ offset: 0.5, color: '#188df0' },
|
||||
{ offset: 1, color: '#188df0' }
|
||||
]
|
||||
),
|
||||
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0, 0, 0, 1,
|
||||
[
|
||||
{ offset: 0, color: '#2378f7' },
|
||||
{ offset: 0.7, color: '#2378f7' },
|
||||
{ offset: 1, color: '#83bff6' }
|
||||
]
|
||||
)
|
||||
}
|
||||
},
|
||||
data: data
|
||||
}
|
||||
]
|
||||
});
|
||||
yAxis: {
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#999',
|
||||
},
|
||||
},
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'inside',
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
borderRadius: [5, 5, 0, 0],
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#83bff6' },
|
||||
{ offset: 0.5, color: '#188df0' },
|
||||
{ offset: 1, color: '#188df0' },
|
||||
]),
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#2378f7' },
|
||||
{ offset: 0.7, color: '#2378f7' },
|
||||
{ offset: 1, color: '#83bff6' },
|
||||
]),
|
||||
},
|
||||
},
|
||||
data: data,
|
||||
},
|
||||
],
|
||||
})
|
||||
},
|
||||
};
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.dashbord-line {
|
||||
margin: 20px 0;
|
||||
padding: 20px;
|
||||
.dashbord-line-box {
|
||||
padding: 20px;
|
||||
.dashbord-line {
|
||||
background-color: #fff;
|
||||
height: 360px;
|
||||
width: calc(100% - 40px);
|
||||
}
|
||||
.dashbord-line-title {
|
||||
color: rgb(56, 137, 206);
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -1,56 +1,53 @@
|
||||
<template>
|
||||
<div class="commit-table">
|
||||
<div class="commit-table-title">Gva 仓库commit 记录</div>
|
||||
<el-table :data="dataTimeline" style="width: 100%" v-loading="loading">
|
||||
<el-table-column prop="from" show-overflow-tooltip label="日期" width="180"></el-table-column>
|
||||
<el-table-column prop="title" show-overflow-tooltip label="推送者" width="120"></el-table-column>
|
||||
<el-table-column prop="message" show-overflow-tooltip label="commit 信息"></el-table-column>
|
||||
<div class="commit-table">
|
||||
<div class="commit-table-title">Gva 仓库commit 记录</div>
|
||||
<el-table v-loading="loading" :data="dataTimeline" style="width: 100%">
|
||||
<el-table-column prop="from" show-overflow-tooltip label="日期" width="180" />
|
||||
<el-table-column prop="title" show-overflow-tooltip label="推送者" width="120" />
|
||||
<el-table-column prop="message" show-overflow-tooltip label="commit 信息" />
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Commits } from '@/api/github'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
dataTimeline: [],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadCommits()
|
||||
},
|
||||
methods: {
|
||||
loadCommits() {
|
||||
Commits(0).then(({ data }) => {
|
||||
this.loading = false
|
||||
data.forEach((element , index) => {
|
||||
if (element.commit.message && index < 6) {
|
||||
this.dataTimeline.push({
|
||||
from: new Date(element.commit.author.date),
|
||||
title: element.commit.author.name,
|
||||
showDayAndMonth: true,
|
||||
message: element.commit.message,
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
dataTimeline: [],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadCommits()
|
||||
},
|
||||
methods: {
|
||||
loadCommits() {
|
||||
Commits(0).then(({ data }) => {
|
||||
this.loading = false
|
||||
data.forEach((element, index) => {
|
||||
if (element.commit.message && index < 6) {
|
||||
this.dataTimeline.push({
|
||||
from: new Date(element.commit.author.date),
|
||||
title: element.commit.author.name,
|
||||
showDayAndMonth: true,
|
||||
message: element.commit.message,
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.commit-table{
|
||||
margin: 20px 0;
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
height: 400px;
|
||||
&-title{
|
||||
color: rgb(56,137,206);
|
||||
font-size: 18px;
|
||||
margin: 20px 0;
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user