颗粒折线图 #4

Merged
juzi merged 1 commits from zjl into master 2023-02-14 11:03:08 +08:00
3 changed files with 76 additions and 43 deletions

View File

@ -64,18 +64,20 @@ export default {
}
},
methods: {
init() {
console.log('init')
},
selectLine(val) {
this.form.proLineId = val
setAlarmValueGet({ id: val }).then((res) => {
this.form.adsorptionPadCeiling = res.data.adsorptionPadCeiling
? res.data.adsorptionPadCeiling
: null
this.form.auxiliaryFrameCeiling = res.data.auxiliaryFrameCeiling
? res.data.auxiliaryFrameCeiling
: null
if (res.code === 0 && res.data) {
this.form.adsorptionPadCeiling = res.data.adsorptionPadCeiling
? res.data.adsorptionPadCeiling
: 0
this.form.auxiliaryFrameCeiling = res.data.auxiliaryFrameCeiling
? res.data.auxiliaryFrameCeiling
: 0
} else {
this.form.adsorptionPadCeiling = 0
this.form.auxiliaryFrameCeiling = 0
}
})
},
submitForm() {

View File

@ -141,9 +141,6 @@ export default {
this.getList()
} else {
this.centervisible = true
this.$nextTick(() => {
this.$refs.alarmAdd.init()
})
}
},
tableRowClassName({ row }) {

View File

@ -79,12 +79,12 @@ export default {
let xlList = []
let sumList = []
let msg = {}
for (let i = 0; i < 100; i++) {
time.push(moment().add(1, 'days').format('YYYY-MM-DD HH:mm:ss'))
for (let i = 0; i < 1000; i++) {
time.push(moment().add(i, 'days').format('YYYY-MM-DD HH:mm:ss'))
sList.push(Math.floor(Math.random() * 80 + 10))
mList.push(Math.floor(Math.random() * 80 + 20))
lList.push(Math.floor(Math.random() * 80 + 30))
xlList.push(Math.floor(Math.random() * 80 + 40))
mList.push(Math.floor(Math.random() * 100 + 20))
lList.push(Math.floor(Math.random() * 130 + 30))
xlList.push(Math.floor(Math.random() * 150 + 40))
sumList.push(sList[i] + mList[i] + lList[i] + xlList[i])
}
msg.time = time
@ -194,50 +194,84 @@ export default {
getChart(msg) {
console.log(msg)
var option = {
color: ['#5AD8A6', '#5B8FF9', '#5D7092', '#F6BD16', '#E8684A'],
title: {
text: 'Beijing AQI',
text: '时间段玻璃颗粒数',
left: '1%'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['Total', 'M', 'L', 'S', 'XL'],
right: '4%'
},
grid: {
left: '5%',
right: '15%',
left: '4%',
right: '4%',
bottom: '10%'
},
xAxis: msg.time,
yAxis: {},
toolbox: {
right: 10,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
restore: {},
saveAsImage: {}
}
xAxis: {
type: 'category',
boundaryGap: false,
data: msg.time
},
yAxis: {
type: 'value'
},
dataZoom: [
{
startValue: '2014-06-01'
startValue: '2023-02-014'
},
{
type: 'inside'
}
],
visualMap: {
top: 50,
right: 10,
outOfRange: {
color: '#999'
series: [
{
name: 'Total',
type: 'line',
data: msg.sumList,
markLine: {
show: false,
Symbol: 'none',
label: {
position: 'end',
formatter: '合格线\n' + this.maxLine
},
data: [
{
silent: false,
lineStyle: {
type: 'dashed',
color: '#0B58FF'
},
yAxis: this.maxLine
}
]
}
},
{
name: 'M',
type: 'line',
data: msg.mList
},
{
name: 'L',
type: 'line',
data: msg.lList
},
{
name: 'S',
type: 'line',
data: msg.sList
},
{
name: 'XL',
type: 'line',
data: msg.xlList
}
},
series: {
name: 'Beijing AQI',
type: 'line',
data: msg.sList
}
]
}
option && this.chart.setOption(option)