工作台图片

vue/gold-system/src/views/workspace/index.vue

@@ -1,4 +1,5 @@
 <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'
@@ -8,9 +9,35 @@ const activeName = ref('recharge')
 const platform = ref('all')
 
 onMounted(function () {
-    // 基于准备好的dom，初始化echarts实例
-    var myChart = echarts.init(document.getElementById('main'));
+    // 第一个柱状图 基于准备好的dom，初始化echarts实例
+    var rechargeBar = echarts.init(document.getElementById('recharge'));
+    // 指定图表的配置项和数据
+    var option = {
+        title: {
+            text: 'ECharts 入门示例'
+        },
+        tooltip: {},
+        legend: {
+            data: ['销量']
+        },
+        xAxis: {
+            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
+        },
+        yAxis: {},
+        series: [
+            {
+                name: '销量',
+                type: 'bar',
+                data: [5, 20, 36, 10, 10, 20]
+            }
+        ]
+    };
+    // 使用刚指定的配置项和数据显示图表。
+    rechargeBar.setOption(option);
 
+
+    //第二个柱状图 基于准备好的dom，初始化echarts实例
+    var consumeBar = echarts.init(document.getElementById('consume'));
     // 指定图表的配置项和数据
     var option = {
         title: {
@@ -32,11 +59,55 @@ onMounted(function () {
             }
         ]
     };
+    // 使用刚指定的配置项和数据显示图表。
+    consumeBar.setOption(option);
 
+    // 第一个饼状图 基于准备好的dom，初始化echarts实例
+    var yearRechargePie = echarts.init(document.getElementById('yearRecharge'));
+    var option = {
+        tooltip: {
+            trigger: 'item'
+        },
+        legend: {
+            top: '5%',
+            left: 'center'
+        },
+        series: [
+            {
+                name: 'Access From',
+                type: 'pie',
+                radius: ['40%', '70%'],
+                avoidLabelOverlap: false,
+                label: {
+                    show: false,
+                    position: 'center'
+                },
+                emphasis: {
+                    label: {
+                        show: true,
+                        fontSize: 40,
+                        fontWeight: 'bold'
+                    }
+                },
+                labelLine: {
+                    show: false
+                },
+                data: [
+                    { value: 1048, name: 'Search Engine' },
+                    { value: 735, name: 'Direct' },
+                    { value: 580, name: 'Email' },
+                    { value: 484, name: 'Union Ads' },
+                    { value: 300, name: 'Video Ads' }
+                ]
+            }
+        ]
+    };
     // 使用刚指定的配置项和数据显示图表。
-    myChart.setOption(option);
+    yearRechargePie.setOption(option);
 
-    option = {
+    // 第二个饼状图 基于准备好的dom，初始化echarts实例
+    var yearConsumePie = echarts.init(document.getElementById('yearConsume'));
+    var option = {
         tooltip: {
             trigger: 'item'
         },
@@ -74,6 +145,94 @@ onMounted(function () {
             }
         ]
     };
+    // 使用刚指定的配置项和数据显示图表。
+    yearConsumePie.setOption(option);
+
+    // 第三个饼状图 基于准备好的dom，初始化echarts实例
+    var nowGoldPie = echarts.init(document.getElementById('nowGold'));
+    var option = {
+        tooltip: {
+            trigger: 'item'
+        },
+        legend: {
+            top: '5%',
+            left: 'center'
+        },
+        series: [
+            {
+                name: 'Access From',
+                type: 'pie',
+                radius: ['40%', '70%'],
+                avoidLabelOverlap: false,
+                label: {
+                    show: false,
+                    position: 'center'
+                },
+                emphasis: {
+                    label: {
+                        show: true,
+                        fontSize: 40,
+                        fontWeight: 'bold'
+                    }
+                },
+                labelLine: {
+                    show: false
+                },
+                data: [
+                    { value: 1048, name: 'Search Engine' },
+                    { value: 735, name: 'Direct' },
+                    { value: 580, name: 'Email' },
+                    { value: 484, name: 'Union Ads' },
+                    { value: 300, name: 'Video Ads' }
+                ]
+            }
+        ]
+    };
+    // 使用刚指定的配置项和数据显示图表。
+    nowGoldPie.setOption(option);
+
+    // 第四个饼状图 基于准备好的dom，初始化echarts实例
+    var goldCategoryPie = echarts.init(document.getElementById('goldCategory'));
+    var option = {
+        tooltip: {
+            trigger: 'item'
+        },
+        legend: {
+            top: '5%',
+            left: 'center'
+        },
+        series: [
+            {
+                name: 'Access From',
+                type: 'pie',
+                radius: ['40%', '70%'],
+                avoidLabelOverlap: false,
+                label: {
+                    show: false,
+                    position: 'center'
+                },
+                emphasis: {
+                    label: {
+                        show: true,
+                        fontSize: 40,
+                        fontWeight: 'bold'
+                    }
+                },
+                labelLine: {
+                    show: false
+                },
+                data: [
+                    { value: 1048, name: 'Search Engine' },
+                    { value: 735, name: 'Direct' },
+                    { value: 580, name: 'Email' },
+                    { value: 484, name: 'Union Ads' },
+                    { value: 300, name: 'Video Ads' }
+                ]
+            }
+        ]
+    };
+    // 使用刚指定的配置项和数据显示图表。
+    goldCategoryPie.setOption(option);
 })
 
 
@@ -123,7 +282,7 @@ onMounted(function () {
                         <div id="recharge" style="width: 600px;height:400px;"></div>
                     </el-tab-pane>
                     <el-tab-pane label="金币消费" name="consume">
-                        <div>金币消费</div>
+                        <div id="consume" style="width: 600px;height:400px;"></div>
                     </el-tab-pane>
                 </el-tabs>
 
@@ -138,7 +297,11 @@ onMounted(function () {
                         <span>金币概览</span>
                     </div>
                 </template>
-                <p v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</p>
+                <div class="pie">
+                    <div id="yearRecharge" style="width: 600px;height:400px;"></div>
+                    <div id="yearConsume" style="width: 600px;height:400px;"></div>
+                    <div id="nowGold" style="width: 600px;height:400px;"></div>
+                </div>
             </el-card>
         </el-col>
         <el-col :span="8">
@@ -154,13 +317,17 @@ onMounted(function () {
                         </el-radio-group>
                     </div>
                 </template>
-                <div>表格</div>
+                <div id="goldCategory" style="width: 600px;height:400px;"></div>
             </el-card>
         </el-col>
     </el-row>
 </template>
 
 <style scoped>
+.pie{
+    display: flex;
+}
+
 .el-row {
     margin-bottom: 20px;
 }