monitor_v3 / anji-plus-report · Commits

Go to a project

Authored by 王涛
Commit e74f25abfbb35fa7dec7b0c63bc242d9f54b24f0 2 parents 784da261 19b89342 master-mj-joke ... master-500-dev master-500-dev-lushangqing master-500-dev-lzc master-500-prod master-mj

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

自定义折现趋势图-与按钮组件联动



See merge request !31
Inline Side-by-side
Showing 11 changed files with 1332 additions and 10 deletions
... ... @@ -127,12 +127,25 @@ export default {
return this.stackChartFn(params.chartProperties, data)
}else if(chartType == "custom-linechart" || chartType == "custom-barlinechart"){
return this.barOrLineChartFnCustom(params.chartProperties, data);
}else if(chartType == 'monitor-linechart-trend'){
return this.LineChartFnCustomTrend(params.chartProperties, data);
} else if(chartType == "monitor-stackchart"){
return this.stackChartFnCustom(params.chartProperties, data)
}else {
return data
}
},
//折线趋势图-自定义 lsq 2022-03-01
LineChartFnCustomTrend(chartProperties, data) {
const ananysicData = {};
let series = [];
if(data && data[0] && data[0].data){
series = data[0].data;
}
ananysicData["series"] = series;
return ananysicData;
},
// 柱状图、折线图、柱线图-自定义 // Start LSQ 2022/2/21
barOrLineChartFnCustom(chartProperties, data) {
const ananysicData = {};
... ...
... ... @@ -7,7 +7,7 @@ export const monitorButtonGroup = {
code: 'monitor-button-group',
type: 'html',
label: '按钮-月/季度/年',
icon: 'iconbiaoge',
icon: 'iconchaolianjie',
options: {
setup: [
{
... ...
/*
* @Descripttion: 折线堆叠图 json
* @version:
* @Author: lsq
* @Date: 2022-03-02
* @LastEditors: lsq
* @LastEditTime: 2022-03-02
*/
export const monitorCustomLineTrend = {
code: 'monitor-custom-line-trend',
type: 'chart',
label: '折线趋势图',
icon: 'iconduidietu',
options: {
// 配置
setup: [
{
type: 'el-input-text',
label: '图层名称',
name: 'layerName',
required: false,
placeholder: '',
value: '折线趋势图',
},
{
type: 'el-switch',
label: '竖展示',
name: 'verticalShow',
required: false,
placeholder: '',
value: false,
},
{
type: 'vue-color',
label: '背景颜色',
name: 'background',
required: false,
placeholder: '',
value: ''
},
{
type: 'el-switch',
label: '与按钮组件联动',
name: 'isVuex',
required: false,
placeholder: '',
value: true,
},
{
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: '折线设置',
list: [
{
type: 'el-switch',
label: '标记点',
name: 'markPoint',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-slider',
label: '点大小',
name: 'pointSize',
required: false,
placeholder: '',
value: 6,
},
{
type: 'el-switch',
label: '面积堆积',
name: 'area',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-slider',
label: '面积厚度',
name: 'areaThickness',
required: false,
placeholder: '',
value: 8,
},
{
type: 'el-slider',
label: '线条宽度',
name: 'lineWidth',
required: false,
placeholder: '',
value: 1,
},
],
},
{
name: '标题设置',
list: [
{
type: 'el-switch',
label: '标题',
name: 'isNoTitle',
required: false,
placeholder: '',
value: false,
},
{
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: 'bold'
},
{
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: 'rgba(30, 144, 255, 1)'
},
{
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: 'X轴别名',
name: 'xName',
required: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '别名颜色',
name: 'xNameColor',
required: false,
placeholder: '',
value: '#fff'
},
{
type: 'el-input-number',
label: '别名字号',
name: 'xNameFontSize',
required: false,
placeholder: '',
value: 14
},
{
type: 'el-switch',
label: '轴反转',
name: 'reversalX',
required: false,
placeholder: '',
value: false
},
{
type: 'el-slider',
label: '文字角度',
name: 'textAngleX',
required: false,
placeholder: '',
value: 0
},
{
type: 'el-input-number',
label: '文字间隔',
name: 'textInterval',
required: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '文字颜色',
name: 'Xcolor',
required: false,
placeholder: '',
value: '#666',
},
{
type: 'el-input-number',
label: '文字字号',
name: 'fontSizeX',
required: false,
placeholder: '',
value: 14,
},
{
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: false,
},
{
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: 'Y轴别名',
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: 'el-switch',
label: '轴反转',
name: 'reversalY',
required: false,
placeholder: '',
value: false
},
{
type: 'el-slider',
label: '文字角度',
name: 'textAngleY',
required: false,
placeholder: '',
value: 0
},
{
type: 'vue-color',
label: '文字颜色',
name: 'colorY',
required: false,
placeholder: '',
value: '#666',
},
{
type: 'el-input-number',
label: '文字字号',
name: 'fontSizeY',
required: false,
placeholder: '',
value: 14,
},
{
type: 'vue-color',
label: '轴颜色',
name: 'lineColorY',
required: false,
placeholder: '',
value: '#c9c9c9',
}, {
type: 'el-switch',
label: '分割线显示',
name: 'isShowSplitLineY',
require: false,
placeholder: '',
value: false,
}, {
type: 'vue-color',
label: '分割线颜色',
name: 'splitLineColorY',
required: false,
placeholder: '',
value: '#fff',
}
],
},
{
name: '数值设定',
list: [
{
type: 'el-switch',
label: '显示',
name: 'isShow',
required: false,
placeholder: '',
value: false
},
{
type: 'el-input-number',
label: '字体大小',
name: 'fontSize',
required: false,
placeholder: '',
value: 14
},
{
type: 'vue-color',
label: '字体颜色',
name: 'subTextColor',
required: false,
placeholder: '',
value: '#666'
},
{
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-number',
label: '字体大小',
name: 'tipsFontSize',
required: false,
placeholder: '',
value: 16
},
{
type: 'vue-color',
label: '字体颜色',
name: 'lineColor',
required: false,
placeholder: '',
},
],
},
{
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: 'el-switch',
label: '图例文字显示',
name: 'isShowLegendText',
required: false,
placeholder: '',
value: false,
},
{
type: 'vue-color',
label: '字体颜色',
name: 'lengedColor',
required: false,
placeholder: '',
value: '#666',
},
{
type: 'el-input-number',
label: '字体大小',
name: 'lengedFontSize',
required: false,
placeholder: '',
value: 14,
},
{
type: 'el-input-number',
label: '图例宽度',
name: 'lengedWidth',
required: false,
placeholder: '',
value: 15,
},
{
type: 'el-select',
label: '横向位置',
name: 'lateralPosition',
required: false,
placeholder: '',
selectOptions: [
{code: 'center', name: '居中'},
{code: 'left', name: '左对齐'},
{code: 'right', name: '右对齐'},
],
value: 'center'
},
{
type: 'el-select',
label: '纵向位置',
name: 'longitudinalPosition',
required: false,
placeholder: '',
selectOptions: [
{code: 'top', name: '顶部'},
{code: 'bottom', name: '底部'},
],
value: 'top'
},
{
type: 'el-select',
label: '布局前置',
name: 'layoutFront',
required: false,
placeholder: '',
selectOptions: [
{code: 'vertical', name: '竖排'},
{code: 'horizontal', name: '横排'},
],
value: 'horizontal'
},
],
},*/
{
name: '自定义配色',
list: [
{
type: 'customColor',
label: '',
name: 'customColor',
required: false,
value: [{color:'#3DC3FF'}],
},
],
},
],
],
// 数据
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: [
{
"value": -1.1618426259,
"date": "2012-08-28",
"l": -2.6017329022,
"u": 0.2949717757
},
{
"value": -0.5828247293,
"date": "2012-08-29",
"l": -1.3166963635,
"u": 0.1324086347
},
{
"value": -0.3790770636,
"date": "2012-08-30",
"l": -0.8712221305,
"u": 0.0956413566
},
{
"value": -0.2792926002,
"date": "2012-08-31",
"l": -0.6541832008,
"u": 0.0717120241
},
{
"value": -0.2461165469,
"date": "2012-09-01",
"l": -0.5222677907,
"u": 0.0594188803
},
{
"value": -0.2017354137,
"date": "2012-09-02",
"l": -0.4434280535,
"u": 0.0419213465
},
{
"value": -0.1457476871,
"date": "2012-09-03",
"l": -0.3543957712,
"u": 0.0623761171
},
{
"value": -0.002610973,
"date": "2012-09-04",
"l": -0.3339911495,
"u": 0.031286929
},
{
"value": -0.0080692734,
"date": "2012-09-05",
"l": -0.2951839941,
"u": 0.0301762553
},
{
"value": -0.0296490933,
"date": "2012-09-06",
"l": -0.2964395801,
"u": -0.0029821004
},
{
"value": 0.001317397,
"date": "2012-09-07",
"l": -0.2295443759,
"u": 0.037903312
},
{
"value": -0.0117649838,
"date": "2012-09-08",
"l": -0.2226376418,
"u": 0.0239720183
},
{
"value": 0.0059394263,
"date": "2012-09-09",
"l": -0.2020479849,
"u": 0.0259489347
},
{
"value": -0.0115565898,
"date": "2012-09-10",
"l": -0.2042048037,
"u": 0.0077863806
},
{
"value": 0.0041183019,
"date": "2012-09-11",
"l": -0.1837263172,
"u": 0.0137898406
},
{
"value": 0.0353559544,
"date": "2012-09-12",
"l": -0.136610008,
"u": 0.051403828
},
{
"value": 0.0070046011,
"date": "2012-09-13",
"l": -0.1569988647,
"u": 0.0202266411
},
{
"value": -0.0004251807,
"date": "2012-09-14",
"l": -0.1410340292,
"u": 0.0273410185
},
{
"value": -0.0035461023,
"date": "2012-09-15",
"l": -0.1438653689,
"u": 0.0165445684
},
{
"value": 0.007797889,
"date": "2012-09-16",
"l": -0.1291975355,
"u": 0.0232461153
},
{
"value": 0.0025402723,
"date": "2012-09-17",
"l": -0.133972479,
"u": 0.0116753921
},
{
"value": -0.005317381,
"date": "2012-09-18",
"l": -0.1269266586,
"u": 0.0129723291
}
],
},
{
type: 'dycustComponents',
label: '',
name: 'dynamicData',
required: false,
placeholder: '',
relactiveDom: 'dataType',
relactiveDomValue: 'dynamicData',
chartType: 'monitor-linechart-trend',
dictKey: 'STACK_PROPERTIES',
value: '',
},
],
// 坐标
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: 900,
},
{
type: 'el-input-number',
label: '高度',
name: 'height',
required: false,
placeholder: '该容器在1080px大屏中的高度',
value: 300,
},
],
}
}
... ...
... ... @@ -46,6 +46,7 @@ import {monitorBasicInformationTwo} from "./echartsConfigJson/monitorConfigJson/
import {monitorCustomLineStack} from "./echartsConfigJson/monitorConfigJson/monitor-custom-line-stack";
import {monitorCustomBarLineChart} from "./echartsConfigJson/monitorConfigJson/monitor-custom-bar-line-chart";
import {monitorButtonGroup} from "./echartsConfigJson/monitorConfigJson/monitor-button-group";
import {monitorCustomLineTrend} from "./echartsConfigJson/monitorConfigJson/monitor-custom-line-trend";
export const {widgetTool,monitor} = {
... ... @@ -102,6 +103,8 @@ export const {widgetTool,monitor} = {
// 柱线图-双线
monitorCustomBarLineChart,
//月季度年按钮
monitorButtonGroup
monitorButtonGroup,
//折线趋势图
monitorCustomLineTrend
]
}
... ...
... ... @@ -182,7 +182,6 @@ export default {
fontSize: optionsSetup.subTextFontSize
};
title.top='8px';
title.left='8px';
this.options.title = title;
},
// X轴设置
... ... @@ -435,7 +434,6 @@ export default {
}
},
dynamicDataFn(val, refreshTime) {
console.log("**********",val)
if (!val) return;
if (this.ispreview) {
this.getEchartData(val);
... ... @@ -453,7 +451,6 @@ export default {
});
},
renderingFn(val) {
console.log("valll",val)
this.options.xAxis.data = val.xAxis;
// series 模拟数据
val.series.push({
... ...
... ... @@ -121,7 +121,6 @@ export default {
fontSize: optionsSetup.subTextFontSize
};
title.top='8px';
title.left='8px';
this.options.title = title;
},
// X轴设置
... ...
... ... @@ -179,7 +179,6 @@ export default {
fontSize: optionsSetup.subTextFontSize
};
title.top='8px';
title.left='8px';
this.options.title = title;
},
// X轴设置
... ...
... ... @@ -121,7 +121,6 @@ export default {
fontSize: optionsSetup.subTextFontSize
};
title.top='8px';
title.left='8px';
this.options.title = title;
},
// X轴设置
... ...
<template>
<div :style="styleObj">
<v-chart :options="options" autoresize/>
</div>
</template>
<script>
import {mapGetters} from "_vuex@3.0.1@vuex";
export default {
name: "customLinetrend",
components: {},
props: {
value: Object,
ispreview: Boolean
},
data() {
return {
options: {
grid: {},
/*legend: {
textStyle: {
color: "#fff"
}
},*/
xAxis: {
type: "category",
data: [],
axisLabel: {
show: true,
textStyle: {
color: "#fff"
}
}
},
yAxis: {
type: "value",
data: [],
axisLabel: {
show: true,
textStyle: {
color: "#fff"
}
}
},
series: [
{
data: [],
name: '',
type: "line",
barGap: "0%",
itemStyle: {
barBorderRadius: null
}
}
]
},
optionsStyle: {}, // 样式
optionsData: {}, // 数据
optionsSetup: {},
flagInter: null,
kpiUnit:'',//单位
};
},
computed: {
//月季度年按钮通过vuex接收值
...mapGetters(['buttonVals']),
buttonVal(){
return this.buttonVals;
},
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.setup;
this.optionsSetup = val.setup;
this.editorOptions();
},
deep: true
},
//监听月季度年按钮切换值
buttonVal:{
handler(val){
if(this.optionsSetup.isVuex){
let optionsData=this.optionsData;
if(this.optionsData.dataType=="dynamicData"){
//改变参数值-月季度年，重新加载动态数据--待测
this.optionsData.dynamicData.contextData.btnCode=val;
this.editorOptions();
}
}
},
deep:true
}
},
mounted() {
this.optionsStyle = this.value.position;
this.optionsData = this.value.data;
this.optionsCollapse = this.value.setup;
this.optionsSetup = this.value.setup;
this.editorOptions();
},
methods: {
// 修改图标options属性
editorOptions() {
this.setOptionsTitle();
this.setOptionsX();
this.setOptionsY();
this.setOptionsTooltip();
this.setOptionsMargin();
// this.setOptionsLegend();
this.setOptionsData();
},
// 标题修改
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';
this.options.title = title;
},
// X轴设置
setOptionsX() {
const optionsSetup = this.optionsSetup;
const xAxis = {
type: "category",
show: optionsSetup.hideX, // 坐标轴是否显示
name: optionsSetup.xName, // 坐标轴名称
nameTextStyle: {
color: optionsSetup.xNameColor,
fontSize: optionsSetup.xNameFontSize
},
nameRotate: optionsSetup.textAngleX, // 文字角度
inverse: optionsSetup.reversalX, // 轴反转
axisLabel: {
show: true,
interval: optionsSetup.textInterval, // 文字角度
rotate: optionsSetup.textAngle, // 文字角度
textStyle: {
color: optionsSetup.Xcolor, // x轴 坐标文字颜色
fontSize: optionsSetup.fontSizeX
},
// formatter: function (value, idx) {
// var date = new Date(value);
// return idx === 0
// ? value
// : [date.getMonth() + 1, date.getDate()].join('-');
// }
},
axisLine: {
show: true,
lineStyle: {
color: optionsSetup.lineColorX
}
},
splitLine: {
show: optionsSetup.isShowSplitLineX,
lineStyle: {
color: optionsSetup.splitLineColorX
}
},
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",
show: optionsSetup.isShowY, // 坐标轴是否显示
name: optionsSetup.textNameY, // 坐标轴名称
nameTextStyle: {
color: optionsSetup.NameColorY,
fontSize: optionsSetup.NameFontSizeY
},
inverse: optionsSetup.reversalY, // y轴反转
axisLabel: {
show: true,
rotate: optionsSetup.textAngleY,// 文字角度
textStyle: {
color: optionsSetup.colorY, // y轴 坐标文字颜色
fontSize: optionsSetup.fontSizeY
}
},
axisLine: {
show: true,
lineStyle: {
color: optionsSetup.lineColorY
}
},
splitLine: {
show: optionsSetup.isShowSplitLineY,
lineStyle: {
color: optionsSetup.splitLineColorY
}
}
};
this.options.yAxis = yAxis;
},
// 获取面积
getOptionArea() {
const optionsSetup = this.optionsSetup;
const customColor = optionsSetup.customColor;
const arrColor = [];
for (let i = 0; i < customColor.length; i++) {
arrColor.push(customColor[i].color);
}
let areaStyle = [];
if (optionsSetup.area) {
areaStyle = {
color:arrColor[0],
opacity: optionsSetup.areaThickness / 100
}
} else {
areaStyle = {
opacity: 0
}
}
return areaStyle
},
// tooltip 提示语设置，鼠标放置显示
setOptionsTooltip() {
const optionsSetup = this.optionsSetup;
let that=this;
const tooltip = {
trigger: "axis",
show: true,
textStyle: {
color: optionsSetup.lineColor,
fontSize: optionsSetup.tipsFontSize,
},
axisPointer: {
type: 'cross',
animation: false,
label: {
backgroundColor: '#ccc',
borderColor: '#aaa',
borderWidth: 1,
shadowBlur: 0,
shadowOffsetX: 0,
shadowOffsetY: 0,
color: '#222'
}
},
};
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;
legend.top = optionsSetup.longitudinalPosition == "top" ? 20 : "auto";
legend.bottom =
optionsSetup.longitudinalPosition == "bottom" ? 0 : "auto";
legend.orient = optionsSetup.layoutFront;
legend.textStyle = {
color: optionsSetup.lengedColor,
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() {
const optionsCollapse = this.optionsSetup;
const customColor = optionsCollapse.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 optionsSetup = this.optionsSetup;
const optionsData = this.optionsData; // 数据类型 静态 or 动态
optionsData.dataType == "staticData"
? this.staticDataFn(optionsData.staticData, optionsSetup)
: this.dynamicDataFn(
optionsData.dynamicData,
optionsData.refreshTime,
optionsSetup
);
},
//去重
setUnique(arr) {
let newArr = [];
arr.forEach(item => {
return newArr.includes(item) ? '' : newArr.push(item);
});
return newArr;
},
//静态数据
staticDataFn(val) {
this.setSeriesData(val)
},
//处理数据
setSeriesData(data){
const optionsSetup = this.optionsSetup;
//颜色
const customColor = optionsSetup.customColor;
const arrColor = [];
for (let i = 0; i < customColor.length; i++) {
arrColor.push(customColor[i].color);
}
let xAxisList = [];
if(data && data.length>0){
xAxisList=data.map(function (item) {
return item.date;
})
}
let base = -data.reduce(function (min, val) {
return Math.floor(Math.min(min, val.l));
}, Infinity);
let series=[
{
name: 'L',
type: 'line',
data: data.map(function (item) {
return item.l + base;
}),
lineStyle: {
opacity: 0
},
stack: 'confidence-band',
symbol: 'none'
},
{
name: 'U',
type: 'line',
data: data.map(function (item) {
return item.u - item.l;
}),
lineStyle: {
opacity: 0
},
areaStyle:this.getOptionArea(),
stack: 'confidence-band',
symbol: 'none'
},
{
type: 'line',
data: data.map(function (item) {
return item.value + base;
}),
itemStyle: {
color: arrColor[0]
},
showSymbol: false,
}
]
this.options.series = series
if (optionsSetup.verticalShow) {
this.options.xAxis.data = [];
this.options.yAxis.data = xAxisList;
this.options.xAxis.type = "value";
this.options.yAxis.type = "category";
} else {
this.options.xAxis.data = xAxisList;
this.options.yAxis.data = [];
this.options.xAxis.type = "category";
this.options.yAxis.type = "value";
}
let toolTip=this.options.tooltip;
toolTip.formatter=function (params) {
return (
params[2].name +
'<br />' +
((params[2].value - base) * 100).toFixed(1) +
'%'
);
}
},
// 动态数据
dynamicDataFn(val, refreshTime, optionsSetup) {
if (!val) return;
if (this.ispreview) {
this.getEchartData(val, optionsSetup);
this.flagInter = setInterval(() => {
this.getEchartData(val, optionsSetup);
}, refreshTime);
} else {
this.getEchartData(val, optionsSetup);
}
},
getEchartData(val, optionsSetup) {
const data = this.queryEchartsData(val);
data.then(res => {
this.renderingFn(optionsSetup, res);
});
},
renderingFn(optionsSetup, val) {
this.setSeriesData(val.series)
}
}
};
</script>
<style scoped lang="scss">
.echarts {
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
... ...
... ... @@ -49,6 +49,7 @@ import monitorBasicInformationTwo from "./monitor/basicInformationTwo";
import monitorCustomLineStack from "./monitor/customLineStack";
import monitorCustomBarLineChart from "./monitor/customBarLineChart";
import monitorButtonGroup from "./monitor/buttonGroup";
import monitorCustomLineTrend from "./monitor/customLineTrend";
export default {
name: "WidgetTemp",
... ... @@ -90,7 +91,8 @@ export default {
monitorBasicInformationTwo,
monitorCustomLineStack,
monitorCustomBarLineChart,
monitorButtonGroup
monitorButtonGroup,
monitorCustomLineTrend
},
model: {
prop: "value",
... ...
... ... @@ -60,6 +60,7 @@ import monitorBasicInformationTwo from "./monitor/basicInformationTwo";
import monitorCustomLineStack from "./monitor/customLineStack";
import monitorCustomBarLineChart from "./monitor/customBarLineChart";
import monitorButtonGroup from "./monitor/buttonGroup";
import monitorCustomLineTrend from "./monitor/customLineTrend";
export default {
name: "Widget",
... ... @@ -100,7 +101,8 @@ export default {
monitorBasicInformationTwo,
monitorCustomLineStack,
monitorCustomBarLineChart,
monitorButtonGroup
monitorButtonGroup,
monitorCustomLineTrend
},
model: {
prop: "value",
... ...