Merge pull request #106 from Helltab/feature/ui/dashboard/echarts

feat(echarts): Build homepage dashboard using ECharts.
apache · Dec 12, 2023 · e39d7bb · e39d7bb
2 parents 011fed3 + b9dac47
commit e39d7bb
Show file tree

Hide file tree

Showing 5 changed files with 178 additions and 63 deletions.
diff --git a/ui/package.json b/ui/package.json
@@ -15,7 +15,7 @@
     "axios": "^0.18.1",
     "brace": "^0.11.1",
     "core-js": "^3.33.3",
-    "echarts": "^4.2.1",
+    "echarts": "^5.4.3",
     "http-status": "^1.2.0",
     "js-yaml": "^3.12.0",
     "jsoneditor": "^9.1.5",

diff --git a/ui/src/components/Home.vue b/ui/src/components/Home.vue
@@ -15,82 +15,81 @@
   ~ limitations under the License.
 -->
 <template>
-    <v-container grid-list-xl fluid>
-        <v-layout row wrap>
-            <v-flex lg12>
+  <v-container grid-list-xl fluid>
+    <v-layout row wrap>
+      <v-flex lg12>
         <Breadcrumb title="homePage" :items="breads"></breadcrumb>
-          </v-flex>
-        </v-layout>
-        <v-container fluid grid-list-md>
-    <v-data-iterator
-      :items=clusterData
-      content-tag="v-layout"
-      hide-actions
-      row
-      wrap
-    >
-      <template v-slot:header>
-        <v-toolbar
-          class="mb-2"
-          color="indigo darken-5"
-          dark
-          flat
-        >
-          <v-toolbar-title>ClusterOverview</v-toolbar-title>
-        </v-toolbar>
-      </template>
-      <template v-slot:item="props">
-        <v-flex
-          xs12
-          sm6
-          md4
-          lg4
-        >
-          <v-card>
-            <v-card-title class="subheading font-weight-bold">{{ props.item.name }}</v-card-title>
+      </v-flex>
+    </v-layout>
+    <v-container fluid grid-list-md>
+      <v-data-iterator
+          :items=clusterData
+          content-tag="v-layout"
+          hide-actions
+          row
+          wrap
+      >
+        <template v-slot:header>
+          <v-toolbar
+              class="mb-2"
+              color="indigo darken-5"
+              dark
+              flat
+          >
+            <v-toolbar-title>ClusterOverview</v-toolbar-title>
+          </v-toolbar>
+        </template>
+        <template v-slot:item="props">
+          <v-flex
+              xs12
+              sm6
+              md4
+              lg4
+          >
 
-            <v-divider></v-divider>
+            <v-card>
+              <v-card-title class="subheading font-weight-bold">{{ props.item.name }}</v-card-title>
 
-            <v-list dense>
-              <v-list-tile>
-                <v-list-tile-content>Number:</v-list-tile-content>
-                <v-list-tile-content class="align-end">{{ props.item.number }}</v-list-tile-content>
-              </v-list-tile>
-            </v-list>
-          </v-card>
-        </v-flex>
-      </template>
-    </v-data-iterator>
-        </v-container>
+              <v-divider></v-divider>
+              <v-list dense>
+                <home-echarts style="width: 100%; height: 25vh" :value="props.item"></home-echarts>
+              </v-list>
+            </v-card>
+          </v-flex>
+        </template>
+      </v-data-iterator>
     </v-container>
+  </v-container>
 </template>
 <script>
 import Breadcrumb from './public/Breadcrumb.vue'
+import HomeEcharts from "./dashboard/homeEcharts.vue";
+
 export default {
   name: 'ClusterOverview',
-  components: { Breadcrumb },
+  components: {HomeEcharts, Breadcrumb},
   data: () => ({
     breads: [
       {
         text: 'homePage',
         href: ''
       }
     ],
-    clusterData:[],
+    clusterData: [],
   }),
-  methods:{
-    getCluster () {
+  methods: {
+    getCluster() {
       this.$axios.get('/metrics/cluster').then(response => {
         console.log(response)
-        this.clusterData =  Object.entries(response.data.data).map(([name, number]) => ({ name, number }));
+        this.clusterData = Object.entries(response.data.data).map(([name, number]) => ({name, number}));
       })
     },
     joinArray(arr) {
       return arr.join(', ');
     }
   },
-  mounted(){
-     this.getCluster();
+  mounted() {
+    this.getCluster();
   }
 }
 </script>
diff --git a/ui/src/components/dashboard/homeEcharts.vue b/ui/src/components/dashboard/homeEcharts.vue
@@ -0,0 +1,117 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one or more
+  ~ contributor license agreements.  See the NOTICE file distributed with
+  ~ this work for additional information regarding copyright ownership.
+  ~ The ASF licenses this file to You under the Apache License, Version 2.0
+  ~ (the "License"); you may not use this file except in compliance with
+  ~ the License.  You may obtain a copy of the License at
+  ~
+  ~     http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+-->
+<template>
+
+  <div class="__dashboard_echarts_container">
+    <div class="__gauge_for_home" :id="`__gauge_for_home_${value.name}`"></div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+
+export default {
+  name: 'home-echarts',
+  props: {
+    value: {
+      type: Object,
+      default: {
+        number: 0,
+        name: 'demo'
+      }
+    },
+
+  },
+  data() {
+    return {
+      option: {
+        tooltip: {
+          trigger: 'item'
+        },
+        // legend: {
+        //   top: '5%',
+        //   left: 'center'
+        // },
+        series: [
+          {
+            name: 'Cluster',
+            type: 'pie',
+            radius: ['40%', '70%'],
+            avoidLabelOverlap: false,
+            itemStyle: {
+              borderRadius: 10,
+              borderColor: '#fff',
+              borderWidth: 2
+            },
+            label: {
+              //文本样式
+              normal: {
+                textStyle: {
+                  fontSize: 28,
+                  fontWeight: 'bolder',
+                  color: '#FC6679'
+                },
+                formatter: "{c}",
+                position: "center",
+                show: true,
+              },
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: 40,
+                fontWeight: 'bold'
+              }
+            },
+            labelLine: {
+              show: false
+            },
+            color:[
+              new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: "#FC6679 " },
+                { offset: 0.4, color: "#FCC581 " },
+                { offset: 1, color: "#FDC581 " }
+              ])
+            ],
+            data: [
+              { value: 100, name: 'demo' },
+            ]
+          }
+        ]
+      }
+    }
+  },
+  mounted() {
+    const chartDom = document.getElementById(`__gauge_for_home_${this.value.name}`);
+    const myChart = echarts.init(chartDom);
+    this.option.series[0].data[0].value = this.value.number
+    this.option.series[0].data[0].name = this.value.name
+    console.log(this.option.series[0])
+    myChart.setOption(this.option);
+  }
+}
+</script>
+
+<style lang="css">
+
+.__dashboard_echarts_container .__gauge_for_home {
+  height: 100%;
+  width: 100%;
+
+}
+
+</style>
diff --git a/ui/src/components/public/Drawer.vue b/ui/src/components/public/Drawer.vue
@@ -85,7 +85,7 @@ export default {
     window.getApp.$on('DRAWER_TOGGLED', () => {
       this.drawer = (!this.drawer)
     })
-    axios.get('/dubbo-admin-info.json').then(response => {
+    axios.get('/admin/dubbo-admin-info.json').then(response => {
       this.config = response.data
     })
   },

diff --git a/ui/src/mock/mockCluster.js b/ui/src/mock/mockCluster.js
@@ -1,4 +1,3 @@
-
 /*
  * Licensed to the Apache Software Foundation (ASF) under one or more
  * contributor license agreements.  See the NOTICE file distributed with
@@ -25,13 +24,13 @@ console.log(random) // 简单使用就不操作了，需要操作的可以去看
 
 // 3、基本用法 Mock.mock(url, type, data) // 参数文档 https://github.com/nuysoft/Mock/wiki
 Mock.mock('/mock/metrics/cluster', 'get', {
-  code: 200,
-  message: '成功',
-  data: {
-    all:0,
-    application:0,
-    consumers:0,
-    providers:0,
-    services:0
-  }
+    code: 200,
+    message: '成功',
+    data: {
+        all: Mock.mock('@integer(100, 500)'),
+        application: Mock.mock('@integer(20, 39)'),
+        consumers: Mock.mock('@integer(20, 39)'),
+        providers: Mock.mock('@integer(20, 39)'),
+        services: Mock.mock('@integer(20, 39)'),
+    }
 })