首页和资源监控
This commit is contained in:
康冉冉
@@ -36,7 +36,7 @@
|
||||
this.num = Math.floor(Math.random() * 9000);
|
||||
},
|
||||
mounted() {
|
||||
console.log('barData=',this.barData);
|
||||
// console.log('barData=',this.barData);
|
||||
if (this.barData && this.barData.hiddenTime) {
|
||||
this.getList(this.title,this.barData)
|
||||
}
|
||||
@@ -44,13 +44,20 @@
|
||||
methods: {
|
||||
getList(title, dataXY) {
|
||||
const barDataListIntance = echarts.init(document.getElementById('barChart' + this.num));
|
||||
let option = {
|
||||
title: [{
|
||||
let titleSet = {};
|
||||
if (dataXY && dataXY.titleVal) {
|
||||
titleSet = {
|
||||
text: title,
|
||||
x: '50%',
|
||||
y: '3%',
|
||||
textAlign: 'center',
|
||||
}],
|
||||
x: dataXY && dataXY.titleVal && dataXY.titleVal.x || '50%',
|
||||
y: dataXY && dataXY.titleVal && dataXY.titleVal.y || '3%',
|
||||
textAlign: dataXY && dataXY.titleVal && dataXY.titleVal.textAlign || 'center',
|
||||
textStyle: {
|
||||
fontSize: 14
|
||||
},
|
||||
};
|
||||
}
|
||||
let option = {
|
||||
title: [titleSet],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
@@ -58,7 +65,7 @@
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: '20%',
|
||||
top: dataXY && dataXY.gridTop || '20%',
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
@@ -66,17 +73,36 @@
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: dataXY.lineXData,
|
||||
axisTick: {
|
||||
type: dataXY && dataXY.yAxis ? 'value' :'category',
|
||||
data: dataXY && dataXY.yAxis ? [] : dataXY.lineData,
|
||||
// 去掉x轴线
|
||||
axisLine: { show: false },
|
||||
// 去掉x轴刻度线
|
||||
axisTick: { show: false },
|
||||
// 去掉X轴网格线（竖向网格）
|
||||
splitLine: { show: false },
|
||||
// x轴标签样式（保留标签便于阅读）
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '单位Mbps'
|
||||
type: dataXY && dataXY.yAxis ? 'category' :'value',
|
||||
name: dataXY.name || '单位Mbps',
|
||||
inverse: true,
|
||||
// 去掉y轴线
|
||||
axisLine: { show: false },
|
||||
// 去掉y轴刻度线
|
||||
axisTick: { show: false },
|
||||
// 去掉y轴网格线（横向网格）
|
||||
splitLine: { show: false },
|
||||
// Y轴标签样式（保留标签便于阅读）
|
||||
axisLabel: {
|
||||
show: true
|
||||
},
|
||||
data: dataXY && dataXY.yAxis ? dataXY.lineData : [],
|
||||
}
|
||||
],
|
||||
series: [
|
||||
@@ -84,7 +110,11 @@
|
||||
// name: 'Direct',
|
||||
type: 'bar',
|
||||
barWidth: '60%',
|
||||
data: dataXY.data
|
||||
data: dataXY.data,
|
||||
label: {
|
||||
show: dataXY && dataXY.seriesLabel || false,
|
||||
position: 'insideLeft',
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
@@ -96,7 +126,10 @@
|
||||
|
||||
dataChangeValue(val, days) {
|
||||
// console.log(props.chartData(val));
|
||||
this.getList(this.title, {data: this.barData.data, lineXData: days});
|
||||
// this.getList(this.title, {data: this.barData.data, lineData: days, yAxis: this.barData && this.barData.yAxis});
|
||||
let newbarData = {...this.barData};
|
||||
newbarData['lineData'] = days;
|
||||
this.getList(this.title, newbarData);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -35,70 +35,161 @@
|
||||
methods: {
|
||||
getList(dataList) {
|
||||
const pieDataListIntance = echarts.init(document.getElementById('pieChart' + this.num));
|
||||
let titleSet = {};
|
||||
if (dataList && dataList.titleVal) {
|
||||
titleSet = {
|
||||
show: dataList && dataList.titleVal && dataList.titleVal.show || false,
|
||||
text: dataList && dataList.titleVal && dataList.titleVal.title || '',
|
||||
x: dataList && dataList.titleVal && dataList.titleVal.x || '50%',
|
||||
y: dataList && dataList.titleVal && dataList.titleVal.y || '3%',
|
||||
textAlign: dataList && dataList.titleVal && dataList.titleVal.textAlign || 'center',
|
||||
textStyle: {
|
||||
fontSize: 14
|
||||
},
|
||||
};
|
||||
}
|
||||
let option = {
|
||||
title: titleSet,
|
||||
color: dataList.color,
|
||||
// title: [
|
||||
// {
|
||||
// text: `${dataList.centerVal}${dataList.unit}`,
|
||||
// left: "16%",
|
||||
// top: "43%",
|
||||
// textStyle: {
|
||||
// fontSize: 18,
|
||||
// fontWeight: "bold",
|
||||
// color: "#333",
|
||||
// },
|
||||
// }
|
||||
// ],
|
||||
legend: {
|
||||
// orient: 'vertical', // 垂直排列
|
||||
top: 'bottom', // 垂直居中
|
||||
// right: 1, // 距离右侧40px
|
||||
itemWidth: 12, // 图例标记宽度
|
||||
itemHeight: 12, // 图例标记高度
|
||||
itemGap: 20, // 图例项间距
|
||||
textStyle: {
|
||||
fontSize: 14,
|
||||
fontSize: 12,
|
||||
color: '#333'
|
||||
},
|
||||
formatter: function(name) {
|
||||
// 查找对应数据项
|
||||
const item = dataList.data.find(item => item.name === name);
|
||||
// 返回带数量的图例文本
|
||||
return `${name} ${item.value}${dataList.unit}`;
|
||||
}
|
||||
// formatter: function(name) {
|
||||
// // 查找对应数据项
|
||||
// const item = dataList.data.find(item => item.name === name);
|
||||
// // 返回带数量的图例文本
|
||||
// return `${name} ${item.value}${dataList.unit}`;
|
||||
// }
|
||||
},
|
||||
series: [{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: dataList && dataList.radius || ['40%', '70%'],
|
||||
// center: dataList && dataList.center || ['20%', '50%'],
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
normal: {
|
||||
show: true,
|
||||
position: 'center',
|
||||
color: '#333',
|
||||
fontSize: 16,
|
||||
formatter: function () {
|
||||
// let total = 0;
|
||||
// for (let i = 0; i < m2R2Data.length; i++) {
|
||||
// const val = parseFloat(m2R2Data[i].value);
|
||||
// if (!isNaN(val)) total += val;
|
||||
// }
|
||||
return `{value|${dataList.centerVal}}\n{unit|${dataList.lastVal}}`;
|
||||
},
|
||||
rich: {
|
||||
value: {
|
||||
fontSize: 24,
|
||||
fontFamily: 'HarmonyOS Sans SC',
|
||||
fontweight: 'bold',
|
||||
color: '#333',
|
||||
},
|
||||
unit: {
|
||||
fontFamily: 'HarmonyOS Sans SC',
|
||||
fontSize: 10,
|
||||
color: '#333',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
data: dataList.data
|
||||
}],
|
||||
graphic: [{
|
||||
type: 'text',
|
||||
left: 'center',
|
||||
top: 'middle',
|
||||
style: {
|
||||
text: `${dataList.centerVal}${dataList.unit}`,
|
||||
textBaseline: 'middle',
|
||||
textAlign: 'center',
|
||||
fontSize: 20,
|
||||
fill: '#333'
|
||||
}
|
||||
}],
|
||||
// graphic: [{
|
||||
// type: 'text',
|
||||
// left: 'center',
|
||||
// top: 'middle',
|
||||
// style: {
|
||||
// text: `${dataList.centerVal}\n${dataList.lastVal}`,
|
||||
// textBaseline: 'middle',
|
||||
// textAlign: 'center',
|
||||
// fontSize: 20,
|
||||
// fill: '#333'
|
||||
// }
|
||||
// }],
|
||||
};
|
||||
// let option = {
|
||||
// title: {
|
||||
// text: '{a|' + Math.round((dataList.value * 100) / dataList.total) + '%}\n{b|' + dataList.lastVal + '}', // 显示标题
|
||||
// show: true, // 是否显示
|
||||
// x: 'center', // x轴位置
|
||||
// y: 'center', // y轴位置
|
||||
// textStyle: { // 样式配置
|
||||
// rich: {
|
||||
// a: {
|
||||
// fontSize: 24, // 字体大小
|
||||
// color: '#333333', // 字体颜色
|
||||
// padding: [0, 0, 5, 0], // 边距
|
||||
// },
|
||||
// b: {
|
||||
// fontSize: 14, // 字体大小
|
||||
// color: '#808080', // 字体颜色
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// angleAxis: {
|
||||
// max: dataList.total,
|
||||
// clockwise: false, // 逆时针
|
||||
// // 隐藏刻度线
|
||||
// show: false,
|
||||
// // 开始的角度
|
||||
// startAngle: 180
|
||||
// },
|
||||
// radiusAxis: {
|
||||
// type: 'category',
|
||||
// show: true,
|
||||
// axisLabel: {
|
||||
// show: false, // 是否显示标签
|
||||
// },
|
||||
// axisLine: {
|
||||
// show: false, // 是否显示轴线
|
||||
// },
|
||||
// axisTick: {
|
||||
// show: false, // 是否显示刻度
|
||||
// },
|
||||
// },
|
||||
// polar: [
|
||||
// {
|
||||
// radius: ['54%', '66%'] //图形大小
|
||||
// }
|
||||
// ],
|
||||
// series: [
|
||||
// {
|
||||
// type: 'bar',
|
||||
// z: 10,
|
||||
// data: [dataList.value], // 数据
|
||||
// coordinateSystem: 'polar', // 坐标
|
||||
// roundCap: true, // 是否在环形柱条两侧使用圆弧效果
|
||||
// barWidth: 20, // 大的占比环
|
||||
// itemStyle: { // 图形样式
|
||||
// normal: {
|
||||
// color: "#2A91D9",
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// type: 'pie',
|
||||
// name: '内层细圆环',
|
||||
// radius: ['55%', '65%'], // 饼图的半径
|
||||
// hoverAnimation: false, // 悬浮突出
|
||||
// itemStyle: { // 图形样式
|
||||
// color: "#DFE0EF", // 颜色
|
||||
// },
|
||||
// label: {
|
||||
// show: false // 是否显示
|
||||
// },
|
||||
// data: [dataList.total]
|
||||
// }
|
||||
// ]
|
||||
// };
|
||||
pieDataListIntance.setOption(option);
|
||||
// window.addEventListener("resize", () => {
|
||||
// pieDataListIntance.resize()
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
</el-row>
|
||||
<!-- 表格数据 -->
|
||||
<el-table v-loading="loading" :data="tableList" ref="selChangeList" @selection-change="handleSelectionChange">
|
||||
<el-table-column v-if="!config.colHiddenCheck" type="selection" width="55" align="center" />
|
||||
<el-table-column v-if="!config && config.colHiddenCheck" type="selection" width="55" align="center" />
|
||||
<template v-for="(column, key, index) of columns">
|
||||
<el-table-column :label="column.label" :key="key" :prop="key" :width="column.width" min-width="100px" v-if="column && column.visible" align="center" :show-overflow-tooltip="true">
|
||||
<!-- 插槽 自定义列表表头数据格式 -->
|
||||
@@ -72,7 +72,9 @@
|
||||
},
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
default: () => ({
|
||||
colHiddenCheck: false
|
||||
})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
|
||||
Reference in New Issue
Block a user