工作台

vue/gold-system/src/assets/css/common.css

@@ -63,4 +63,10 @@
     border-left: 7px solid transparent;
     border-right: 7px solid transparent;
     border-top: 10px solid green;
+}
+
+.grey-triangle {
+    width: 10px;
+    height: 5px;
+    background-color: grey;
 }

vue/gold-system/src/router/index.js

@@ -4,6 +4,7 @@ const router=createRouter({
     history:createWebHashHistory(),
     routes:[
         {path:'/',redirect:"/workspace"},
+        {path:'/test',component:()=>import("../views/z.vue")},
         {
             path:'/index',component:()=>import("../views/index.vue"),
             children:[

vue/gold-system/src/views/z.vue

@@ -0,0 +1,104 @@
+<script setup>
+import { all } from 'axios';
+import * as echarts from 'echarts';
+import { ref, onMounted, reactive, computed } from "vue";
+import { VscInfo } from 'vue-icons-plus/vsc'
+import { Bs1CircleFill, Bs2CircleFill, Bs3CircleFill, Bs4Circle, Bs5Circle, Bs6Circle, Bs7Circle, Bs8Circle } from 'vue-icons-plus/bs'
+import axios from 'axios';
+
+// 变量
+const option4Data = ref([]);
+const a1=ref(1000);
+const a2=ref(2000);
+const a3=ref(3000);
+const a4=ref(4000);
+onMounted(async function () {
+    option4Data.value = [
+        { value: a1.value, name: '1000金币' },
+        { value: a2.value, name: '2000金币' },
+        { value: a3.value, name: '3000金币' },
+        { value: a4.value, name: '4000金币' },
+    ];
+    // 第一个柱状图 基于准备好的dom，初始化echarts实例
+    var rechargeBar = echarts.init(document.getElementById('main'));
+
+    const option = {
+        tooltip: {
+            trigger: 'item'
+        },
+        legend: {
+            bottom: '-2%',
+            left: 'center',
+            orient: 'vertical'
+        },
+        grid: {
+            top: '0%', // 设置图表距离容器顶部的距离为10%，使饼图上移
+        },
+        series: [
+            {
+                name: '全年累计消耗金币数(个)\n10000',
+                type: 'pie',
+                radius: ['80%', '60%'],
+                avoidLabelOverlap: false,
+                label: {
+                    show: true,
+                    position: 'center',
+                    formatter: '{a}',
+                    fontSize: 15,
+                    fontWeight: 'bold'
+                },
+                labelLine: {
+                    show: false
+                },
+                data: option4Data.value,
+                color: ['#57a5ff', '#7f29ff', '#f2d113']
+            }
+        ]
+    };
+    // 使用刚指定的配置项和数据显示图表。
+    rechargeBar.setOption(option);
+})
+
+
+</script>
+
+<template>
+    <div>zzz</div>
+    <div id="main" style="width: 600px;height:400px;"></div>
+</template>
+
+<style scoped>
+.comparedWithYesterday {
+    display: flex;
+}
+
+.ranking-item {
+    margin-bottom: 10px;
+}
+
+.ranking-header {
+    margin-bottom: 10px;
+    display: flex;
+}
+
+.goldCategory {
+    margin-right: 20px;
+    display: flex;
+}
+
+.bar {
+    display: flex;
+}
+
+.pie {
+    display: flex;
+}
+
+.el-row {
+    margin-bottom: 20px;
+}
+
+.el-radio-button {
+    border: 1px solid grey;
+}
+</style>