首页美化

server/config.yaml

@@ -13,7 +13,7 @@ mysql:
     username: root
     password: 'Aa@6447985'
     path: '127.0.0.1:3306'
-    db-name: 'qmPlus'
+    db-name: 'yx'
     config: 'charset=utf8&parseTime=True&loc=Local'
     max-idle-conns: 10
     max-open-conns: 10

web/package.json

@@ -8,8 +8,10 @@
         "lint": "vue-cli-service lint"
     },
     "dependencies": {
+        "@moefe/vue-aplayer": "^2.0.0-beta.5",
         "axios": "^0.19.0",
         "core-js": "^2.6.5",
+        "echarts": "^4.7.0",
         "element-ui": "^2.12.0",
         "mavon-editor": "^2.7.7",
         "node-sass": "^4.12.0",

web/src/main.js

@@ -35,8 +35,24 @@ Vue.config.productionTip = false
 // 路由守卫
 import Bus from '@/utils/bus.js'
 Vue.use(Bus)
+
+import APlayer from '@moefe/vue-aplayer';
+
+Vue.use(APlayer, {
+    defaultCover: 'https://github.com/u3u.png',
+    productionTip: true,
+});
+
+
 new Vue({
     render: h => h(App),
     router,
     store
-}).$mount('#app')
+}).$mount('#app')
+
+//引入echarts
+import echarts from 'echarts'
+Vue.prototype.$echarts = echarts;
+
+
+

web/src/view/dashboard/component/RaddarChart.vue

@@ -0,0 +1,120 @@
+<template>
+    <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+    import echarts from 'echarts'
+    require('echarts/theme/macarons') // echarts theme
+
+    const animationDuration = 3000
+
+    export default {
+        name:'RaddarChart',
+        props: {
+            className: {
+                type: String,
+                default: 'chart'
+            },
+            width: {
+                type: String,
+                default: '100%'
+            },
+            height: {
+                type: String,
+                default: '300px'
+            }
+        },
+        data() {
+            return {
+                chart: null
+            }
+        },
+        mounted() {
+            this.initChart()
+           /* this.__resizeHandler = debounce(() => {
+                if (this.chart) {
+                    this.chart.resize()
+                }
+            }, 100)
+            window.addEventListener('resize', this.__resizeHandler)*/
+        },
+        beforeDestroy() {
+            if (!this.chart) {
+                return
+            }
+            // window.removeEventListener('resize', this.__resizeHandler)
+            this.chart.dispose()
+            this.chart = null
+        },
+        methods: {
+            initChart() {
+                this.chart = echarts.init(this.$el, 'light')
+
+                this.chart.setOption({
+                    tooltip: {
+                        trigger: 'axis',
+                        axisPointer: { // 坐标轴指示器，坐标轴触发有效
+                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+                        }
+                    },
+                    radar: {
+                        radius: '66%',
+                        center: ['50%', '42%'],
+                        splitNumber: 8,
+                        splitArea: {
+                            areaStyle: {
+                                color: 'rgba(255,192,203,.3)',
+                                opacity: 1,
+                                shadowBlur: 45,
+                                shadowColor: 'rgba(0,0,0,.5)',
+                                shadowOffsetX: 0,
+                                shadowOffsetY: 15
+                            }
+                        },
+                        indicator: [
+                            { name: 'Sales', max: 10000 },
+                            { name: 'Administration', max: 20000 },
+                            { name: 'Information Techology', max: 20000 },
+                            { name: 'Customer Support', max: 20000 },
+                            { name: 'Development', max: 20000 },
+                            { name: 'Marketing', max: 20000 }
+                        ]
+                    },
+                    legend: {
+                        left: 'center',
+                        bottom: '10',
+                        data: ['Allocated Budget', 'Expected Spending', 'Actual Spending']
+                    },
+                    series: [{
+                        type: 'radar',
+                        symbolSize: 0,
+                        areaStyle: {
+                            normal: {
+                                shadowBlur: 13,
+                                shadowColor: 'rgba(0,0,0,.2)',
+                                shadowOffsetX: 0,
+                                shadowOffsetY: 10,
+                                opacity: 1
+                            }
+                        },
+                        data: [
+                            {
+                                value: [5000, 7000, 12000, 11000, 15000, 14000],
+                                name: 'Allocated Budget'
+                            },
+                            {
+                                value: [4000, 9000, 15000, 15000, 13000, 11000],
+                                name: 'Expected Spending'
+                            },
+                            {
+                                value: [5500, 11000, 12000, 15000, 12000, 12000],
+                                name: 'Actual Spending'
+                            }
+                        ],
+                        animationDuration: animationDuration
+                    }]
+                })
+            }
+        }
+    }
+</script>