美化dashbord

2026-09-29 07:33:55 +00:00 · 2021-09-02 11:49:22 +08:00
parent 1c0e1412ca
commit dd67b51dfc
6 changed files with 266 additions and 38 deletions
@@ -0,0 +1,119 @@
+<template>
+    <div class="dashbord-line" style="height: 400px;width: 100%;"></div>
+</template>
+<script>
+import echarts from "echarts";
+require("echarts/theme/macarons");
+
+
+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 = [];
+
+for (var i = 0; i < data.length; i++) {
+    dataShadow.push(yMax);
+}
+
+export default {
+    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.$el, "macarons");
+            this.setOptions();
+        },
+        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
+                    }
+                ]
+            });
+        },
+    },
+};
+</script>
+<style lang="scss" scoped>
+.dashbord-line {
+    margin: 20px 0;
+    padding: 20px;
+    background-color: #fff;
+}
+</style>
@@ -0,0 +1,56 @@
+<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>
+    </el-table>
+    </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,
+                        })
+                    }
+                })
+            })
+        },
+    }
+}
+</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>