颗粒折线图 #4
@ -64,18 +64,20 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
console.log('init')
|
||||
},
|
||||
selectLine(val) {
|
||||
this.form.proLineId = val
|
||||
setAlarmValueGet({ id: val }).then((res) => {
|
||||
if (res.code === 0 && res.data) {
|
||||
this.form.adsorptionPadCeiling = res.data.adsorptionPadCeiling
|
||||
? res.data.adsorptionPadCeiling
|
||||
: null
|
||||
: 0
|
||||
this.form.auxiliaryFrameCeiling = res.data.auxiliaryFrameCeiling
|
||||
? res.data.auxiliaryFrameCeiling
|
||||
: null
|
||||
: 0
|
||||
} else {
|
||||
this.form.adsorptionPadCeiling = 0
|
||||
this.form.auxiliaryFrameCeiling = 0
|
||||
}
|
||||
})
|
||||
},
|
||||
submitForm() {
|
||||
|
@ -141,9 +141,6 @@ export default {
|
||||
this.getList()
|
||||
} else {
|
||||
this.centervisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.alarmAdd.init()
|
||||
})
|
||||
}
|
||||
},
|
||||
tableRowClassName({ row }) {
|
||||
|
@ -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'
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: msg.time
|
||||
},
|
||||
restore: {},
|
||||
saveAsImage: {}
|
||||
}
|
||||
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
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
series: {
|
||||
name: 'Beijing AQI',
|
||||
{
|
||||
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
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
option && this.chart.setOption(option)
|
||||
|
Loading…
Reference in New Issue
Block a user