Skip to content

A
apaas-ui
Commit b924e6cd authored by 刘殿昕's avatar 刘殿昕
Browse files
Options

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

parent 19d45c4a
Hide whitespace changes
Inline Side-by-side
Showing with 316 additions and 41 deletions
src/components/e-charts/bar-chart.vue 0 → 100644
View file @ b924e6cd
<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
View file @ b924e6cd
<template> <template>
<div class="block_radius"> <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> <slot></slot>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
props: {
show_header: {
type: Boolean,
default: false
},
buttons_arr: {
type: Array,
default: () => {
[];
}
},
title: {
type: String,
default: ""
}
},
components: {}, components: {},
data: () => ({}), data: () => ({
active_button: 0
}),
computed: {}, computed: {},
watch: {}, watch: {},
methods: {}, methods: {
changeButton(index) {
if (this.active_button != index) {
this.active_button = index;
this.$emit("changeButton", index);
}
}
},
mounted() {} mounted() {}
}; };
</script> </script>
<style scoped> <style scoped>
.block_radius { .block_radius {
background-color: #fff; background-color: #fff;
border-radius: 10px; border-radius: 10px;
padding: 20px; padding: 20px;
margin-bottom: 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> </style>
src/pages/data-analysis/my-service.vue
View file @ b924e6cd
...@@ -9,34 +9,51 @@ ...@@ -9,34 +9,51 @@
<el-col :span="6" class="in_left"> <el-col :span="6" class="in_left">
<el-row> <el-row>
<el-col :span="24" class="in_block"> <el-col :span="24" class="in_block">
<block-radius class="block left_1"> <block-radius :show_header="true" title="服务总体概况" class="block">
<div ref="left_1_l" class="left_1_l"></div> <div class="left_1">
<dashboard ref="left_1_r" class="left_1_r"></dashboard> <div ref="left_1_l" class="left_1_l"></div>
<dashboard ref="left_1_r" class="left_1_r"></dashboard>
</div>
</block-radius> </block-radius>
</el-col> </el-col>
<el-col :span="24" class="in_block"> <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> <multiple-circle :data="mult_data" :text="text"></multiple-circle>
</block-radius> </block-radius>
</el-col> </el-col>
<el-col :span="24" class="in_block"> <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-col>
</el-row> </el-row>
</el-col> </el-col>
<el-col :span="12" class="in_center"> <el-col :span="12" class="in_center">
<el-row> <el-row>
<el-col :span="24" class="in_block"> <el-col :span="24" class="in_block height_2x">
<block-radius class="block"></block-radius> <block-radius class="block"></block-radius>
</el-col> </el-col>
<el-col :span="24" class="in_block"> <el-col :span="24" class="in_block">
<block-radius class="block"> <block-radius class="block"></block-radius>
<line-chart :data="line_data"></line-chart>
</block-radius>
</el-col> </el-col>
<el-col :span="24" class="in_block"> <el-col :span="24" class="in_block">
<block-radius class="block"> <block-radius class="block">
<line-chart :data="line_data"></line-chart>
</block-radius> </block-radius>
</el-col> </el-col>
</el-row> </el-row>
...@@ -48,6 +65,9 @@ ...@@ -48,6 +65,9 @@
<toplist></toplist> <toplist></toplist>
</block-radius> </block-radius>
</el-col> </el-col>
<el-col :span="24" class="in_block">
<block-radius class="block"></block-radius>
</el-col>
<el-col :span="24" class="in_block"> <el-col :span="24" class="in_block">
<block-radius class="block"> <block-radius class="block">
<single-circle :data="single_data"></single-circle> <single-circle :data="single_data"></single-circle>
...@@ -76,11 +96,12 @@ ...@@ -76,11 +96,12 @@
<script> <script>
import BlockRadius from "@/components/general/block-radius"; import BlockRadius from "@/components/general/block-radius";
import Dashboard from "@/components/e-charts/dashboard"; import Dashboard from "@/components/e-charts/dashboard";
import multipleCircle from '@/components/e-charts/multiple_circle' import multipleCircle from "@/components/e-charts/multiple_circle";
import singleCircle from '@/components/e-charts/single_circle' import singleCircle from "@/components/e-charts/single_circle";
import lineChart from '@/components/e-charts/line_chart' import lineChart from "@/components/e-charts/line_chart";
import Toplist from "@/components/e-charts/toplist"; import Toplist from "@/components/e-charts/toplist";
import Starlist from "@/components/e-charts/starlist"; import Starlist from "@/components/e-charts/starlist";
import BarChart from "@/components/e-charts/bar-chart";
export default { export default {
components: { components: {
BlockRadius, BlockRadius,
...@@ -89,41 +110,76 @@ export default { ...@@ -89,41 +110,76 @@ export default {
singleCircle, singleCircle,
Toplist, Toplist,
Starlist, Starlist,
lineChart lineChart,
BarChart
}, },
data: () => ({ data: () => ({
navList: [], navList: [],
mult_data:[ mult_data: [
{"name":"基础工具","value":40}, { name: "基础工具", value: 40 },
{"name":"通用应用","value":0}, { name: "通用应用", value: 0 },
{"name":"业务应用","value":2} { name: "业务应用", value: 2 }
], ],
text:'应用总数', text: "应用总数",
single_data:{ single_data: {
num:12, num: 12,
color:'#515fe7', color: "#515fe7",
text:'共享' text: "共享"
}, },
line_data:{ line_data: {
xaxis:['01-01','01-02','01-03','01-04','01-05','01-06','01-07','01-08'], xaxis: [
data:[ "01-01",
"01-02",
"01-03",
"01-04",
"01-05",
"01-06",
"01-07",
"01-08"
],
data: [
{ {
name:'开发者应用', name: "开发者应用",
arr:[100,120,130,150,160,120,110,100] arr: [100, 120, 130, 150, 160, 120, 110, 100]
}, },
{ {
name:'平台应用', name: "平台应用",
arr:[120,130,140,130,140,120,100,90] arr: [120, 130, 140, 130, 140, 120, 100, 90]
}, },
{ {
name:'未上架', name: "未上架",
arr:[80,90,100,110,100,70,80,90] 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() {}, mounted() {},
methods: {} methods: {
changeServiceTypeBtn(index) {
console.log(index);
},
changeApplicationFieldBtn(index) {
console.log(index);
}
}
}; };
</script> </script>
<style scoped> <style scoped>
...@@ -143,11 +199,15 @@ export default { ...@@ -143,11 +199,15 @@ export default {
height: 280px; height: 280px;
padding: 10px; padding: 10px;
} }
.height_2x {
height: 560px;
}
.block { .block {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.left_1 { .left_1 {
height: 100%;
display: flex; display: flex;
} }
.left_1_l { .left_1_l {
......
src/request/api/workbench.js
View file @ b924e6cd
...@@ -55,7 +55,7 @@ const workbench = { ...@@ -55,7 +55,7 @@ const workbench = {
// get service topology // get service topology
getServiceTopology() { 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`)
}, },
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment