ems、箱型图
This commit is contained in:
白菜
@ -1,20 +1,20 @@
|
||||
<!--电位展示图表-->
|
||||
<template>
|
||||
<el-dialog
|
||||
:visible.sync="show"
|
||||
:title="pointName"
|
||||
:close-on-click-modal="false"
|
||||
show-close
|
||||
destroy-on-close
|
||||
lock-scroll
|
||||
append-to-body
|
||||
width="1000px"
|
||||
class="ems-dialog"
|
||||
:before-close="handleClosed"
|
||||
:visible.sync="show"
|
||||
:title="pointName"
|
||||
:close-on-click-modal="false"
|
||||
show-close
|
||||
destroy-on-close
|
||||
lock-scroll
|
||||
append-to-body
|
||||
width="1000px"
|
||||
class="ems-dialog"
|
||||
:before-close="handleClosed"
|
||||
>
|
||||
<el-card
|
||||
shadow="always"
|
||||
class="common-card-container common-card-container-body-no-padding time-range-card"
|
||||
shadow="always"
|
||||
class="common-card-container common-card-container-body-no-padding time-range-card"
|
||||
>
|
||||
<div slot="header" class="time-range-header">
|
||||
<el-radio-group class="card-title" v-model="dataUnit">
|
||||
@ -23,10 +23,10 @@
|
||||
<el-radio :label="3">天</el-radio>
|
||||
</el-radio-group>
|
||||
<date-time-select
|
||||
ref="dateTimeSelect"
|
||||
:data-unit="dataUnit"
|
||||
@initDate="(e) => (dataRange = e || [])"
|
||||
@updateDate="updateDate"
|
||||
ref="dateTimeSelect"
|
||||
:data-unit="dataUnit"
|
||||
@initDate="(e) => (dataRange = e || [])"
|
||||
@updateDate="updateDate"
|
||||
/>
|
||||
</div>
|
||||
<div style="height: 350px" id="searchChart"></div>
|
||||
@ -37,10 +37,11 @@
|
||||
import * as echarts from "echarts";
|
||||
import resize from "@/mixins/ems/resize";
|
||||
import DateTimeSelect from "@/views/ems/search/DateTimeSelect.vue";
|
||||
import { getPointValueList } from "@/api/ems/search";
|
||||
import {getPointValueList} from "@/api/ems/search";
|
||||
import DateRangeSelect from "@/components/Ems/DateRangeSelect/index.vue";
|
||||
|
||||
export default {
|
||||
components: { DateRangeSelect, DateTimeSelect },
|
||||
components: {DateRangeSelect, DateTimeSelect},
|
||||
mixins: [resize],
|
||||
props: {
|
||||
siteId: {
|
||||
@ -93,7 +94,7 @@ export default {
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
showChart({ pointName, deviceCategory, deviceId, child = "" }) {
|
||||
showChart({pointName, deviceCategory, deviceId, child = ""}) {
|
||||
//初始化数据
|
||||
this.pointName = pointName;
|
||||
this.deviceCategory = deviceCategory;
|
||||
@ -152,84 +153,94 @@ export default {
|
||||
endDate,
|
||||
siteDeviceMap,
|
||||
})
|
||||
.then((response) => {
|
||||
this.setOption(response?.data || []);
|
||||
})
|
||||
.finally(() => {
|
||||
this.hideLoading();
|
||||
});
|
||||
.then((response) => {
|
||||
this.setOption(response?.data || []);
|
||||
})
|
||||
.finally(() => {
|
||||
this.hideLoading();
|
||||
});
|
||||
},
|
||||
setOption(data) {
|
||||
if (!this.chart) return;
|
||||
this.chart.clear();
|
||||
console.log("返回的数据", data);
|
||||
let dataset = [];
|
||||
if (data.length > 0) {
|
||||
data.forEach((item, index) => {
|
||||
item.deviceList.forEach((inner) => {
|
||||
dataset.push({
|
||||
name: `${
|
||||
this.isDtdc
|
||||
? `${inner.parentDeviceId ? inner.parentDeviceId + "-" : ""}${inner.deviceId}`
|
||||
: `${inner.deviceId}`
|
||||
}`,
|
||||
type: "line",
|
||||
markPoint: {
|
||||
symbolSize: 30,
|
||||
emphasis: {
|
||||
disabled:false//打开 鼠标高亮
|
||||
},
|
||||
data: [//最大值、最小值
|
||||
{
|
||||
// type: 'max',
|
||||
name: `最大值`,
|
||||
coord:[inner.maxDate,inner.maxValue],
|
||||
relativeTo:'coordinate',
|
||||
label: {
|
||||
position: "top",
|
||||
formatter: item.dataType === 2 ? ([
|
||||
`最大值:${inner.maxValue}`,
|
||||
// `平均值:${inner.avgValue}`,
|
||||
`差值:${inner.diffValue}`,
|
||||
]).join('\n') : ([
|
||||
`最大值:${inner.maxValue}`,
|
||||
// `平均值:${inner.avgValue}`,
|
||||
]).join('\n'),
|
||||
},
|
||||
},
|
||||
{
|
||||
// type: 'min',
|
||||
name: `最小值`,
|
||||
coord:[inner.minDate,inner.minValue],
|
||||
relativeTo:'coordinate',
|
||||
label: {
|
||||
position: "top",
|
||||
formatter: item.dataType === 2 ? ([
|
||||
`最小值:${inner.minValue}`,
|
||||
// `平均值:${inner.avgValue}`,
|
||||
`差值:${inner.diffValue}`,
|
||||
]).join('\n') : ([
|
||||
`最小值:${inner.minValue}`,
|
||||
// `平均值:${inner.avgValue}`,
|
||||
]).join('\n'),
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
xdata: [],
|
||||
data: [],
|
||||
});
|
||||
const length = dataset.length;
|
||||
inner.pointValueList.forEach((value) => {
|
||||
dataset[length - 1].xdata.push(value.valueDate);
|
||||
dataset[length - 1].data.push(value.pointValue);
|
||||
});
|
||||
});
|
||||
});
|
||||
} else {
|
||||
if (!data || data.length <= 0) {
|
||||
this.$message.warning("暂无数据");
|
||||
}
|
||||
console.log("图表数据", dataset);
|
||||
console.log('展示的图表类型chartType', data[0].chartType)
|
||||
|
||||
if (data[0].chartType === 2) {
|
||||
// 箱型图
|
||||
this.setBoxOption(data)
|
||||
} else {
|
||||
//折线图
|
||||
this.setLineOption(data)
|
||||
}
|
||||
},
|
||||
setLineOption(data) {
|
||||
let dataset = [];
|
||||
data.forEach((item, index) => {
|
||||
item.deviceList.forEach((inner) => {
|
||||
dataset.push({
|
||||
name: `${
|
||||
this.isDtdc
|
||||
? `${inner.parentDeviceId ? inner.parentDeviceId + "-" : ""}${inner.deviceId}`
|
||||
: `${inner.deviceId}`
|
||||
}`,
|
||||
type: "line",
|
||||
markPoint: {
|
||||
symbolSize: 30,
|
||||
emphasis: {
|
||||
disabled: false//打开 鼠标高亮
|
||||
},
|
||||
data: [//最大值、最小值
|
||||
{
|
||||
// type: 'max',
|
||||
name: `最大值`,
|
||||
coord: [inner.maxDate, inner.maxValue],
|
||||
relativeTo: 'coordinate',
|
||||
label: {
|
||||
position: "top",
|
||||
formatter: item.dataType === 2 ? ([
|
||||
`最大值:${inner.maxValue}`,
|
||||
// `平均值:${inner.avgValue}`,
|
||||
`差值:${inner.diffValue}`,
|
||||
]).join('\n') : ([
|
||||
`最大值:${inner.maxValue}`,
|
||||
// `平均值:${inner.avgValue}`,
|
||||
]).join('\n'),
|
||||
},
|
||||
},
|
||||
{
|
||||
// type: 'min',
|
||||
name: `最小值`,
|
||||
coord: [inner.minDate, inner.minValue],
|
||||
relativeTo: 'coordinate',
|
||||
label: {
|
||||
position: "top",
|
||||
formatter: item.dataType === 2 ? ([
|
||||
`最小值:${inner.minValue}`,
|
||||
// `平均值:${inner.avgValue}`,
|
||||
`差值:${inner.diffValue}`,
|
||||
]).join('\n') : ([
|
||||
`最小值:${inner.minValue}`,
|
||||
// `平均值:${inner.avgValue}`,
|
||||
]).join('\n'),
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
xdata: [],
|
||||
data: [],
|
||||
});
|
||||
const length = dataset.length;
|
||||
inner.pointValueList.forEach((value) => {
|
||||
dataset[length - 1].xdata.push(value.valueDate);
|
||||
dataset[length - 1].data.push(value.pointValue);
|
||||
});
|
||||
});
|
||||
});
|
||||
console.log("折线图图表数据", dataset);
|
||||
this.chart.setOption({
|
||||
legend: {
|
||||
// left: 'center',
|
||||
@ -241,14 +252,17 @@ export default {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
// 坐标轴指示器，坐标轴触发有效
|
||||
type: "cross", // 默认为直线，可选为：'line' | 'shadow'
|
||||
type: 'cross',
|
||||
},
|
||||
// axisPointer: {
|
||||
// // 坐标轴指示器，坐标轴触发有效
|
||||
// type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
||||
// },
|
||||
},
|
||||
textStyle: {
|
||||
color: "#333333",
|
||||
},
|
||||
xAxis: { type: "category", data: dataset?.[0]?.xdata || [] },
|
||||
xAxis: {type: "category", data: dataset?.[0]?.xdata || []},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
},
|
||||
@ -266,6 +280,122 @@ export default {
|
||||
series: dataset,
|
||||
});
|
||||
},
|
||||
setBoxOption(data) {
|
||||
let dataset = [];
|
||||
data.forEach((item, index) => {
|
||||
item.deviceList.forEach((inner) => {
|
||||
dataset.push({
|
||||
name: `${
|
||||
this.isDtdc
|
||||
? `${inner.parentDeviceId ? inner.parentDeviceId + "-" : ""}${inner.deviceId}`
|
||||
: `${inner.deviceId}`
|
||||
}`,
|
||||
type: "boxplot",
|
||||
// markPoint: {
|
||||
// symbolSize: 30,
|
||||
// emphasis: {
|
||||
// disabled: false//打开 鼠标高亮
|
||||
// },
|
||||
// data: [//最大值、最小值
|
||||
// {
|
||||
// // type: 'max',
|
||||
// name: `最大值`,
|
||||
// coord: [inner.maxDate, inner.maxValue],
|
||||
// relativeTo: 'coordinate',
|
||||
// label: {
|
||||
// position: "top",
|
||||
// formatter: item.dataType === 2 ? ([
|
||||
// `最大值:${inner.maxValue}`,
|
||||
// // `平均值:${inner.avgValue}`,
|
||||
// `差值:${inner.diffValue}`,
|
||||
// ]).join('\n') : ([
|
||||
// `最大值:${inner.maxValue}`,
|
||||
// // `平均值:${inner.avgValue}`,
|
||||
// ]).join('\n'),
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// // type: 'min',
|
||||
// name: `最小值`,
|
||||
// coord: [inner.minDate, inner.minValue],
|
||||
// relativeTo: 'coordinate',
|
||||
// label: {
|
||||
// position: "top",
|
||||
// formatter: item.dataType === 2 ? ([
|
||||
// `最小值:${inner.minValue}`,
|
||||
// // `平均值:${inner.avgValue}`,
|
||||
// `差值:${inner.diffValue}`,
|
||||
// ]).join('\n') : ([
|
||||
// `最小值:${inner.minValue}`,
|
||||
// // `平均值:${inner.avgValue}`,
|
||||
// ]).join('\n'),
|
||||
// }
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
xdata: [],
|
||||
data: [],
|
||||
});
|
||||
const length = dataset.length;
|
||||
inner.pointValueList.forEach((value) => {
|
||||
const {valueDate, min, q1, median, q3, max} = value
|
||||
// const mid = (max - min) / 2, minLine = min + Math.abs(median / 2),
|
||||
// maxLine = max - Math.abs(median / 2)
|
||||
dataset[length - 1].xdata.push(valueDate);
|
||||
dataset[length - 1].data.push([min, q1, median, q3, max]);
|
||||
});
|
||||
});
|
||||
});
|
||||
console.log("箱型图图表数据", dataset);
|
||||
this.chart.setOption({
|
||||
legend: {
|
||||
// left: 'center',
|
||||
// top: '10',
|
||||
},
|
||||
grid: {
|
||||
containLabel: true,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: function (params) {
|
||||
let data = params.data;
|
||||
let result = params.marker + params.name + ' ' + params.seriesName + '<br/>';
|
||||
result += '最小值: ' + data[1] + '<br/>';
|
||||
result += '平均值: ' + data[3] + '<br/>';
|
||||
result += '最大值: ' + data[5];
|
||||
return result;
|
||||
}
|
||||
// trigger: "axis",
|
||||
// axisPointer: {
|
||||
// type: 'cross',
|
||||
// },
|
||||
// axisPointer: {
|
||||
// // 坐标轴指示器，坐标轴触发有效
|
||||
// type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
||||
// },
|
||||
},
|
||||
textStyle: {
|
||||
color: "#333333",
|
||||
},
|
||||
xAxis: {type: "category", data: dataset?.[0]?.xdata || []},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
type: "inside",
|
||||
start: 0,
|
||||
end: 100,
|
||||
},
|
||||
{
|
||||
start: 0,
|
||||
end: 100,
|
||||
},
|
||||
],
|
||||
series: dataset,
|
||||
});
|
||||
},
|
||||
|
||||
updateDate(val) {
|
||||
this.dataRange = val || [];
|
||||
this.getDate();
|
||||
|
||||
@ -236,8 +236,6 @@
|
||||
v-html="tempDataItem.unit"></span></span>
|
||||
</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row class="device-info-row" style="margin-top:20px;">
|
||||
<el-col v-for="(tempDataItem,tempDataIndex) in pcsDataList" :key="tempDataIndex+'pcsTempData'"
|
||||
:span="6" class="device-info-col">
|
||||
<span class="pointer" @click="showChart(tempDataItem.name,item.deviceId)">
|
||||
|
||||
@ -227,7 +227,6 @@ export default {
|
||||
//折线图
|
||||
this.setLineOption(data)
|
||||
}
|
||||
|
||||
},
|
||||
setLineOption(data) {
|
||||
let dataset = [];
|
||||
@ -408,9 +407,8 @@ export default {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: function (params) {
|
||||
console.log(11111111111, params.data)
|
||||
let data = params.data;
|
||||
let result = params.name + ' ' + params.seriesName + '<br/>';
|
||||
let result = params.marker + params.name + ' ' + params.seriesName + '<br/>';
|
||||
result += '最小值: ' + data[1] + '<br/>';
|
||||
result += '平均值: ' + data[3] + '<br/>';
|
||||
result += '最大值: ' + data[5];
|
||||
|
||||
Reference in New Issue
Block a user