|
@@ -79,12 +79,12 @@ export default { |
|
|
let xlList = [] |
|
|
let xlList = [] |
|
|
let sumList = [] |
|
|
let sumList = [] |
|
|
let msg = {} |
|
|
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)) |
|
|
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]) |
|
|
sumList.push(sList[i] + mList[i] + lList[i] + xlList[i]) |
|
|
} |
|
|
} |
|
|
msg.time = time |
|
|
msg.time = time |
|
@@ -194,50 +194,84 @@ export default { |
|
|
getChart(msg) { |
|
|
getChart(msg) { |
|
|
console.log(msg) |
|
|
console.log(msg) |
|
|
var option = { |
|
|
var option = { |
|
|
|
|
|
color: ['#5AD8A6', '#5B8FF9', '#5D7092', '#F6BD16', '#E8684A'], |
|
|
title: { |
|
|
title: { |
|
|
text: 'Beijing AQI', |
|
|
|
|
|
|
|
|
text: '时间段玻璃颗粒数', |
|
|
left: '1%' |
|
|
left: '1%' |
|
|
}, |
|
|
}, |
|
|
tooltip: { |
|
|
tooltip: { |
|
|
trigger: 'axis' |
|
|
trigger: 'axis' |
|
|
}, |
|
|
}, |
|
|
|
|
|
legend: { |
|
|
|
|
|
data: ['Total', 'M', 'L', 'S', 'XL'], |
|
|
|
|
|
right: '4%' |
|
|
|
|
|
}, |
|
|
grid: { |
|
|
grid: { |
|
|
left: '5%', |
|
|
|
|
|
right: '15%', |
|
|
|
|
|
|
|
|
left: '4%', |
|
|
|
|
|
right: '4%', |
|
|
bottom: '10%' |
|
|
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: [ |
|
|
dataZoom: [ |
|
|
{ |
|
|
{ |
|
|
startValue: '2014-06-01' |
|
|
|
|
|
|
|
|
startValue: '2023-02-014' |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
type: 'inside' |
|
|
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) |
|
|
option && this.chart.setOption(option) |
|
|