【记录18】echarts 折线图：展示数值，加背景颜色

<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>