<template>
<!-- 粉尘 -->
<div id="dus">
<el-row>
<el-col :span="24" :style="titilebg" class='hig'><span style="margin-left:4vw;" title="滤膜测尘法的原理:用抽气装置抽取一定量的含尘空气,使其通过装有滤膜的采样器,滤膜将粉尘截留,然后根据滤膜所增加的质量和通过的空气量计算出粉尘的浓度">粉尘(PM1、PM2.5、PM10)</span></el-col>
</el-row>
<el-row>
<el-col>
<div id="dus2"></div>
</el-col>
</el-row>
</div>
</template>
<script>
import * as echarts from 'echarts'
import value from '@/js/token.js'
export default {
data(){
return {
titilebg: {
backgroundImage:"url(" + require("@/images/titlebg.png") + ")",
backgroundRepeat:"np-repeat",
backgroundSize:"100% 100%",
},
PM_listTime: [],
PM25_list: [],
PM1_list: [],
PM10_list: [],
}
},
methods:{
get_PM_data(){
this.PM25_list=[]
this.PM1_list=[]
this.PM10_list=[]
this.PM_listTime=[]
// this.$http.get("/interface/env-monitoring/?facility_id=4").then(res =>{
this.$http.get('/api/?type=DUST-粉尘',{headers:{AUTHORIZATION:value.environment_gas.token}}).then( res => {
if(res.data.code == 200){
var PM25_list = []
var PM1_list = []
var PM10_list = []
for(var i=0;i<res.data.data.length;i++){
if(res.data.data[i].sequence == '3'){ //pm2.5
PM25_list.push(res.data.data[i].origin_value);
let a = res.data.data[i].create_time.split('T') //同一个设备,获取时间
this.PM_listTime.push(a[0] + ' '+ a[1])
}else if(res.data.data[i].sequence == '6'){ //pm1
PM1_list.push(res.data.data[i].origin_value);
}else if(res.data.data[i].sequence == '7'){ //pm10
PM10_list.push(res.data.data[i].origin_value)
}
}
this.PM25_list = PM25_list.reverse()
this.PM1_list = PM1_list.reverse()
this.PM10_list = PM10_list.reverse()
this.PM_listTime.reverse()
sessionStorage.setItem('PM25',this.PM25_list[this.PM25_list.length-1])
sessionStorage.setItem('PM1',this.PM1_list[this.PM1_list.length-1])
sessionStorage.setItem('PM10',this.PM10_list[this.PM10_list.length-1])
}
this.get_PM_echarts()
})
},
get_PM_echarts(){
var MyCharts = echarts.init(document.getElementById('dus2'))
let label = this.PM_listTime
let value25 = this.PM25_list
let value1 = this.PM1_list
let value10 = this.PM10_list
let option = {
// backgroundColor: '',
grid: { //控制图标的对四周的距离
top: '10%',
right: '3%',
bottom: '10%',
left: '4%',
},
legend: { //控制显示鼠标移上去显示的数据内容和样式
show: true, //显隐
textStyle: {
color: '#FFF'
},
data: [{ name: 'PM2.5'},{ name: 'PM1'},{ name: 'PM10'}]
},
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(255,255,255,0)', // 0% 处的颜色
},
{
offset: 0.5,
color: 'rgba(255,255,255,1)', // 100% 处的颜色
},
{
offset: 1,
color: 'rgba(255,255,255,0)', // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
},
},
xAxis: [
{
type: 'category', // 条形图
boundaryGap: false,
axisLabel: {
formatter: '{value}',
fontSize: 12,
margin: 8,
textStyle: {
color: '#7ec7ff',
},
},
axisLine: { // x轴线间隔线
lineStyle: {
color: '#243753',
},
},
splitLine: { //x轴分割线
show: true,
lineStyle: {
color: '#243753',
},
},
axisTick: {
show: false,
},
data: label,
},
],
yAxis: [
{
boundaryGap: false,
type: 'value',
// name: '甲烷',
axisLabel: {
textStyle: {
color: '#7ec7ff',
},
},
nameTextStyle: {
color: '#fff',
fontSize: 12,
lineHeight: 10,
},
splitLine: {
lineStyle: {
color: '#243753',
},
},
axisLine: {
show: true,
lineStyle: {
color: '#283352',
},
},
axisTick: {
show: false,
},
},
],
series: [
//PM2.5
{
name: 'PM2.5',
type: 'line',
smooth: true,
showSymbol: true,
symbolSize: 5,
zlevel: 3,
itemStyle: { // 字体的颜色和背景色
color: '#00FFFF',
borderColor: '#00FFFF',
},
label: { // 图标上方显示对应是数据
show: true,
position: 'top',
textStyle: {
color: '#00FFFF',
}
},
lineStyle: { // 线条的样式
normal: {
width: 2,
color: '#00FFFF',
},
},
areaStyle: { // 区域的样式
normal: {
color: new echarts.graphic.LinearGradient(
0,0,0,1,
[
{
offset: 0,
color: 'rgba(88,255,255,0.2)',
},
{
offset: 0.8,
color: 'rgba(88,255,255,0)',
},
],
false
),
},
},
data: value25,
},
//PM1
{
name: 'PM1',
type: 'line',
smooth: true,
showSymbol: true,
symbolSize: 5,
zlevel: 3,
itemStyle: {
color: '#FFDEAD',
borderColor: '#FFDEAD',
},
label: {
show: true,
position: 'top',
textStyle: {
color: '#FFDEAD',
}
},
lineStyle: {
normal: {
width: 2,
color: '#FFDEAD',
},
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: 'rgba(88,255,255,0.2)',
},
{
offset: 0.8,
color: 'rgba(88,255,255,0)',
},
],
false
),
},
},
data: value1,
},
//PM10
{
name: 'PM10',
type: 'line',
smooth: true,
showSymbol: true,
symbolSize: 5,
zlevel: 3,
itemStyle: {
color: '#19a3df',
borderColor: '#a3c8d8',
},
label: {
show: true,
position: 'top',
textStyle: {
color: '#7ec7ff',
}
},
lineStyle: {
normal: {
width: 2,
color: '#19a3df',
},
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: 'rgba(88,255,255,0.2)',
},
{
offset: 0.8,
color: 'rgba(88,255,255,0)',
},
],
false
),
},
},
data: value10,
},
],
};
MyCharts.setOption(option)
}
},
mounted(){
this.get_PM_data()
this.get_PM_echarts()
window.setInterval(() => {
this.get_PM_data()
}, 1000*60*6)
}
}
</script>
<style>
#dus { width: 100%; height: 29vh; }
#dus2 { width: 100%; height:26vh; }
.hig { height:3vh;width:100%; line-height: 3vh; color: white; font-size: 1.1em; }
</style>
【记录18】echarts 折线图:展示数值,加背景颜色
于 2022-03-17 14:10:19 首次发布