jili2-screen/src/apps/home/components/smodule/smodule24.vue

<template>
    <div class="module-main">
        <div class="module-box">
            <div class="header">
                <div class="rhombus" />
                <span class="title">科室产废量分析TOP5</span>
            </div>
            <echarts v-if="!loading" :data="echartdata" class="echarts" />
        </div>
    </div>

</template>

<script>
import Vue from 'vue';
import Component from 'vue-class-component';
import Echarts from '@/common/components/echarts.vue';
import api from '../../api';

@Component({
    components: {
        Echarts,
    },
    props: {
        data: {
            type: Object,
            default: null,
        },
    },
})
export default class Smodule24 extends Vue {
    config = {

    }

    loading = true;

    echartdata = {

        color: ['#B24038', '#FFF000', '#709FA6', '#C8856B', '#FF69B4'], // , '#7D9D85'
        legend: {
            data: [],
            textStyle: {
                color: '#88B1D0',
                fontSize: 10,
            },
        },
        xAxis: [
            {
                type: 'category',
                data: [],
                rotate: 45,
                axisLabel: {
                    textStyle: {
                        color: '#fff',
                    },
                },
                splitLine: {
                    show: false, // 去掉网格线
                },
                splitArea: {
                    show: false,
                },
            },
        ],

        yAxis: [
            {
                type: 'value',
                interval: 50,
                axisLabel: {
                    textStyle: {
                        color: '#fff',
                    },
                },
                splitLine: {
                    show: false, // 去掉网格线
                },
                splitArea: {
                    show: false,
                },
            },
        ],
        series: [

        ],
    };

    created() {
        this.getDeviceList();

        setInterval(() => {
            this.getDeviceList();
        }, 5000 * 60);
    }

    getDeviceList() {
        api.getDeviceList().then((res) => {
            this.echartdata.legend.data = res.data.title1;
            this.echartdata.xAxis[0].data = res.data.title;
            const lists = res.data.list;
            const series = [];
            lists.forEach((e) => {
                series.push(
                    {
                        name: e.title,
                        type: 'line',
                        data: e.list,
                    },
                );
            });

            this.echartdata.series = series;

            this.loading = false;
        }).catch(() => { }).finally(() => {
            this.loading = false;
        });
    }
}
</script>

<style scoped lang="scss">
.module-box {
    width: 100%;
    height: 100%;
    position: relative;
}

.module-box .header {
    width: 97%;
    height: 40px;
    line-height: 40px;
    padding-left: 3%;
}

.module-box .header .rhombus {
    width: 14px;
    height: 14px;
    background: #2D59BC;
    display: inline-block;
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.module-box .header .title {
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 500;
    margin-left: 2%;
}

.module-box .echarts {
    width: 100%;
    height: auto;
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    bottom: 0;
}
</style>