monitor_v3 / anji-plus-report · Commits

Go to a project

Authored by 王涛
Commit 19895b893a7cfd705b6c307306aac443a0b8f50e 2 parents c0e7a9fb 50ee82f6 master ... master-500-dev master-500-dev-LH master-500-dev-lushangqing master-500-dev-lzc master-500-prod master-ajreport-XuHaoJie master-ajreport-lushangqing master-mj master-mj-joke master-prod master_AjReport_LH

Merge branch 'master-ajreport-lushangqing' into 'master' 

使用率接口录入数据集，自定义折线图，更改折线图接口接收到的数据处理



See merge request !19
Inline Side-by-side
Showing 8 changed files with 1185 additions and 20 deletions
... ... @@ -98,6 +98,7 @@ export default {
return new Promise(async (resolve) => {
const {code, data} = await getData(params);
if (code != 200) return
console.log(")))",data)
const analysisData = this.analysisChartsData(params, data);
resolve(analysisData)
})
... ... @@ -125,10 +126,37 @@ export default {
return this.widgettext(params.chartProperties, data)
} else if (chartType == "widget-stackchart") {
return this.stackChartFn(params.chartProperties, data)
}else if(chartType == "custom-linechart"){
return this.barOrLineChartFnCustom(params.chartProperties, data);
} else {
return data
}
},
// 柱状图、折线图、柱线图-自定义 // Start LSQ 2022/2/21
barOrLineChartFnCustom(chartProperties, data) {
const ananysicData = {};
let xAxisList = [];
let series = [];
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.series && data[0].data.series.length>0){
series = data[0].data.series;
}else{
series = [{
name: "",
datas: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
}];
}
}
ananysicData["xAxis"] = xAxisList;
ananysicData["series"] = series;
return ananysicData;
},
// 柱状图、折线图、柱线图
barOrLineChartFn(chartProperties, data) {
const ananysicData = {};
... ...
... ... @@ -40,7 +40,7 @@ export const monitorBgBorder = {
name: 'borderColor',
required: false,
placeholder: '',
value: '#dddddd',
value: 'rgba(151, 151, 151, 0.13)',
},
{
type: 'vue-color',
... ...
/*
* @Descripttion: 折线图json
* @version:
* @Author: lsq
* @Date: 2022/2/21 9:51
* @LastEditors: lsq
* @LastEditTime: 2022/2/21 9:52
*/
export const monitorCustomLineChart = {
code: 'monitor-custom-line-chart',
type: 'chart',
label: '速率/使用率折线图',
icon: 'icontubiaozhexiantu',
options: {
// 配置
setup: [
{
type: 'el-input-text',
label: '图层名称',
name: 'layerName',
required: false,
placeholder: '',
value: '折线图',
},
{
type: 'vue-color',
label: '背景颜色',
name: 'background',
required: false,
placeholder: '',
value: ''
},
{
type: 'el-select',
label: 'kpiId',
name: 'kpiId',
required: false,
placeholder: '',
selectOptions: [
{code: 'KPID339D51B', name: 'KPID339D51B(网卡上行速率)'},
{code: 'KPI02062F43', name: 'KPI02062F43(网卡下行速率)'},
{code: 'KPI7054BC34', name: 'KPI7054BC34(CPU使用率走势)'},
{code: 'KPI31CB8D97', name: 'KPI31CB8D97(内存使用率走势)'},
{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: 'KPID339D51B',
},
[
{
name: '折线设置',
list: [
{
type: 'el-switch',
label: '标记点',
name: 'markPoint',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-slider',
label: '点大小',
name: 'pointSize',
required: false,
placeholder: '',
value: 10,
},
{
type: 'vue-color',
label: '点颜色',
name: 'itemStyleColor',
required: false,
placeholder: '',
value: '#2883d0'
},
{
type: 'el-switch',
label: '平滑曲线',
name: 'smoothCurve',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-switch',
label: '面积堆积',
name: 'area',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-slider',
label: '面积厚度',
name: 'areaThickness',
required: false,
placeholder: '',
value: 5,
},
{
type: 'el-slider',
label: '线条宽度',
name: 'lineWidth',
required: false,
placeholder: '',
value: 4,
},
],
},
{
name: '标题设置',
list: [
{
type: 'el-switch',
label: '标题',
name: 'isNoTitle',
required: false,
placeholder: '',
value: true
},
{
type: 'el-input-text',
label: '标题',
name: 'titleText',
required: false,
placeholder: '',
value: '网卡上行速率',
},
{
type: 'vue-color',
label: '字体颜色',
name: 'textColor',
required: false,
placeholder: '',
value: '#1e9fff'
},
{
type: 'el-select',
label: '字体粗细',
name: 'textFontWeight',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
{
type: 'el-input-number',
label: '字体字号',
name: 'textFontSize',
required: false,
placeholder: '',
value: 16
},
{
type: 'el-select',
label: '字体位置',
name: 'textAlign',
required: false,
placeholder: '',
selectOptions: [
{code: 'center', name: '居中'},
{code: 'left', name: '左对齐'},
{code: 'right', name: '右对齐'},
],
value: 'left'
},
{
type: 'el-input-text',
label: '副标题',
name: 'subText',
required: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '字体颜色',
name: 'subTextColor',
required: false,
placeholder: '',
value: '#fff'
},
{
type: 'el-select',
label: '字体粗细',
name: 'subTextFontWeight',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
{
type: 'el-input-number',
label: '字体字号',
name: 'subTextFontSize',
required: false,
placeholder: '',
value: 20
},
],
},
{
name: 'X轴设置',
list: [
{
type: 'el-switch',
label: '显示',
name: 'hideX',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-input-text',
label: '坐标名',
name: 'xName',
required: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '坐标名颜色',
name: 'nameColorX',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '坐标字号',
name: 'nameFontSizeX',
required: false,
placeholder: '',
value: 14,
},
{
type: 'vue-color',
label: '数值颜色',
name: 'Xcolor',
required: false,
placeholder: '',
value: '#666',
},
{
type: 'el-input-number',
label: '数值字号',
name: 'fontSizeX',
required: false,
placeholder: '',
value: 14,
},
{
type: 'el-slider',
label: '数值角度',
name: 'textAngle',
required: false,
placeholder: '',
value: 0
},
{
type: 'el-input-number',
label: '数值间隔',
name: 'textInterval',
required: false,
placeholder: '',
value: 1
},
{
type: 'el-switch',
label: '轴反转',
name: 'reversalX',
required: false,
placeholder: '',
value: false
},
{
type: 'vue-color',
label: '轴颜色',
name: 'lineColorX',
required: false,
placeholder: '',
value: '#c9c9c9',
},
{
type: 'el-switch',
label: '分割线显示',
name: 'isShowSplitLineX',
require: false,
placeholder: '',
value: false,
},
{
type: 'vue-color',
label: '分割线颜色',
name: 'splitLineColorX',
required: false,
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)',
},
],
},
{
name: 'Y轴设置',
list: [
{
type: 'el-switch',
label: '显示',
name: 'isShowY',
require: false,
placeholder: '',
value: true,
},
{
type: 'el-input-text',
label: '坐标名',
name: 'textNameY',
require: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '坐标名颜色',
name: 'nameColorY',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '坐标字号',
name: 'namefontSizeY',
required: false,
placeholder: '',
value: 14,
},
{
type: 'vue-color',
label: '数值颜色',
name: 'colorY',
required: false,
placeholder: '',
value: '#666',
},
{
type: 'el-input-number',
label: '数值字号',
name: 'fontSizeY',
required: false,
placeholder: '',
value: 14,
},
{
type: 'el-slider',
label: '数值角度',
name: 'ytextAngle',
required: false,
placeholder: '',
value: 0
},
{
type: 'el-switch',
label: '缩放',
name: 'scale',
require: false,
placeholder: '',
value: false,
},
{
type: 'el-input-number',
label: '均分',
name: 'splitNumber',
required: false,
placeholder: '',
value: ''
},
{
type: 'el-switch',
label: '轴反转',
name: 'reversalY',
required: false,
placeholder: '',
value: false
},
{
type: 'vue-color',
label: '轴颜色',
name: 'lineColorY',
required: false,
placeholder: '',
value: '#c9c9c9',
},
{
type: 'el-switch',
label: '分割线显示',
name: 'isShowSplitLineY',
require: false,
placeholder: '',
value: true,
},
{
type: 'vue-color',
label: '分割线颜色',
name: 'splitLineColorY',
required: false,
placeholder: '',
value: '#c9c9c9',
}
],
},
{
name: '数值设定',
list: [
{
type: 'el-switch',
label: '显示',
name: 'isShow',
required: false,
placeholder: '',
value: false
},
{
type: 'el-input-number',
label: '字体大小',
name: 'fontSize',
required: false,
placeholder: '',
value: 12
},
{
type: 'vue-color',
label: '字体颜色',
name: 'subTextColor',
required: false,
placeholder: '',
value: '#fff'
},
{
type: 'el-select',
label: '字体粗细',
name: 'fontWeight',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
],
},
{
name: '提示语设置',
list: [
{
type: 'el-input-text',
label: '字体大小',
name: 'fontSize',
required: false,
placeholder: '',
value: '14'
},
{
type: 'vue-color',
label: '字体颜色',
name: 'lineColor',
required: false,
placeholder: '',
value: '#fff'
},
],
},
{
name: '坐标轴边距设置',
list: [
{
type: 'el-slider',
label: '左边距(像素)',
name: 'marginLeft',
required: false,
placeholder: '',
value: 10,
},
{
type: 'el-slider',
label: '顶边距(像素)',
name: 'marginTop',
required: false,
placeholder: '',
value: 50,
},
{
type: 'el-slider',
label: '右边距(像素)',
name: 'marginRight',
required: false,
placeholder: '',
value: 40,
},
{
type: 'el-slider',
label: '底边距(像素)',
name: 'marginBottom',
required: false,
placeholder: '',
value: 10,
},
],
},
{
name: '图例操作',
list: [
{
type: 'el-switch',
label: '图例',
name: 'isShowLegend',
required: false,
placeholder: '',
value: true,
},
{
type: 'vue-color',
label: '字体颜色',
name: 'lengedColor',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '字体大小',
name: 'lengedFontSize',
required: false,
placeholder: '',
value: 16,
},
{
type: 'el-input-number',
label: '图例宽度',
name: 'lengedWidth',
required: false,
placeholder: '',
value: 15,
},
{
type: 'el-select',
label: '横向位置',
name: 'lateralPosition',
required: false,
placeholder: '',
selectOptions: [
{code: 'left', name: '左对齐'},
{code: 'right', name: '右对齐'},
],
value: 'left'
},
{
type: 'el-select',
label: '纵向位置',
name: 'longitudinalPosition',
required: false,
placeholder: '',
selectOptions: [
{code: 'top', name: '顶部'},
{code: 'bottom', name: '底部'},
],
value: ''
},
{
type: 'el-select',
label: '布局前置',
name: 'layoutFront',
required: false,
placeholder: '',
selectOptions: [
{code: 'vertical', name: '竖排'},
{code: 'horizontal', name: '横排'},
],
value: ''
},
],
},
{
name: '自定义配色',
list: [
{
type: 'customColor',
label: '',
name: 'customColor',
required: false,
value: [{color: '#1E90FF'}],
},
],
},
],
],
// 数据
data: [
{
type: 'el-radio-group',
label: '数据类型',
name: 'dataType',
require: false,
placeholder: '',
selectValue: true,
selectOptions: [
{
code: 'staticData',
name: '静态数据',
},
{
code: 'dynamicData',
name: '动态数据',
},
],
value: 'staticData',
},
{
type: 'el-input-number',
label: '刷新时间(毫秒)',
name: 'refreshTime',
relactiveDom: 'dataType',
relactiveDomValue: 'dynamicData',
value: 5000
},
{
type: 'el-button',
label: '静态数据',
name: 'staticData',
required: false,
placeholder: '',
relactiveDom: 'dataType',
relactiveDomValue: 'staticData',
value: [
{"axis": "苹果", "data": 1000},
{"axis": "三星", "data": 2229},
{"axis": "小米", "data": 3879},
{"axis": "oppo", "data": 2379},
{"axis": "vivo", "data": 4079},
],
},
{
type: 'dycustComponents',
label: '',
name: 'dynamicData',
required: false,
placeholder: '',
relactiveDom: 'dataType',
chartType: 'custom-linechart',
dictKey: 'LINE_PROPERTIES',
relactiveDomValue: 'dynamicData',
},
],
// 坐标
position: [
{
type: 'el-input-number',
label: '左边距',
name: 'left',
required: false,
placeholder: '',
value: 0,
},
{
type: 'el-input-number',
label: '上边距',
name: 'top',
required: false,
placeholder: '',
value: 0,
},
{
type: 'el-input-number',
label: '宽度',
name: 'width',
required: false,
placeholder: '该容器在1920px大屏中的宽度',
value: 400,
},
{
type: 'el-input-number',
label: '高度',
name: 'height',
required: false,
placeholder: '该容器在1080px大屏中的高度',
value: 200,
},
],
}
}
... ...
... ... @@ -58,9 +58,9 @@ export const monitorGaugeRate = {
required: false,
placeholder: '',
selectOptions: [
{code: 'KPI7054BC34', name: 'KPI7054BC34'},
{code: 'KPI31CB8D97', name: 'KPI31CB8D97'},
{code: 'KPI20352505', name: 'KPI20352505'},
{code: 'KPI7054BC34', name: 'KPI7054BC34(cpu使用率)'},
{code: 'KPI31CB8D97', name: 'KPI31CB8D97(内存使用率)'},
{code: 'KPI20352505', name: 'KPI20352505(虚拟内存)'},
],
value: 'KPI7054BC34',
},
... ... @@ -169,7 +169,7 @@ export const monitorGaugeRate = {
name: 'pieWeight',
require: false,
placeholder: '',
value: 10,
value: 30,
},
]
},
... ... @@ -182,7 +182,7 @@ export const monitorGaugeRate = {
name: 'color30p0',
required: false,
placeholder: '',
value: 'rgba(0, 237, 3,0.1)'
value: 'rgba(255, 121, 93, 1)'
},
{
type: 'vue-color',
... ... @@ -190,7 +190,7 @@ export const monitorGaugeRate = {
name: 'color30p5',
required: false,
placeholder: '',
value: 'rgba(0, 237, 3,0.6)'
value: 'rgba(255, 121, 93, 1)'
},
{
type: 'vue-color',
... ... @@ -198,7 +198,7 @@ export const monitorGaugeRate = {
name: 'color30p10',
required: false,
placeholder: '',
value: 'rgba(0, 237, 3,1)'
value: 'rgba(255, 121, 93, 1)'
},
]
},
... ... @@ -211,7 +211,7 @@ export const monitorGaugeRate = {
name: 'color70p0',
required: false,
placeholder: '',
value: 'rgba(255, 184, 0,0.1)'
value: 'rgba(255, 121, 93, 1)'
},
{
type: 'vue-color',
... ... @@ -219,7 +219,7 @@ export const monitorGaugeRate = {
name: 'color70p5',
required: false,
placeholder: '',
value: 'rgba(255, 184, 0,0.6)'
value: 'rgba(255, 121, 93, 1)'
},
{
type: 'vue-color',
... ... @@ -227,7 +227,7 @@ export const monitorGaugeRate = {
name: 'color70p10',
required: false,
placeholder: '',
value: 'rgba(255, 184, 0,1)'
value: 'rgba(255, 121, 93, 1)'
},
]
},
... ... @@ -240,7 +240,7 @@ export const monitorGaugeRate = {
name: 'color100p0',
required: false,
placeholder: '',
value: 'rgba(175, 36, 74,0.1)'
value: 'rgba(255, 121, 93, 1)'
},
{
type: 'vue-color',
... ... @@ -248,7 +248,7 @@ export const monitorGaugeRate = {
name: 'color100p5',
required: false,
placeholder: '',
value: 'rgba(255, 36, 74,0.6)'
value: 'rgba(255, 121, 93, 1)'
},
{
type: 'vue-color',
... ... @@ -256,7 +256,7 @@ export const monitorGaugeRate = {
name: 'color100p10',
required: false,
placeholder: '',
value: 'rgba(255, 36, 74,1)'
value: 'rgba(255, 121, 93, 1)'
},
]
},
... ... @@ -269,7 +269,7 @@ export const monitorGaugeRate = {
name: 'tickShow',
required: false,
placeholder: '',
value: true,
value: false,
},
{
type: 'el-input-number',
... ... @@ -306,7 +306,7 @@ export const monitorGaugeRate = {
name: 'splitShow',
required: false,
placeholder: '',
value: true,
value: false,
},
{
type: 'el-input-number',
... ... @@ -380,7 +380,7 @@ export const monitorGaugeRate = {
name: 'labelColor',
required: false,
placeholder: '',
value: '#fff',
value: 'rgba(18, 18, 18, 1)',
},
{
type: 'el-input-number',
... ...
... ... @@ -40,6 +40,7 @@ import {monitorBasicInformation} from "./echartsConfigJson/monitorConfigJson/mon
import {monitorDetailTable} from "./echartsConfigJson/monitorConfigJson/monitor-detail-table";
import {monitorBgBorder} from "./echartsConfigJson/monitorConfigJson/monitor-bg-border";
import {monitorGaugeRate} from "./echartsConfigJson/monitorConfigJson/monitor-gauge-rate";
import {monitorCustomLineChart} from "./echartsConfigJson/monitorConfigJson/monitor-custom-line-chart";
export const {widgetTool,monitor} = {
... ... @@ -78,6 +79,7 @@ export const {widgetTool,monitor} = {
monitorBasicInformation,
monitorDetailTable,
monitorBgBorder,
monitorGaugeRate
monitorGaugeRate,
monitorCustomLineChart
]
}
... ...
<template>
<div :style="styleObj">
<v-chart :options="options" autoresize/>
</div>
</template>
<script>
export default {
name: "customLineChart",
components: {},
props: {
value: Object,
ispreview: Boolean
},
data() {
return {
options: {
grid: {},
color: [],
title: {
text: "",
textStyle: {
color: "#fff"
}
},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c}%"
},
legend: {
textStyle: {
color: "#fff"
}
},
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
axisLabel: {
show: true,
textStyle: {
color: "#fff"
}
}
},
yAxis: {
type: "value",
axisLabel: {
show: true,
textStyle: {
color: "#fff"
}
}
},
series: [
{
data: [],
type: "line"
}
]
},
optionsStyle: {}, // 样式
optionsData: {}, // 数据
optionsCollapse: {}, // 图标属性
optionsSetup: {}
};
},
computed: {
styleObj() {
return {
position: this.ispreview ? "absolute" : "static",
width: this.optionsStyle.width + "px",
height: this.optionsStyle.height + "px",
left: this.optionsStyle.left + "px",
top: this.optionsStyle.top + "px",
background: this.optionsSetup.background
};
}
},
watch: {
value: {
handler(val) {
this.optionsStyle = val.position;
this.optionsData = val.data;
this.optionsCollapse = val.collapse;
this.optionsSetup = val.setup;
this.editorOptions();
},
deep: true
}
},
created() {
this.optionsStyle = this.value.position;
this.optionsData = this.value.data;
this.optionsCollapse = this.value.collapse;
this.optionsSetup = this.value.setup;
this.editorOptions();
},
methods: {
// 修改图标options属性
editorOptions() {
this.setOptionsTitle();
this.setOptionsX();
this.setOptionsY();
this.setOptionsTop();
this.setOptionsTooltip();
this.setOptionsData();
this.setOptionsMargin();
this.setOptionsLegend();
this.setOptionsColor();
},
// 标题修改
setOptionsTitle() {
const optionsSetup = this.optionsSetup;
const title = {};
title.text = optionsSetup.titleText;
title.show = optionsSetup.isNoTitle;
title.left = optionsSetup.textAlign;
title.textStyle = {
color: optionsSetup.textColor,
fontSize: optionsSetup.textFontSize,
fontWeight: optionsSetup.textFontWeight
};
title.subtext = optionsSetup.subText;
title.subtextStyle = {
color: optionsSetup.subTextColor,
fontWeight: optionsSetup.subTextFontWeight,
fontSize: optionsSetup.subTextFontSize
};
title.top='8px';
title.left='8px';
this.options.title = title;
},
// X轴设置
setOptionsX() {
const optionsSetup = this.optionsSetup;
const xAxis = {
type: "category",
show: optionsSetup.hideX, // 坐标轴是否显示
name: optionsSetup.xName, // 坐标轴名称
nameTextStyle: {
color: optionsSetup.nameColorX,
fontSize: optionsSetup.nameFontSizeX
},
nameRotate: optionsSetup.textAngle, // 文字角度
inverse: optionsSetup.reversalX, // 轴反转
axisLabel: {
show: true,
interval: optionsSetup.textInterval, // 文字间隔
rotate: optionsSetup.textAngle, // 文字角度
textStyle: {
color: optionsSetup.Xcolor, // x轴 坐标文字颜色
fontSize: optionsSetup.fontSizeX
}
},
axisLine: {
show: true,
lineStyle: {
color: optionsSetup.lineColorX
}
},
splitLine: {
show: optionsSetup.isShowSplitLineX,
lineStyle: {
color: optionsSetup.splitLineColorX
}
},
scale: true,
boundaryGap: ['10%', '10%'],
splitArea: {
show: optionsSetup.splitArea,
areaStyle: {
color: [optionsSetup.splitAreaColor, 'transparent'
]
}
}
};
this.options.xAxis = xAxis;
},
// Y轴设置
setOptionsY() {
const optionsSetup = this.optionsSetup;
const yAxis = {
type: "value",
scale: optionsSetup.scale,
splitNumber: optionsSetup.splitNumber,// 均分
show: optionsSetup.isShowY, // 坐标轴是否显示
name: optionsSetup.textNameY, // 坐标轴名称
nameTextStyle: { // 别名
color: optionsSetup.nameColorY,
fontSize: optionsSetup.namefontSizeY
},
inverse: optionsSetup.reversalY, // 轴反转
axisLabel: {
show: true,
rotate: optionsSetup.ytextAngle, // 文字角度
textStyle: {
color: optionsSetup.colorY, // y轴 坐标文字颜色
fontSize: optionsSetup.fontSizeY
}
},
axisLine: {
show: false,//是否显示坐标线
lineStyle: {
color: optionsSetup.lineColorY
}
},
axisTick: {
show: false //是否显示坐标刻度
},
splitLine: {
show: optionsSetup.isShowSplitLineY,
lineStyle: {
color: optionsSetup.splitLineColorY
}
},
};
this.options.yAxis = yAxis;
},
// 折线设置
setOptionsTop() {
const optionsSetup = this.optionsSetup;
const series = this.options.series;
for (const key in series) {
if (series[key].type == "line") {
series[key].showSymbol = optionsSetup.markPoint;
series[key].symbolSize = optionsSetup.pointSize;
series[key].smooth = optionsSetup.smoothCurve;
/* series[key].itemStyle = {
normal : {
color:optionsSetup.itemStyleColor,
lineStyle:{
color:optionsSetup.itemStyleColor
}
}
}*/
if (optionsSetup.area) {
series[key].areaStyle = {
opacity: optionsSetup.areaThickness / 100
};
} else {
series[key].areaStyle = {
opacity: 0
};
}
series[key].lineStyle = {
width: optionsSetup.lineWidth,
};
series[key].label = {
show: optionsSetup.isShow,
position: "top",
distance: 10,
fontSize: optionsSetup.fontSize,
color: optionsSetup.subTextColor,
fontWeight: optionsSetup.fontWeight
};
}
}
this.options.series = series;
},
// tooltip 设置
setOptionsTooltip() {
const optionsSetup = this.optionsSetup;
const tooltip = {
trigger: "axis",
show: true,
textStyle: {
color: optionsSetup.lineColor,
fontSize: optionsSetup.fontSize
},
formatter:function (param) {
console.log("param",param,param.length)
let kpiName=optionsSetup.titleText;
let kpiUnit='';
// 鼠标悬浮线上提示
// 顶部提示
let tips = '<table>';
if (param.length == 1) {
tips += "<tr><td style='text-align:left;' colspan='4'>" + param[0].name + "</td></tr>";
} else {
tips += "<tr><td style='text-align:left;' 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;
},
// 边距设置
setOptionsMargin() {
const optionsSetup = this.optionsSetup;
const grid = {
left: optionsSetup.marginLeft,
right: optionsSetup.marginRight,
bottom: optionsSetup.marginBottom,
top: optionsSetup.marginTop,
containLabel: true
};
this.options.grid = grid;
},
// 图例操作 legend
setOptionsLegend() {
const optionsSetup = this.optionsSetup;
const legend = this.options.legend;
legend.show = optionsSetup.isShowLegend;
legend.left = optionsSetup.lateralPosition == "left" ? 0 : "auto";
legend.right = optionsSetup.lateralPosition == "right" ? 0 : "auto";
legend.top = optionsSetup.longitudinalPosition == "top" ? 0 : "auto";
legend.bottom =
optionsSetup.longitudinalPosition == "bottom" ? 0 : "auto";
legend.orient = optionsSetup.layoutFront;
legend.textStyle = {
color: optionsSetup.lengedColor,
fontSize: optionsSetup.fontSize
};
legend.itemWidth = optionsSetup.lengedWidth;
},
// 图例颜色修改
setOptionsColor() {
const optionsSetup = this.optionsSetup;
const customColor = optionsSetup.customColor;
if (!customColor) return;
const arrColor = [];
for (let i = 0; i < customColor.length; i++) {
arrColor.push(customColor[i].color);
}
this.options.color = arrColor;
this.options = Object.assign({}, this.options);
},
// 处理数据
setOptionsData() {
const optionsData = this.optionsData; // 数据类型 静态 or 动态
optionsData.dataType == "staticData"
? this.staticDataFn(optionsData.staticData)
: this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
},
staticDataFn(val) {
const series = this.options.series;
let axis = [];
let data = [];
for (const i in val) {
axis[i] = val[i].axis;
data[i] = val[i].data
}
console.log("abc",axis,data)
// x轴
this.options.xAxis.data = axis;
// series
for (const i in series) {
if (series[i].type == "line") {
series[i].data = data;
}
}
},
dynamicDataFn(val, refreshTime) {
if (!val) return;
if (this.ispreview) {
this.getEchartData(val);
this.flagInter = setInterval(() => {
this.getEchartData(val);
}, refreshTime);
} else {
this.getEchartData(val);
}
},
getEchartData(val) {
const data = this.queryEchartsData(val);
data.then(res => {
this.renderingFn(res);
});
},
renderingFn(val) {
// x轴
this.options.xAxis.data = val.xAxis;
// series
const series = this.options.series;
for (const i in series) {
if (series[i].type == "line") {
series[i].data = val.series[i].datas;
}
}
}
}
};
</script>
<style scoped lang="scss">
.echarts {
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
... ...
... ... @@ -43,6 +43,7 @@ import monitorBasicInformation from "./monitor/basicInformation";
import monitorDetailTable from "./monitor/detailTable";
import monitorBgBorder from "./monitor/bgBorder";
import monitorGaugeRate from "./monitor/gaugeRate";
import monitorCustomLineChart from "./monitor/customLineChart";
export default {
name: "WidgetTemp",
... ... @@ -78,7 +79,8 @@ export default {
monitorBasicInformation,
monitorDetailTable,
monitorBgBorder,
monitorGaugeRate
monitorGaugeRate,
monitorCustomLineChart
},
model: {
prop: "value",
... ...
... ... @@ -54,6 +54,7 @@ import monitorBasicInformation from "./monitor/basicInformation";
import monitorDetailTable from "./monitor/detailTable";
import monitorBgBorder from "./monitor/bgBorder";
import monitorGaugeRate from "./monitor/gaugeRate";
import monitorCustomLineChart from "./monitor/customLineChart";
export default {
... ... @@ -89,7 +90,8 @@ export default {
monitorBasicInformation,
monitorDetailTable,
monitorBgBorder,
monitorGaugeRate
monitorGaugeRate,
monitorCustomLineChart
},
model: {
prop: "value",
... ...