Skip to content

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

数据应用框架，柱状图调整，曲线图

parent 0aa6a0df
Show whitespace changes
Inline Side-by-side
Showing with 423 additions and 13 deletions
src/components/e-charts/bar-chart.vue
View file @ 54ffec7b
...@@ -12,7 +12,6 @@ export default { ...@@ -12,7 +12,6 @@ export default {
return { return {
xaxis: [], xaxis: [],
data: [] data: []
}; };
} }
}, },
...@@ -37,14 +36,19 @@ export default { ...@@ -37,14 +36,19 @@ export default {
default: false default: false
} }
}, },
data: () => ({ data: () => ({}),
navList: []
}),
mounted() {}, mounted() {},
methods: { methods: {
bar() { bar() {
let self = this; let self = this;
return { return {
grid: {
left: 10,
right: 10,
bottom: 25,
top: 25,
containLabel: true
},
xAxis: [ xAxis: [
{ {
type: "category", type: "category",
......
src/components/e-charts/dashboard.vue
View file @ 54ffec7b
...@@ -24,9 +24,7 @@ export default { ...@@ -24,9 +24,7 @@ export default {
default: false default: false
} }
}, },
data: () => ({ data: () => ({}),
navList: []
}),
mounted() {}, mounted() {},
methods: { methods: {
dashboard() { dashboard() {
......
src/components/e-charts/graph.vue 0 → 100644
View file @ 54ffec7b
<template>
<chart :options="graph()" class="graph" />
</template>
<script>
import { graphic } from "echarts/lib/export";
export default {
props: {
data: {
type: Object,
default: () => {
return {
xaxis: [],
data: [],
legend: []
};
}
}
},
data: () => ({
navList: []
}),
mounted() {},
methods: {
graph() {
let self = this;
return {
color: ["#274fee", "#ef9433"],
legend: {
bottom: 0,
left: "center",
icon: "roundRect",
itemWidth: 10,
itemHeight: 10,
data: self.data.legend,
orient: "horizontal",
backgroundColor: "#f4f7fc"
},
grid: {
left: 10,
right: 10,
bottom: 25,
top: 25,
containLabel: true
},
xAxis: [
{
type: "category",
data: self.data.xaxis,
axisLine: {
lineStyle: {
color: "#f2f2f2"
}
},
axisLabel: {
margin: 20,
color: "#0d1847",
textStyle: {
fontSize: 12
},
interval: 0
},
boundaryGap: false
}
],
yAxis: [
{
type: "value",
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: "rgba(0, 0, 0, 0)"
}
},
axisLabel: {
color: "#a9aec0",
textStyle: {
fontSize: 12
}
}
}
],
series: [
{
name: self.data.legend[0],
type: "line",
data: self.data.data[0],
symbolSize: 1,
symbol: "circle",
smooth: true,
yAxisIndex: 0,
showSymbol: false,
lineStyle: {
width: 2,
color: "#274fee",
shadowColor: "rgb(39, 79, 238, 0.3)",
shadowBlur: 5,
shadowOffsetY: 8
}
},
{
name: self.data.legend[1],
type: "line",
data: self.data.data[1],
symbolSize: 1,
symbol: "circle",
smooth: true,
yAxisIndex: 0,
showSymbol: false,
lineStyle: {
width: 2,
color: "#ef9433",
shadowColor: "rgb(239, 148, 51, 0.3)",
shadowBlur: 5,
shadowOffsetY: 8
}
}
]
};
}
}
};
</script>
<style scoped>
.graph {
width: 100%;
height: calc(100% - 20px);
}
</style>
\ No newline at end of file
src/pages/data-analysis/my-application.vue
View file @ 54ffec7b
...@@ -4,18 +4,265 @@ ...@@ -4,18 +4,265 @@
<el-breadcrumb-item :to="{ path: '/data_analysis' }">{{ $t("lang.dataAnalysis") }}</el-breadcrumb-item> <el-breadcrumb-item :to="{ path: '/data_analysis' }">{{ $t("lang.dataAnalysis") }}</el-breadcrumb-item>
<el-breadcrumb-item>{{ $t("lang.myApplicationDataAnalysis") }}</el-breadcrumb-item> <el-breadcrumb-item>{{ $t("lang.myApplicationDataAnalysis") }}</el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
<el-row class="in_analysis">
<!-- 可横向铺满 -->
<el-col :span="6" class="in_left">
<el-row>
<el-col :span="24" class="in_block">
<block-radius :show_header="true" title="服务总体概况" class="block">
<div class="left_1">
<div ref="left_1_l" class="left_1_l">
<img :src="require('@/assets/imgs/data_img_service.gif')" class="left_1_img" />
<div class="left_1_title">服务总数</div>
<div class="left_1_num">2222</div>
</div>
<dashboard ref="left_1_r" :data="das_data" :is_word="true" class="left_1_r"></dashboard>
</div>
</block-radius>
</el-col>
<el-col :span="24" class="in_block">
<block-radius
:show_header="true"
title="服务调用次数分析"
:buttons_arr="['近7天', '近30天']"
@changeButton="changeServiceCellBtn"
class="block"
>
<Graph :data="graph_arr" />
</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-row>
</el-col>
<el-col :span="12" class="in_center">
<el-row>
<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"></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>
</el-col>
<el-col :span="6" class="in_right">
<el-row>
<el-col :span="24" class="in_block">
<block-radius class="block">
<toplist></toplist>
</block-radius>
</el-col>
<el-col :span="24" class="in_block">
<block-radius class="block">
<starlist></starlist>
</block-radius>
</el-col>
<el-col :span="24" class="in_block">
<block-radius class="block">
<single-circle :data="single_data"></single-circle>
</block-radius>
</el-col>
</el-row>
</el-col>
<!-- 不可横向铺满，一般为最后一行 -->
<el-col :span="6" class="in_block">
<block-radius :show_header="true" title="服务来源机构分析" class="block">
<BarChart :data="bar_data_org" :colors="['#e56600', '#e56600']" />
</block-radius>
</el-col>
<el-col :span="18" class="in_block default">
<block-radius class="block">
<img :src="require('@/assets/imgs/data_img_default.gif')" class="default_img" />
</block-radius>
</el-col>
</el-row>
</div> </div>
</template> </template>
<script> <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 Toplist from "@/components/e-charts/toplist";
import Starlist from "@/components/e-charts/starlist";
import BarChart from "@/components/e-charts/bar-chart";
import Graph from "@/components/e-charts/graph";
export default { export default {
components: {}, components: {
BlockRadius,
Dashboard,
multipleCircle,
singleCircle,
Toplist,
Starlist,
lineChart,
BarChart,
Graph
},
data: () => ({ data: () => ({
navList: [] navList: [],
mult_data: [
{ name: "基础工具", value: 40 },
{ name: "通用应用", value: 0 },
{ name: "业务应用", value: 2 }
],
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: [
{
name: "开发者应用",
arr: [100, 120, 130, 150, 160, 120, 110, 100]
},
{
name: "平台应用",
arr: [120, 130, 140, 130, 140, 120, 100, 90]
},
{
name: "未上架",
arr: [80, 90, 100, 110, 100, 70, 80, 90]
}
]
},
das_data: {
data: 40,
text: "健康占比"
},
bar_data_org: {
xaxis: [
"01-01",
"01-02",
"01-03",
"01-04",
"01-05",
"01-06",
"01-07",
"01-08"
],
data: [100, 120, 130, 150, 160, 120, 110, 100]
},
graph_arr: {
xaxis: [
"01-01",
"01-02",
"01-03",
"01-04",
"01-05",
"01-06",
"01-07",
"01-08"
],
data: [
[1010, 120, 130, 520, 160, 1120, 110, 100],
[100, 1210, 130, 1530, 160, 120, 110, 1200]
],
legend: ["aaa1", "bbb1"]
}
}), }),
mounted() {}, mounted() {},
methods: {} methods: {
changeServiceTypeBtn(index) {
console.log(index);
},
changeApplicationFieldBtn(index) {
console.log(index);
},
changeServiceCellBtn(index) {
console.log(index);
}
}
}; };
</script> </script>
<style scoped> <style scoped>
.in_analysis {
padding: 0 10px 10px;
height: 100%;
width: 100%;
min-width: 1700px;
}
.in_l {
}
.in_r {
}
.in_c {
}
.in_block {
height: 280px;
padding: 10px;
}
.height_2x {
height: 560px;
}
.block {
width: 100%;
height: 100%;
}
.left_1 {
height: 100%;
display: flex;
justify-content: space-between;
}
.left_1_l {
width: 40%;
height: 100%;
display: inline-block;
padding: 20px 0 0 0;
}
.left_1_title {
width: 100%;
text-align: center;
}
.left_1_num {
font-size: 32px;
color: #515fe7;
width: 100%;
text-align: center;
}
.left_1_img {
width: 120px;
display: block;
margin: 0 auto;
}
.left_1_r {
width: 50%;
height: 100%;
display: inline-block;
}
.default {
text-align: center;
}
.default_img {
width: 330px;
height: 230px;
}
</style> </style>
\ No newline at end of file
src/pages/data-analysis/my-service.vue
View file @ 54ffec7b
...@@ -70,7 +70,15 @@ ...@@ -70,7 +70,15 @@
</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="['近7天', '近30天']"
@changeButton="changeServiceCellBtn"
class="block"
>
<Graph :data="graph_arr" />
</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">
...@@ -108,6 +116,7 @@ import lineChart from "@/components/e-charts/line_chart"; ...@@ -108,6 +116,7 @@ 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"; import BarChart from "@/components/e-charts/bar-chart";
import Graph from "@/components/e-charts/graph";
export default { export default {
components: { components: {
BlockRadius, BlockRadius,
...@@ -117,7 +126,8 @@ export default { ...@@ -117,7 +126,8 @@ export default {
Toplist, Toplist,
Starlist, Starlist,
lineChart, lineChart,
BarChart BarChart,
Graph
}, },
data: () => ({ data: () => ({
navList: [], navList: [],
...@@ -187,6 +197,23 @@ export default { ...@@ -187,6 +197,23 @@ export default {
"01-08" "01-08"
], ],
data: [100, 120, 130, 150, 160, 120, 110, 100] data: [100, 120, 130, 150, 160, 120, 110, 100]
},
graph_arr: {
xaxis: [
"01-01",
"01-02",
"01-03",
"01-04",
"01-05",
"01-06",
"01-07",
"01-08"
],
data: [
[1010, 120, 130, 520, 160, 1120, 110, 100],
[100, 1210, 130, 1530, 160, 120, 110, 1200]
],
legend: ["aaa1", "bbb1"]
} }
}), }),
mounted() {}, mounted() {},
...@@ -196,6 +223,9 @@ export default { ...@@ -196,6 +223,9 @@ export default {
}, },
changeApplicationFieldBtn(index) { changeApplicationFieldBtn(index) {
console.log(index); console.log(index);
},
changeServiceCellBtn(index) {
console.log(index);
} }
} }
}; };
......
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