vent-template/src/views/vent/home/dustHome/components/multipleDust.vue

<template>
    <div class="multipleDust">
        <div class="multiple-box" ref="multiple"></div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from 'vue'
import * as echarts from 'echarts';

//获取don元素节点
let multiple = ref()


function getOption() {
    nextTick(() => {
        let myChart = echarts.init(multiple.value);
        let option = {
            grid: {
                top: '8%',
                left: '5%',
                right: '5%',
                bottom: '8%',
                // containLabel: true
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    lineStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0,
                                color: 'rgba(31, 179, 247,0)'
                            }, {
                                offset: 0.5,
                                color: 'rgba(31, 179, 247,1)',
                            }, {
                                offset: 1,
                                color: 'rgba(31, 179, 247,0)'
                            }],
                            global: false
                        }
                    },
                },
            },

            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(100, 99, 99,.5)',
                            type: 'dashed'
                        },
                    },
                    // splitArea: {
                    //     show: true,
                    //     color: 'red',
                    //     lineStyle: {
                    //         color: 'red'
                    //     },
                    // },
                    axisLabel: {
                        fontSize: 14,
                        // margin: 10,
                        textStyle: {
                            color: '#b3b8cc',
                        },
                    },
                    splitLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },

                    data: ['12-01', '12-02', '12-03', '12-04', '12-05', '12-06'],

                }
            ],

            yAxis: [{
                type: 'value',
                min: 0,
                // max: 140,
                // splitNumber: 4,
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(100, 99, 99,.5)',
                            type: 'dashed'
                    }
                },
                axisLine: {
                    show: false,
                },
                axisLabel: {
                    show: false,
                    margin: 20,
                    textStyle: {
                        color: '#d1e6eb',

                    },
                },
                axisTick: {
                    show: false,
                },
            }],
            series: [
                {
                    name: '粉尘浓度',
                    type: 'line',
                    smooth: true, //是否平滑
                    showAllSymbol: true,
                    // symbol: 'image://./static/images/guang-circle.png',
                    symbol: 'circle',
                    symbolSize: 10,
                    lineStyle: {
                        normal: {
                            color: "#1fb3f7",
                            shadowColor: 'rgba(0, 0, 0, .3)',
                            shadowBlur: 0,
                            shadowOffsetY: 5,
                            shadowOffsetX: 5,
                        },
                    },
                    label: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            color: '#1fb3f7',
                        }
                    },
                    itemStyle: {
                        color: "#1fb3f7",
                        borderColor: "#fff",
                        borderWidth: 3,
                        shadowColor: 'rgba(0, 0, 0, .3)',
                        shadowBlur: 0,
                        shadowOffsetY: 2,
                        shadowOffsetX: 2,
                    },
                    tooltip: {
                        show: false
                    },
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(31, 179, 247,0.3)'
                            },
                            {
                                offset: 1,
                                color: 'rgba(31, 179, 247,0)'
                            }
                            ], false),
                            shadowColor: 'rgba(31, 179, 247, 0.9)',
                            shadowBlur: 20
                        }
                    },
                    data: [502.84, 205.97, 332.79, 281.55, 398.35, 214.02,]
                },
            ]
        };
        myChart.setOption(option);
        window.onresize = function () {
            myChart.resize();
        };
    });
}

onMounted(() => {
    getOption()
})

</script>

<style lang="less" scoped>
.multipleDust {
    position: relative;
    width: 100%;
    height: 100%;
    .multiple-box {
        width: 100%;
        height: 100%;
       }
}
</style>