monitor_v3 / anji-plus-report · Commits

Go to a project

Authored by 王涛
Commit 2cf4846227fd87f0bb430ff1fe5d1417d71a74dc 2 parents faba748b cc69a69c

Merge branch 'master-500-dev-lushangqing' into 'master-500-dev' 

自定义折现堆叠图-数据格式修改



See merge request !25
Inline Side-by-side
Showing 5 changed files with 153 additions and 30 deletions
... ... @@ -138,12 +138,16 @@ export default {
const ananysicData = {};
let xAxisList = [];
let series = [];
let kpiUnit='';
if(data && data[0]){
if(data[0].data.names && data[0].data.names.length>0){
xAxisList=data[0].data.names;
}else{
xAxisList=['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00']
}
if(data[0].data.kpiUnit){
kpiUnit=data[0].data.kpiUnit;
}
if(data[0].data.series && data[0].data.series.length>0){
series = data[0].data.series;
... ... @@ -156,6 +160,7 @@ export default {
}
ananysicData["xAxis"] = xAxisList;
ananysicData["series"] = series;
ananysicData["kpiUnit"] = kpiUnit;
return ananysicData;
},
// 柱状图、折线图、柱线图
... ... @@ -205,17 +210,40 @@ export default {
if(yAxisListNew && yAxisListNew.length>0){
yAxisListNew.map(item=>{
series.push({
name: item.name,
type: item.type,
data: item.data,
})
if(item.type=='bar'){
series.push({
name: item.name,
type: item.type,
data: item.data,
})
}else{
series.push({
name: item.flag,
type: 'line',
data: item.datas,
})
}
})
}
ananysicData["xAxis"] = xAxisList[0];
if(xAxisList[0]){
ananysicData["xAxis"] = xAxisList[0];
}else{
ananysicData["xAxis"] = newData.data.names;
}
ananysicData["series"] = series;
ananysicData["kpiMap"] = newData.kpiMap;
if(newData.kpiMap){
ananysicData["kpiMap"] = newData.kpiMap;
}
if(newData.kpiUnit){
ananysicData["kpiUnit"] = newData.kpiUnit;
}else if(newData.data){
ananysicData["kpiUnit"] = newData.data.kpiUnit;
}else{
ananysicData["kpiUnit"] = '';
}
return ananysicData;
},
//堆叠图
... ...
... ... @@ -38,6 +38,21 @@ export const monitorCustomLineStack = {
placeholder: '',
value: ''
},
{
type: 'el-select',
label: 'kpiId',
name: 'kpiId',
required: false,
placeholder: '',
selectOptions: [
{code: 'KPI449F5365', name: 'KPI449F5365(文件系统使用率)'},
{code: 'KPI97373ED0', name: 'KPI97373ED0(磁盘IO读速率)'},
{code: 'KPI95378FE0', name: 'KPI95378FE0(磁盘IO写速率)'},
{code: 'KPI66BD013F', name: 'KPI66BD013F(磁盘IO处理时间)'},
{code: 'KPI3E6ED38B', name: 'KPI3E6ED38B(磁盘IO响应时间)'}
],
value: 'KPI449F5365',
},
[
{
name: '折线设置',
... ... @@ -56,7 +71,7 @@ export const monitorCustomLineStack = {
name: 'pointSize',
required: false,
placeholder: '',
value: 5,
value: 6,
},
{
type: 'el-switch',
... ... @@ -88,7 +103,7 @@ export const monitorCustomLineStack = {
name: 'lineWidth',
required: false,
placeholder: '',
value: 4,
value: 1,
},
],
},
... ... @@ -109,7 +124,7 @@ export const monitorCustomLineStack = {
name: 'titleText',
required: false,
placeholder: '',
value: '',
value: '文件系统使用率',
},
{
type: 'vue-color',
... ... @@ -117,7 +132,7 @@ export const monitorCustomLineStack = {
name: 'textColor',
required: false,
placeholder: '',
value: '#FFD700'
value: '#1e9fff'
},
{
type: 'el-select',
... ... @@ -131,7 +146,7 @@ export const monitorCustomLineStack = {
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
value: 'bold'
},
{
type: 'el-input-number',
... ... @@ -139,7 +154,7 @@ export const monitorCustomLineStack = {
name: 'textFontSize',
required: false,
placeholder: '',
value: 20
value: 16
},
{
type: 'el-select',
... ... @@ -152,7 +167,7 @@ export const monitorCustomLineStack = {
{code: 'left', name: '左对齐'},
{code: 'right', name: '右对齐'},
],
value: 'center'
value: 'left'
},
{
type: 'el-input-text',
... ... @@ -259,7 +274,7 @@ export const monitorCustomLineStack = {
name: 'Xcolor',
required: false,
placeholder: '',
value: '#fff',
value: '#666',
},
{
type: 'el-input-number',
... ... @@ -275,7 +290,7 @@ export const monitorCustomLineStack = {
name: 'lineColorX',
required: false,
placeholder: '',
value: '#fff',
value: '#c9c9c9',
},
{
type: 'el-switch',
... ... @@ -293,7 +308,23 @@ export const monitorCustomLineStack = {
placeholder: '',
value: '#fff',
}
},
{
type: 'el-switch',
label: '分割区显示',
name: 'splitArea',
require: false,
placeholder: '',
value: true,
},
{
type: 'vue-color',
label: '分割区颜色',
name: 'splitAreaColor',
required: false,
placeholder: '',
value: 'rgba(200,200,200,0.1)',
},
],
},
{
... ... @@ -353,7 +384,7 @@ export const monitorCustomLineStack = {
name: 'colorY',
required: false,
placeholder: '',
value: '#fff',
value: '#666',
},
{
type: 'el-input-number',
... ... @@ -369,7 +400,7 @@ export const monitorCustomLineStack = {
name: 'lineColorY',
required: false,
placeholder: '',
value: '#fff',
value: '#c9c9c9',
}, {
type: 'el-switch',
label: '分割线显示',
... ... @@ -413,7 +444,7 @@ export const monitorCustomLineStack = {
name: 'subTextColor',
required: false,
placeholder: '',
value: '#fff'
value: '#666'
},
{
type: 'el-select',
... ... @@ -497,12 +528,20 @@ export const monitorCustomLineStack = {
value: true,
},
{
type: 'el-switch',
label: '图例文字显示',
name: 'isShowLegendText',
required: false,
placeholder: '',
value: false,
},
{
type: 'vue-color',
label: '字体颜色',
name: 'lengedColor',
required: false,
placeholder: '',
value: '#fff',
value: '#666',
},
{
type: 'el-input-number',
... ... @@ -510,7 +549,7 @@ export const monitorCustomLineStack = {
name: 'lengedFontSize',
required: false,
placeholder: '',
value: 16,
value: 14,
},
{
type: 'el-input-number',
... ... @@ -567,7 +606,8 @@ export const monitorCustomLineStack = {
label: '',
name: 'customColor',
required: false,
value: [{color: '#ff7f50'}, {color: '#87cefa'}, {color: '#da70d6'}, {color: '#32cd32'}, {color: '#6495ed'}],
value: [{color: '#facf5b'}, {color: '#C04DD8'}, {color: '#F5A1EB'}, {color: '#F36093'},
{color: '#C2E74D'},{color:'#3DC3FF'},{color:'#B850ED'}],
},
],
},
... ... @@ -626,7 +666,7 @@ export const monitorCustomLineStack = {
placeholder: '',
relactiveDom: 'dataType',
relactiveDomValue: 'dynamicData',
chartType: 'widget-stackchart',
chartType: 'monitor-stackchart',
dictKey: 'STACK_PROPERTIES',
value: '',
},
... ...
... ... @@ -89,7 +89,8 @@ export default {
optionsStyle: {}, // 样式
optionsData: {}, // 数据
optionsCollapse: {}, // 图标属性
optionsSetup: {}
optionsSetup: {},
kpiUnit:'',//单位
};
},
computed: {
... ... @@ -312,6 +313,7 @@ export default {
// tooltip 设置
setOptionsTooltip() {
const optionsSetup = this.optionsSetup;
let that=this;
const tooltip = {
trigger: "axis",
show: true,
... ... @@ -321,7 +323,7 @@ export default {
},
formatter:function (param) {
let kpiName=optionsSetup.titleText;
let kpiUnit='';
let kpiUnit=that.kpiUnit;
// 鼠标悬浮线上提示
// 顶部提示
let tips = '<table>';
... ... @@ -436,6 +438,7 @@ export default {
});
},
renderingFn(val) {
this.kpiUnit=val.kpiUnit;
// x轴
this.options.xAxis.data = val.xAxis;
// series
... ...
... ... @@ -56,7 +56,8 @@ export default {
optionsStyle: {}, // 样式
optionsData: {}, // 数据
optionsSetup: {},
flagInter: null
flagInter: null,
kpiUnit:'',//单位
};
},
computed: {
... ... @@ -154,6 +155,14 @@ export default {
lineStyle: {
color: optionsSetup.splitLineColorX
}
},
boundaryGap: ['10%', '10%'],
splitArea: {
show: optionsSetup.splitArea,
areaStyle: {
color: [optionsSetup.splitAreaColor, 'transparent'
]
}
}
};
this.options.xAxis = xAxis;
... ... @@ -211,12 +220,39 @@ export default {
// tooltip 提示语设置，鼠标放置显示
setOptionsTooltip() {
const optionsSetup = this.optionsSetup;
let that=this;
const tooltip = {
trigger: "item",
trigger: "axis",
show: true,
textStyle: {
color: optionsSetup.lineColor,
fontSize: optionsSetup.tipsFontSize
fontSize: optionsSetup.tipsFontSize,
},
formatter:function (param) {
let kpiName=optionsSetup.titleText;
let kpiUnit=that.kpiUnit;
// 鼠标悬浮线上提示
// 顶部提示
var tips = '<table>';
if (param.length == 1) {
tips += "<tr><td colspan='4'>" + param[0].name + "</td></tr>";
} else {
tips += "<tr><td colspan='4'>" + kpiName + " " + param[0].name + "</td></tr>";
}
// 每一条提示
$.each(param, function (i, v) {
tips += "<tr><td>" + v.marker + "</td>";
tips += '<td>';
if (param.length == 1) {
tips += (kpiName + ' ');
}
tips += (v.seriesName && v.seriesName != '1' && !/series[0-9]+/.test(v.seriesName)) ? v.seriesName : '';
tips += '</td>'
tips += "<td>:&nbsp;</td><td>" + v.value;
tips += (kpiUnit == '%' ? kpiUnit : (' ' + kpiUnit)) + "</td></tr>";
});
tips += '</table>'
return tips;
}
};
this.options.tooltip = tooltip;
... ... @@ -239,7 +275,7 @@ export default {
const legend = this.options.legend;
legend.show = optionsSetup.isShowLegend;
legend.left = optionsSetup.lateralPosition;
legend.top = optionsSetup.longitudinalPosition == "top" ? 0 : "auto";
legend.top = optionsSetup.longitudinalPosition == "top" ? 20 : "auto";
legend.bottom =
optionsSetup.longitudinalPosition == "bottom" ? 0 : "auto";
legend.orient = optionsSetup.layoutFront;
... ... @@ -248,6 +284,20 @@ export default {
fontSize: optionsSetup.lengedFontSize
};
legend.itemWidth = optionsSetup.lengedWidth;
if(!optionsSetup.isShowLegendText){
legend.formatter= function (name) {
return '';
}
}else{
legend.formatter= function (name) {
return name;
}
}
legend.icon= 'circle';
legend.tooltip= {
show: true
}
},
// 图例颜色修改
setOptionsColor() {
... ... @@ -373,6 +423,7 @@ export default {
});
},
renderingFn(optionsSetup, val) {
this.kpiUnit=val.kpiUnit;
//颜色
const customColor = optionsSetup.customColor;
const arrColor = [];
... ...
... ... @@ -31,6 +31,7 @@
</template>
<script>
import echarts from "echarts";
import customMenuBox from "../../designerComponents/customMenuBox";//下探组件
import customDialog from "../../designerComponents/customDialog";
import {getTrendBaseUrl} from "@/api/platform";
... ...