Skip to content

A
apaas-ui
Commit b9635c01 authored by 张慧龙's avatar 张慧龙
Browse files
Options

0813

parent a464eae3
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 4674 additions and 337 deletions
src/components/e-charts/bar-chartTwo.vue 0 → 100644
View file @ b9635c01
<template>
<chart :options="bar()" class="bar" />
</template>
<script>
import { graphic } from "echarts/lib/export";
export default {
props: {
data: {
type: Array,
default: () => {
return [];
}
},
bar_width: {
type: Number,
default: 12
},
colors: {
type: Array,
default: () => {
return ["#515fe7", "#e56600"];
}
},
bar_border_radius: {
type: Array,
default: () => {
return [10, 10, 10, 10];
}
},
show_split: {
type: Boolean,
default: false
},
x_router: {
type: Number,
default: 0
}
},
data: () => ({}),
mounted() {},
methods: {
bar() {
let self = this;
return {
grid: {
left: 10,
right: 10,
bottom: 25,
top: 25,
containLabel: true
},
legend: {
left: "right",
itemWidth: 10,
itemHeight: 10,
orient: "horizontal",
backgroundColor: "#f4f7fc"
},
color: this.colors,
tooltip: {},
dataset: {
source: self.data
},
xAxis: {
type: "category",
// data: self.data.legendData,
axisLabel: {
margin: 20,
color: "#0d1847",
textStyle: {
fontSize: 12
},
interval: 0,
rotate: self.x_router,
formatter: function(value) {
let valueTxt = "";
if (value.length > 6) {
valueTxt = value.substring(0, 5) + "...";
} else {
valueTxt = value;
}
return valueTxt;
}
},
axisLine: {
lineStyle: {
color: "#f2f2f2"
}
},
axisTick: {
show: false
},
splitArea: {
show: true,
areaStyle: {
color: ["#fff", "#f8f9fd"],
opacity: 0.5
},
interval: 0
}
},
yAxis: [
{
axisLabel: {
color: "#a9aec0",
textStyle: {
fontSize: 12
}
},
minInterval: 1,
axisLine: {
lineStyle: {
color: "rgba(0, 0, 0, 0)"
}
},
axisTick: {
show: false
},
splitLine: {
lineStyle: {
color: "#f2f2f2",
type: "solid"
}
}
}
],
// Declare several bar series, each will be mapped
// to a column of dataset.source by default.
series: [
{
type: "bar",
type: "bar",
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[0] // 100% 处的颜色
}
],
false
);
},
barBorderRadius: self.bar_border_radius
}
}
},
{
type: "bar",
type: "bar",
barWidth: self.bar_width,
itemStyle: {
normal: {
color: function(params) {
return new graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: self.colors[1] // 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/e-charts/doubleLine.vue 0 → 100644
View file @ b9635c01
<template>
<chart :options="bar()" class="bar" />
</template>
<script>
import { graphic } from "echarts/lib/export";
export default {
props: {
data: {
type: Object,
default: () => {
return {
title:[],
dataOne:[],
dataTwo:[]
};
}
},
bar_width: {
type: Number,
default: 12
},
colors: {
type: Array,
default: () => {
return [ "#1034eb", "#e56600"];
}
},
bar_border_radius: {
type: Array,
default: () => {
return [10, 0, 0, 10];
}
},
bar_border_radius_two: {
type: Array,
default: () => {
return [0, 10, 10, 0];
}
},
show_split: {
type: Boolean,
default: false
},
x_router: {
type: Number,
default: 0
}
},
data: () => ({}),
mounted() {},
methods: {
bar() {
let self = this;
return {
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
},
formatter: function(params, ticket, callback) {
// console.log(params);
var res = params[0].name;
for (var i = 0, l = params.length; i < l; i++) {
res +=
"<br/>" +
params[i].seriesName +
" : " +
Math.abs(params[i].value);
}
setTimeout(function() {
// 仅为了模拟异步回调
callback(ticket, res);
}, 500);
return "loading...";
}
},
legend: {
data: ["设置警告值", "实际访问值"],
left: "right",
itemWidth: 10,
itemHeight: 10,
orient: "horizontal",
backgroundColor: "#f4f7fc"
},
color:self.colors,
grid: {
left: "1%",
right: "4%",
bottom: "3%",
containLabel: true
},
xAxis: [
{
axisLabel: {
formatter: function(value) {
return Math.abs(value); //显示的数值都取绝对值
}
},
type: "value",
axisTick: {
show: false
},
// splitLine: {
// show: false
// }
// splitArea: {
// show: true,
// areaStyle: {
// color: ["#fff", "#f8f9fd"],
// opacity: 0.5
// },
// interval: 0
// }
}
],
yAxis: [
{
type: "category",
axisTick: { show: false },
axisLabel: {
color: "#333",
textStyle: {
fontSize: 12
}
},
minInterval: 1,
data: self.data.title,
// splitLine: {
// show: false
// },
axisLine:{
show:false
}
}
],
series: [
{
name: "设置警告值",
type: "bar",
stack: "总量",
label: {
normal: {
show: false,
position: "right"
}
},
barWidth : 10,//柱图宽度
itemStyle: {
normal: {
color: function(params) {
return new graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: self.colors[1] // 0% 处的颜色
},
{
offset: 1,
color: self.colors[1] // 100% 处的颜色
}
],
false
);
},
barBorderRadius: self.bar_border_radius_two
}
},
data: self.data.dataOne
},
{
name: "实际访问值",
type: "bar",
stack: "总量",
label: {
normal: {
show: false,
position: "left",
formatter: function(v) {
return Math.abs(v.data);
}
}
},
barWidth : 10,//柱图宽度
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[0] // 100% 处的颜色
}
],
false
);
},
barBorderRadius: self.bar_border_radius
}
},
data: self.data.dataTwo
}
]
};
}
}
};
</script>
<style scoped>
.bar {
width: 100%;
height: 100%;
}
</style>
\ No newline at end of file
src/components/e-charts/gk-circle.vue 0 → 100644
View file @ b9635c01
<template>
<chart :options="dashboard()" class="dashboard" />
</template>
<script>
import { graphic } from "echarts/lib/export";
export default {
props: {
data: {
type: Object,
default: () => {
return {
data: 0,
text: ""
};
}
},
dangerousValue: {
type: String,
default: ""
},
is_word: {
type: Boolean,
default: false
}
},
data: () => ({}),
mounted() {},
methods: {
dashboard() {
let self = this;
return {
title: [
{
text: self.data.data + "{a|%}",
show: !self.is_word,
x: "center",
y: "30%",
textStyle: {
fontSize: 36,
fontWeight: "lighter",
color:
self.dangerousValue == "workplace" ? ["#0d1847"] : ["#67828c"],
rich: {
a: {
fontSize: 14,
padding: [0, 0, 4, 0]
}
}
}
},
{
text: self.data.text,
show: !self.is_word,
x: "center",
y: "58%",
textStyle: {
fontSize: 12,
fontWeight: "normal",
color: "#707693"
}
},
{
text: self.data.text,
show: self.is_word,
x: "center",
y: "75%",
textStyle: {
fontSize: 16,
fontWeight: "normal",
color: "#333"
}
},
{
text: self.data.data + "%",
show: self.is_word,
x: "center",
y: "center",
textStyle: {
fontSize: 22,
fontWeight: "normal",
color:
self.data.data > 75
? "#00beb2" //green
: self.data.data >= 50
? "#38aef9" //blue
: self.data.data > 25
? "#ff7200" //yellow
: "#da4251" //red
}
}
],
angleAxis: {
axisLine: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
},
axisTick: {
show: false
},
min: 0,
max: 138,
boundaryGap: ["0", "100"],
startAngle: 220,
endAngle: -40
},
radiusAxis: {
type: "category",
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
}
},
polar: {
radius: "110%"
},
series: [
{
type: "bar",
data: [, self.data.data],
coordinateSystem: "polar",
barMaxWidth: 10,
z: 1,
name: "B",
roundCap: true,
itemStyle: {
normal: {
color: new graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color:
self.dangerousValue == "high"
? self.data.data >= 80
? "#f7f1d5"
: "#d5f7e8"
: self.dangerousValue == "workplace"
? self.data.data >= 80
? "#f7f1d5"
: "#e6ebfe"
: self.data.data > 75
? "#d5f7e8"
: self.data.data >= 50
? "#e5f4fe"
: self.data.data > 25
? "#ffd98f"
: "#da4251"
},
{
offset: 1,
color:
self.dangerousValue == "high"
? self.data.data >= 80
? "#da4251" // red
: "#00beb2" //green
: self.dangerousValue == "workplace"
? self.data.data >= 80
? "#da4251"
: "#515fe7"
: self.data.data > 75
? "#00beb2" //green
: self.data.data >= 50
? "#38aef9" //blue
: self.data.data > 25
? "#ff7200" //yellow
: "#f7f1d5" //red
}
])
}
},
barGap: "-100%"
},
{
type: "bar",
data: [, 100],
z: 0,
silent: true,
coordinateSystem: "polar",
barMaxWidth: 10,
name: "C",
roundCap: true,
color: "#f4f4f5",
barGap: "-100%"
},
{
type: "gauge",
radius: "70%",
min: 0, //最小刻度
max: 100, //最大刻度
splitNumber: 10, //刻度数量
startAngle: 220,
endAngle: -40,
axisLabel: {
show: false
},
axisLine: {
show: true,
lineStyle: {
width: 1,
color: [[1, "rgba(0,0,0,0)"]]
}
}, //仪表盘轴线
axisLabel: {
show: false
}, //刻度标签。
axisTick: {
show: true,
splitNumber: 5,
lineStyle: {
color: "#c9cee0",
width: 1
},
length: 4
}, //刻度样式
splitLine: {
show: true,
length: 6,
lineStyle: {
color: "#c9cee0"
}
}, //分隔线样式
detail: {
show: false
},
pointer: {
show: false
}
},
{
name: "point",
type: "scatter",
coordinateSystem: "polar",
barGap: "-100%",
zlevel: 0,
symbol: "circle",
symbolSize: 6,
itemStyle: {
normal: {
show: true,
color: "#fff"
}
},
data: [, self.data.data]
}
]
};
}
}
};
</script>
<style scoped>
.dashboard {
width: 100%;
height: 100%;
}
</style>
\ No newline at end of file
src/components/e-charts/gkmultiple_circle.vue 0 → 100644
View file @ b9635c01
<template>
<div :id="yylx_asy" class="dashboard"></div>
</template>
<script>
import uuidv1 from "uuid/v1";
var echarts = require("echarts");
export default {
props: {
data: {
type: Array,
default: () => {
return [];
}
},
text: {
type: String,
default: ""
},
show_center_data: {
type: Boolean,
default: true
},
bar_width: {
type: Number,
default: 5
}
},
components: {},
data() {
return {
yylx_asy: uuidv1()
};
},
watch: {
data: {
handler() {
this.init_yylx_asy(this.data, this.text);
}
}
},
computed: {},
created() {},
mounted() {
this.init_yylx_asy(this.data, this.text);
},
methods: {
init_yylx_asy(data, text) {
var options = this.init_circle(data, text);
window[this.yylx_asy] = echarts.init(
document.getElementById(this.yylx_asy)
);
window[this.yylx_asy].setOption(options, true);
},
init_circle(data_val, text) {
// var data_val = data_val;
var rich = {
white: {
color: "#ddd",
align: "center",
padding: [3, 0]
}
};
var placeHolderStyle = {
normal: {
label: {
show: false
},
labelLine: {
show: false
},
color: "rgba(0, 0, 0, 0)",
borderColor: "rgba(0, 0, 0, 0)",
borderWidth: 0
}
};
var data = [];
var total = 0;
var color = ["#274fee","#e56600", "#25bdb1", "#ffc95c" , "#e15260"];
var legendarr = [];
var temp2_data = 0;
data_val.forEach(e => {
temp2_data = temp2_data + e.value;
});
for (var i = 0; i < data_val.length; i++) {
data.push(
{
value: data_val[i].value,
name: data_val[i].name,
itemStyle: {
normal: {
borderWidth: this.bar_width,
// shadowBlur: 20,
borderColor: color[i]
// shadowColor: color[i],
}
}
},
{
value: temp2_data / 30,
name: "",
itemStyle: placeHolderStyle
}
);
legendarr.push(data_val[i].name);
}
for (var i = 0; i < data_val.length; i++) {
total += data_val[i].value;
}
var seriesObj = [
{
name: "",
type: "pie",
clockWise: false,
radius: [65, 70],
center: ["50%", "50%"],
hoverAnimation: false,
itemStyle: {
normal: {
label: {
show: true,
position: "outside",
color: "#58617a",
formatter: params => {
if (params.name !== "") {
return params.value+'个'
} else {
return "";
}
},
rich: rich
}
}
},
data: data
}
];
var options = {
title: {
text: this.show_center_data ? total : "",
textStyle: {
color: "#000",
fontSize: 40,
fontWeight: 200
},
subtext: text,
subtextStyle: {
color: "#c9cedd"
},
itemGap: -10, // 主副标题距离
left: "center",
top: "center"
},
color: color,
tooltip: {
show: false
},
legend: {
bottom: -5,
left: "center",
itemWidth: 10,
itemHeight: 10,
orient: "horizontal",
data: legendarr,
backgroundColor: "#f4f7fc"
},
toolbox: {
show: false
},
series: seriesObj
};
return options;
}
}
};
</script>
<style scoped>
.dashboard {
width: 100%;
height: 100%;
}
</style>
src/components/e-charts/line_chart.vue
View file @ b9635c01
......@@ -25,14 +25,22 @@ export default {
};
}
},
showShadow:{
type:Boolean,
default:true
},
zzfw: {
type: Boolean,
default: false
},
targetValue: {
type: Number,
default: () => 0
},
area_flag:{
area_flag: {
type: Boolean,
default: true
},
}
},
components: {},
data() {
......@@ -61,6 +69,7 @@ export default {
"#8B5CFF",
"#00CA69"
];
let color2 = ["#515fe7", "#ef9433","#37c299"];
const hexToRgba = (hex, opacity) => {
let rgbaColor = "";
let reg = /^#[\da-f]{6}$/i;
......@@ -83,32 +92,40 @@ export default {
zlevel: 3,
lineStyle: {
normal: {
color: color[idx],
color: this.zzfw ? color2[idx] : color[idx],
shadowBlur: 5,
shadowColor: hexToRgba(color[idx], 0.5),
shadowColor: hexToRgba(this.zzfw ? color2[idx] : color[idx], 0.5),
shadowOffsetY: 10
}
},
areaStyle: {
normal: {
color:this.area_flag? new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: hexToRgba(color[idx], 0.3)
},
{
offset: 1,
color: hexToRgba(color[idx], 0.1)
}
],
false
):'rgba(0,0,0,0)',
shadowColor: hexToRgba(color[idx], 0.1),
color: !this.showShadow?'transparent':this.area_flag
? new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: hexToRgba(
this.zzfw ? color2[idx] : color[idx],
0.3
)
},
{
offset: 1,
color: hexToRgba(
this.zzfw ? color2[idx] : color[idx],
0.1
)
}
],
false
)
: "rgba(0,0,0,0)",
shadowColor: !this.showShadow?'none':hexToRgba(this.zzfw ? color2[idx] : color[idx], 0.1),
shadowBlur: 10
}
},
......@@ -123,9 +140,9 @@ export default {
var option = {
// backgroundColor: bgColor,
color: color,
color: this.zzfw ? color2 : color,
legend: {
show:yarr.length>=2,//是否显示图例
show: yarr.length >= 2, //是否显示图例
right: "center",
bottom: 0,
itemWidth: 10,
......@@ -148,7 +165,7 @@ export default {
left: 15,
right: 30,
bottom: 30,
containLabel: true,
containLabel: true
},
xAxis: [
{
......
src/components/e-charts/multiple_circle.vue
View file @ b9635c01
......@@ -24,6 +24,14 @@ export default {
bar_width: {
type: Number,
default: 5
},
isFwsp: {
type: Boolean,
default: false
},
isPercent: {
type: Boolean,
default: true
}
},
components: {},
......@@ -76,7 +84,8 @@ export default {
};
var data = [];
var total = 0;
var color = ["#274fee", "#25bdb1", "#ffc95c", "#e56600", "#e15260"];
var color = ["#274fee", "#f5ab4c", "#e15260", "#a9aec0", "#e56600"];
var color2 = ["#ef9433", "#515fe7"];
var legendarr = [];
var temp2_data = 0;
data_val.forEach(e => {
......@@ -91,7 +100,7 @@ export default {
normal: {
borderWidth: this.bar_width,
// shadowBlur: 20,
borderColor: color[i]
borderColor: this.isFwsp ? color2[i] : color[i]
// shadowColor: color[i],
}
}
......@@ -122,12 +131,23 @@ export default {
position: "outside",
color: "#58617a",
formatter: params => {
var percent = 0;
percent = total != 0 ? ((params.value / total) * 100).toFixed(2) : 0;
if (params.name !== "") {
return percent + "%";
if (this.isPercent) {
var percent = 0;
percent =
total != 0
? ((params.value / total) * 100).toFixed(2)
: 0;
if (params.name !== "") {
return percent + "%";
} else {
return "";
}
} else {
return "";
if (params.name !== "") {
return params.value + "个";
} else {
return "";
}
}
},
rich: rich
......@@ -153,7 +173,7 @@ export default {
left: "center",
top: "center"
},
color: color,
color: this.isFwsp ? color2 : color,
tooltip: {
show: false
},
......
src/components/e-charts/the-list.vue 0 → 100644
View file @ b9635c01
<template>
<div class="top_list apaas_scroll" @mouseenter="mouseenter" @mouseleave="mouseleave">
<ul>
<li class="item" v-for="(item ,idx) in data" :key="idx">
<span :class="idx==0?'one':idx==1?'two':idx==2?'three':'lis'" class="pm">{{idx+1}}.</span>
<img :src="item.img" alt />
<p class="name">{{item.name}}</p>
<p class="init">{{item.init}}</p>
<span class="count">{{getCount(item.count)}}次</span>
</li>
</ul>
</div>
</template>
<script>
export default {
props: {
data: {
type: Array,
default() {
return [
{
name: "123",
init: "122222",
count: 1080
}
];
}
}
},
data() {
return {};
},
methods: {
getCount(val) {
let a = val + "";
// console.log((val + "").length);
if (a.length > 3) {
return a.substr(0, 1) + "," + a.substr(1);
} else {
return a;
}
},
autoScroll() {
if (this.timer) {
clearInterval(this.timer);
}
this.$el.scrollTop = 0;
this.timer = setInterval(() => {
let itemHeight = 50;
let curScrollTop = this.$el.scrollTop + itemHeight;
if (
curScrollTop >=
this.$el.scrollHeight - this.$el.clientHeight + itemHeight
) {
curScrollTop = 0;
}
this.$el.scrollTop = Math.min(
curScrollTop,
this.$el.scrollHeight - this.$el.clientHeight
);
}, 1500);
},
mouseenter() {
if (this.timer) {
clearInterval(this.timer);
}
},
mouseleave() {
this.autoScroll();
}
},
mounted() {
this.autoScroll();
window.addEventListener("resize", () => {
this.autoScroll();
});
}
};
</script>
<style scoped>
.top_list {
overflow-x: hidden;
overflow-y: auto;
}
li {
list-style: none;
}
.item {
height: 50px;
position: relative;
}
.item img {
height: 35px;
width: 35px;
border-radius: 50%;
margin-left: 15px;
margin-top: 7px;
}
.item .pm {
width: 14px;
height: 12px;
font-family: Arial-Black;
font-style: italic;
font-stretch: normal;
letter-spacing: 0px;
font-weight: bold;
font-size: 20px;
float: left;
margin-top: 12px;
}
.one {
color: #d9ac64;
}
.two {
color: #c4c4c0;
}
.three {
color: #ba6e40;
}
.lis {
color: #333;
}
.item p {
display: inline-block;
}
.item .name {
position: absolute;
left: 85px;
}
.item .init {
position: absolute;
top: 25px;
left: 85px;
color: #8890a7;
}
.item .count {
float: right;
margin-right: 25px;
margin-top: 15px;
height: 19px;
font-family: ArialMT;
font-size: 22px;
font-weight: normal;
font-stretch: normal;
line-height: 17px;
letter-spacing: 0px;
color: #515fe7;
}
</style>
\ No newline at end of file
src/components/e-charts/toplist.vue
View file @ b9635c01
......@@ -11,14 +11,16 @@
<div class="item_detail">
<p class="item_info">
<span
v-if="isShowjt"
class="text_clip is_link"
@click="getDetail(option.service_id, option.data_service_type1)"
>
{{ option.service_name }}
<i class="el-icon-arrow-right"></i>
</span>
<span v-else>{{ option.service_name }}</span>
<span
v-text="helper.numberFormat(option.request_count, 2) + (option.request_count > 10000 ? '万次' : '次')"
v-text="isPercent?((option.request_count/targetValue)*100).toFixed(2)+'%':helper.numberFormat(option.request_count, 2) + (option.request_count > 10000 ? '万次' : '次')"
></span>
</p>
<el-progress
......@@ -44,6 +46,14 @@ export default {
targetValue: {
type: Number,
default: () => 0
},
isShowjt:{
type:Boolean,
default:true
},
isPercent:{
type:Boolean,
default:false
}
},
data() {
......@@ -75,11 +85,9 @@ export default {
this.timer = setInterval(() => {
let itemHeight = 50;
let curScrollTop = this.$el.scrollTop + itemHeight;
if (curScrollTop >= this.$el.scrollHeight - this.$el.clientHeight + itemHeight) {
curScrollTop = 0;
}
this.$el.scrollTop = Math.min(curScrollTop, this.$el.scrollHeight - this.$el.clientHeight);
}, 1500);
},
......
src/pages/data-analysis/my-application.vue
View file @ b9635c01
This diff is collapsed.
src/pages/data-analysis/my-service.vue
View file @ b9635c01
This diff is collapsed.
src/pages/data-analysis/service-control.vue
View file @ b9635c01
This diff is collapsed.
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