柱状图，block_radius扩展，我的服务分析结构

src/components/e-charts/bar-chart.vue

+<template>
+  <chart :options="bar()" class="bar" />
+</template>
+
+<script>
+import { graphic } from "echarts/lib/export";
+export default {
+  props: {
+    data: {
+      type: Object,
+      default: () => {
+        return {
+          data: 40,
+          text: "模拟数据1.0"
+        };
+      }
+    },
+    bar_width: {
+      type: String,
+      default: "16px"
+    },
+    colors: {
+      type: Array,
+      default: () => {
+        return ["#274fee", "#274fee"];
+      }
+    },
+    bar_border_radius: {
+      type: Array,
+      default: () => {
+        return [10, 10, 10, 10];
+      }
+    },
+    show_split: {
+      typr: Boolean,
+      default: false
+    }
+  },
+  data: () => ({
+    navList: []
+  }),
+  mounted() {},
+  methods: {
+    bar() {
+      let self = this;
+      return {
+        xAxis: [
+          {
+            type: "category",
+            data: ["2019Q1", "2019Q2", "2019Q3", "2019Q4"],
+            axisLabel: {
+              margin: 20,
+              color: "#0d1847",
+              textStyle: {
+                fontSize: 12
+              }
+            },
+            axisLine: {
+              lineStyle: {
+                color: "#f2f2f2"
+              }
+            },
+            axisTick: {
+              show: false
+            },
+            splitArea: {
+              show: self.show_split,
+              interval: 0,
+              areaStyle: {
+                color: ["#f4f5fd", "#fff"],
+                opacity: 0.5
+              }
+            }
+          }
+        ],
+        yAxis: [
+          {
+            axisLabel: {
+              color: "#a9aec0",
+              textStyle: {
+                fontSize: 12
+              }
+            },
+            axisLine: {
+              lineStyle: {
+                color: "rgba(0, 0, 0, 0)"
+              }
+            },
+            axisTick: {
+              show: false
+            },
+            splitLine: {
+              lineStyle: {
+                color: "#f2f2f2",
+                type: "solid"
+              }
+            }
+          }
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [40, 80, 20, 16],
+            barWidth: self.bar_width,
+            itemStyle: {
+              normal: {
+                color: function(params) {
+                  return new graphic.LinearGradient(
+                    0,
+                    0,
+                    0,
+                    1,
+                    [
+                      {
+                        offset: 0,
+                        color: self.colors[0] // 0% 处的颜色
+                      },
+                      {
+                        offset: 1,
+                        color: self.colors[1] // 100% 处的颜色
+                      }
+                    ],
+                    false
+                  );
+                },
+                barBorderRadius: self.bar_border_radius
+              }
+            }
+          }
+        ]
+      };
+    }
+  }
+};
+</script>
+<style scoped>
+.bar {
+  width: 100%;
+  height: 100%;
+}
+</style>
\ No newline at end of file

src/components/general/block-radius.vue

 <template>
   <div class="block_radius">
+    <div v-if="show_header" class="block_header">
+      <div class="block_header_title">{{ title }}</div>
+      <div class="block_header_button_group">
+        <div
+          v-for="(item, index) in buttons_arr"
+          :key="index"
+          class="block_header_button"
+          :class="active_button == index ? 'active' : ''"
+          @click="changeButton(index)"
+        >{{ item }}</div>
+      </div>
+    </div>
     <slot></slot>
   </div>
 </template>
 
 <script>
 export default {
+  props: {
+    show_header: {
+      type: Boolean,
+      default: false
+    },
+    buttons_arr: {
+      type: Array,
+      default: () => {
+        [];
+      }
+    },
+    title: {
+      type: String,
+      default: ""
+    }
+  },
   components: {},
-  data: () => ({}),
+  data: () => ({
+    active_button: 0
+  }),
   computed: {},
   watch: {},
-  methods: {},
+  methods: {
+    changeButton(index) {
+      if (this.active_button != index) {
+        this.active_button = index;
+        this.$emit("changeButton", index);
+      }
+    }
+  },
   mounted() {}
 };
 </script>
 
 <style scoped>
 .block_radius {
-    background-color: #fff;
-    border-radius: 10px;
-    padding: 20px;
-    margin-bottom: 20px;
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 20px;
+  margin-bottom: 20px;
+}
+.block_header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.block_header_title {
+  font-size: 16px;
+  color: #707693;
+  padding-left: 16px;
+  position: relative;
+}
+.block_header_title::before {
+  position: absolute;
+  content: "";
+  width: 8px;
+  height: 8px;
+  background-color: #515fe7;
+  border-radius: 50%;
+  left: 0;
+  top: 8px;
+}
+.block_header_button_group {
+  background-color: #f4f7fc;
+  border-radius: 4px;
+}
+.block_header_button {
+  display: inline-block;
+  font-size: 12px;
+  padding: 2px 6px;
+  color: #8890a7;
+  cursor: pointer;
+}
+.block_header_button.active {
+  color: #f8f9fd;
+  background-color: #3f4f9c;
+  border-radius: 4px;
 }
 </style>
 

src/pages/data-analysis/my-service.vue

@@ -9,34 +9,51 @@
       <el-col :span="6" class="in_left">
         <el-row>
           <el-col :span="24" class="in_block">
-            <block-radius class="block left_1">
-              <div ref="left_1_l" class="left_1_l"></div>
-              <dashboard ref="left_1_r" class="left_1_r"></dashboard>
+            <block-radius :show_header="true" title="服务总体概况" class="block">
+              <div class="left_1">
+                <div ref="left_1_l" class="left_1_l"></div>
+                <dashboard ref="left_1_r" class="left_1_r"></dashboard>
+              </div>
             </block-radius>
           </el-col>
           <el-col :span="24" class="in_block">
-            <block-radius class="block">
+            <block-radius class="block"></block-radius>
+          </el-col>
+          <el-col :span="24" class="in_block">
+            <block-radius
+              :show_header="true"
+              title="服务类型分析"
+              :buttons_arr="['发布的服务', '调用的服务']"
+              @changeButton="changeServiceTypeBtn"
+              class="block"
+            >
               <multiple-circle :data="mult_data" :text="text"></multiple-circle>
             </block-radius>
           </el-col>
           <el-col :span="24" class="in_block">
-            <block-radius class="block"></block-radius>
+            <block-radius
+              :show_header="true"
+              title="服务应用领域统计"
+              :buttons_arr="['发布的服务', '调用的服务']"
+              @changeButton="changeApplicationFieldBtn"
+              class="block"
+            >
+              <BarChart :data="bar_data" />
+            </block-radius>
           </el-col>
         </el-row>
       </el-col>
       <el-col :span="12" class="in_center">
         <el-row>
-          <el-col :span="24" class="in_block">
+          <el-col :span="24" class="in_block height_2x">
             <block-radius class="block"></block-radius>
           </el-col>
           <el-col :span="24" class="in_block">
-            <block-radius class="block">
-              <line-chart :data="line_data"></line-chart>
-            </block-radius>
+            <block-radius class="block"></block-radius>
           </el-col>
           <el-col :span="24" class="in_block">
             <block-radius class="block">
-
+              <line-chart :data="line_data"></line-chart>
             </block-radius>
           </el-col>
         </el-row>
@@ -48,6 +65,9 @@
               <toplist></toplist>
             </block-radius>
           </el-col>
+          <el-col :span="24" class="in_block">
+            <block-radius class="block"></block-radius>
+          </el-col>
           <el-col :span="24" class="in_block">
             <block-radius class="block">
               <single-circle :data="single_data"></single-circle>
@@ -76,11 +96,12 @@
 <script>
 import BlockRadius from "@/components/general/block-radius";
 import Dashboard from "@/components/e-charts/dashboard";
-import multipleCircle from '@/components/e-charts/multiple_circle'
-import singleCircle from '@/components/e-charts/single_circle'
-import lineChart from '@/components/e-charts/line_chart'
+import multipleCircle from "@/components/e-charts/multiple_circle";
+import singleCircle from "@/components/e-charts/single_circle";
+import lineChart from "@/components/e-charts/line_chart";
 import Toplist from "@/components/e-charts/toplist";
 import Starlist from "@/components/e-charts/starlist";
+import BarChart from "@/components/e-charts/bar-chart";
 export default {
   components: {
     BlockRadius,
@@ -89,41 +110,76 @@ export default {
     singleCircle,
     Toplist,
     Starlist,
-    lineChart
+    lineChart,
+    BarChart
   },
   data: () => ({
     navList: [],
-    mult_data:[
-      {"name":"基础工具","value":40},
-      {"name":"通用应用","value":0},
-      {"name":"业务应用","value":2}
+    mult_data: [
+      { name: "基础工具", value: 40 },
+      { name: "通用应用", value: 0 },
+      { name: "业务应用", value: 2 }
     ],
-    text:'应用总数',
-    single_data:{
-      num:12,
-      color:'#515fe7',
-      text:'共享'
+    text: "应用总数",
+    single_data: {
+      num: 12,
+      color: "#515fe7",
+      text: "共享"
     },
-    line_data:{
-      xaxis:['01-01','01-02','01-03','01-04','01-05','01-06','01-07','01-08'],
-      data:[
+    line_data: {
+      xaxis: [
+        "01-01",
+        "01-02",
+        "01-03",
+        "01-04",
+        "01-05",
+        "01-06",
+        "01-07",
+        "01-08"
+      ],
+      data: [
         {
-          name:'开发者应用',
-          arr:[100,120,130,150,160,120,110,100]
+          name: "开发者应用",
+          arr: [100, 120, 130, 150, 160, 120, 110, 100]
         },
         {
-          name:'平台应用',
-          arr:[120,130,140,130,140,120,100,90]
+          name: "平台应用",
+          arr: [120, 130, 140, 130, 140, 120, 100, 90]
         },
         {
-          name:'未上架',
-          arr:[80,90,100,110,100,70,80,90]
-        },
+          name: "未上架",
+          arr: [80, 90, 100, 110, 100, 70, 80, 90]
+        }
+      ]
+    },
+    bar_data: {
+      xaxis: [
+        "01-01",
+        "01-02",
+        "01-03",
+        "01-04",
+        "01-05",
+        "01-06",
+        "01-07",
+        "01-08"
       ],
+      data: [
+        {
+          name: "开发者应用",
+          arr: [100, 120, 130, 150, 160, 120, 110, 100]
+        }
+      ]
     }
   }),
   mounted() {},
-  methods: {}
+  methods: {
+    changeServiceTypeBtn(index) {
+      console.log(index);
+    },
+    changeApplicationFieldBtn(index) {
+      console.log(index);
+    }
+  }
 };
 </script>
 <style scoped>
@@ -143,11 +199,15 @@ export default {
   height: 280px;
   padding: 10px;
 }
+.height_2x {
+  height: 560px;
+}
 .block {
   width: 100%;
   height: 100%;
 }
 .left_1 {
+  height: 100%;
   display: flex;
 }
 .left_1_l {

src/request/api/workbench.js

@@ -55,7 +55,7 @@ const workbench = {
 
     // get service topology
     getServiceTopology() {
-        return axios.get(`/awecloud/meshgraph/api/namespaces/graph?duration=60s&graphType=service&injectServiceNodes=false&appenders=deadNode,sidecarsCheck,serviceEntry,istio&namespaces=apaas-proxy`)
+        return axios.get(`/apaas/istio/v3/api/namespaces/graph`)
     },
 }