From 6343fe4c609b57002d84b83b502899d63dd53727 Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Thu, 14 Mar 2024 13:57:37 +0800
Subject: [PATCH] fix: 监测因子折线图修改
---
src/components/Echarts/LineChartSpe.vue | 28 +-------
src/views/contrast/index.vue | 148 +++++++++++++++++++++++--------------------------
2 files changed, 74 insertions(+), 102 deletions(-)
diff --git a/src/components/Echarts/LineChartSpe.vue b/src/components/Echarts/LineChartSpe.vue
index fb1af0e..a7f10d6 100644
--- a/src/components/Echarts/LineChartSpe.vue
+++ b/src/components/Echarts/LineChartSpe.vue
@@ -70,13 +70,16 @@
initChart () {
this.chart = echarts.init(this.$el, 'macarons')
this.chart.clear()
- this.setOptions(this.chartData)
+ // this.setOptions(this.chartData)
},
setOptions (val) {
console.log('val,val', val)
// val.series.forEach(element => {
// element.data = element.data.map(item => item === 0 ? 0.1 : item)
// })
+ if (this.chart) {
+ this.chart.clear()
+ }
let that = this
function fontSize (res) {
let clientWidth =
@@ -152,30 +155,9 @@
color: 'rgb(255, 255, 255);',
fontSize: fontSize(0.117), // ������������
lineHeight: 0
- },
- formatter: function (params) {
- console.log('params', params)
- let html = params[0].name
- params.forEach((item, index) => {
- html += (`<br/>${item.marker + item.seriesName}: ${item.value === undefined ? 0 : item.value}`)
- })
- return html
}
},
- yAxis: {
- type: 'log',
- axisTick: {
- show: true, // ������������
- },
- axisLine: {
- show: true, // ���������������������
- },
- // axisLabel: {
- // formatter: function (value) {
- // return value === 0.1 ? 0 : value
- // }
- // },
- },
+ yAxis: val.yAxis,
legend: {
data: val.title,
tooltip: {
diff --git a/src/views/contrast/index.vue b/src/views/contrast/index.vue
index 990294d..f57853b 100644
--- a/src/views/contrast/index.vue
+++ b/src/views/contrast/index.vue
@@ -119,6 +119,7 @@
data () {
// ������������������
return {
+ isYaxisSame: ['a34004', 'a34002', 'a05024', 'a21004', 'a21026'],
dataType: 'HourPicker',
lineChartData: lineChartData.purchases,
props: { multiple: true },
@@ -130,7 +131,7 @@
// newMac2:'',
newSensor: [],
radio1: '������',
- unit: 0,
+ unit: 1,
type: 'select',
newLineChartData: {
series: [],
@@ -182,7 +183,7 @@
radio1 (nv, ov) {
if (nv === '������') {
this.dataType = 'HourPicker'
- this.unit = 0
+ this.unit = 1
} else if (nv === '������') {
this.dataType = 'DatePicker'
this.unit = 3
@@ -298,8 +299,9 @@
},
})
.then((res) => {
- // console.log('������������������������������')
+ console.log('������������������������������', res.data)
const data = res.data
+ let yAxisList = []
for (let i = 0; i < data.length; i++) {
data[i].name = this.$options.filters.sensorFilter(
data[i].sensorCode
@@ -308,95 +310,73 @@
for (let i = 0; i < data[0].timeValueList.length; i++) {
newLineChartData.xAxis.push(data[0].timeValueList[i].time)
}
+
for (var i = 0; i < data.length; i++) {
+ if (this.isYaxisSame.includes(data[i].sensorCode)) {
+ yAxisList.push(data[i].name)
+ } else {
+ newLineChartData.yAxis.push(
+ {name: data[i].name,
+ code: data[i].sensorCode,
+ type: 'value',
+ position: 'left',
+ axisTick: {
+ show: true, // ������������
+ },
+ axisLine: {
+ show: true, // ���������������������
+ },
+ splitNumber: 4, // ������������������������������
+ splitLine: {
+ // ���������������
+ show: false,
+ },
+ },
+ )
+ }
+
newLineChartData.series.push({
data: [],
- name: '',
+ name: data[i].name,
+ code: data[i].sensorCode,
type: 'line',
triggerLineEvent: true,
+ yAxisIndex: 0,
emphasis: { focus: 'series' },
lineStyle: { width: 4 }
})
- // newLineChartData.yAxis.push({})
- newLineChartData.series[i].name = data[i].name
newLineChartData.title.push(data[i].name)
for (var j = 0; j < data[i].timeValueList.length; j++) {
- // newLineChartData.series[i].data.push(data[i].timeValueList[j].value)
- newLineChartData.series[i].data.push(data[i].timeValueList[j].value === 0 ? undefined : data[i].timeValueList[j].value)
+ newLineChartData.series[i].data.push(data[i].timeValueList[j].value)
}
}
+ if (yAxisList.length > 0) {
+ newLineChartData.yAxis = [ {
+ type: 'value',
+ position: 'left',
+ axisTick: {
+ show: true, // ������������
+ },
+ axisLine: {
+ show: true, // ���������������������
+ },
+ splitNumber: 4, // ������������������������������
+ splitLine: {
+ // ���������������
+ show: false,
+ },
+ }, ...newLineChartData.yAxis]
+ }
+ newLineChartData.yAxis.forEach((item, index) => {
+ item.position = (index + 1) % 2 === 0 ? 'right' : 'left'
+ item.offset = this.getoffsetData(index)
+ })
+ newLineChartData.series.forEach(item => {
+ item.yAxisIndex = yAxisList.includes(item.name) ? 0 : newLineChartData.yAxis.findIndex(
+ i => i.code && item.code === i.code
+ )
+ })
this.lineChartData = newLineChartData
-
- // this.middleData = JSON.parse(JSON.stringify(res.data))
- // const data = res.data
- // // ���������������
- // // ������������������
- // for (let i = 0; i < data.length; i++) {
- // // ������������������������������������
- // data[i].name = this.$options.filters.sensorFilter(
- // data[i].sensorCode
- // )
- // // data[i].name = data[i].sensorCode
- // var tempArray = []
- // for (let j = 0; j < data[i].timeValueList.length; j++) {
- // tempArray.push(data[i].timeValueList[j].value)
- // }
- // data[i].MaxValue = this.getMaxValue(tempArray)
- // data[i].sort = i
- // }
- // // ���������MaxValue������������
- // data.sort(this.compare('MaxValue', false))
- // // ���1���������������������������
- // var step = Math.floor((1 / data.length) * 100) / 100
- // data[0].Factor = 1
- // // ������������������������������������������������������������������������
- // for (let i = 1; i < data.length; i++) {
- // // ���������������
- // var supposemMaxValue =
- // data[0].MaxValue - i * step * data[0].MaxValue
- // if (data[i].MaxValue < supposemMaxValue) {
- // data[i].Factor = supposemMaxValue / data[i].MaxValue
- // }
- // }
- // // ���������sort������������
- // data.sort(this.compare('sort', true))
- // // ������������������������������
-
- // // for (let i = 0; i < data.length; i++) {
- // // newLineChartData.series.push({ data: [], name: '', type: 'line' })
- // // newLineChartData.series[i].name = data[i].name
- // // newLineChartData.title.push(data[i].name)
- // // for (let j = 0; j < data[i].timeValueList.length; j++) {
- // // data[i].timeValueList[j].value = data[i].timeValueList[j].value * data[i].Factor
- // // newLineChartData.series[i].data.push(data[i].timeValueList[j].value)
- // // }
- // // }
- // for (let i = 0; i < data.length; i++) {
- // newLineChartData.series.push({ data: [], name: '', type: 'line' })
- // newLineChartData.series[i].name = data[i].name
- // newLineChartData.title.push(data[i].name)
- // for (let j = 0; j < data[i].timeValueList.length; j++) {
- // // console.log(data);
- // data[i].timeValueList[j].value =
- // data[i].timeValueList[j].value * data[i].Factor
- // newLineChartData.series[i].data.push({ value: 0, data0: 0 })
- // newLineChartData.series[i].data[j].value =
- // data[i].timeValueList[j].value
- // }
- // }
- // for (let i = 0; i < data[0].timeValueList.length; i++) {
- // newLineChartData.xAxis.push(data[0].timeValueList[i].time)
- // }
- // // ���������tooltip������������������
- // for (let i = 0; i < this.middleData.length; i++) {
- // console.log(i);
- // for (let j = 0; j < this.middleData[i].timeValueList.length; j++) {
- // newLineChartData.series[i].data[j].data0 =
- // this.middleData[i].timeValueList[j].value
- // }
- // }
- // this.lineChartData = newLineChartData
- // console.log(newLineChartData.series[0].name);
})
.catch((err) => {
console.log(err)
@@ -488,6 +468,16 @@
// console.log(err)
// })
},
+ // ������y���������������
+ getoffsetData (val) {
+ if (val === 0 || val === 1) return 0
+ if (val % 2 === 0) {
+ return val / 2 * 60
+ }
+ if (val % 2 !== 0) {
+ return val / 3 * 60
+ }
+ },
// ���������������
getMaxValue (arr) {
// return Math.max.apply(null, arr)
--
Gitblit v1.8.0