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

<template>
    <div class="module-main">
        <div class="module-box">
            <div class="header">
                <div class="rhombus" />
                <span class="title">医废周数据分析</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 Smodule100 extends Vue {
    loading = true;

    echartdata = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999',
                },
            },
        },
        color: ['#B24038', '#FFF000', '#709FA6', '#C8856B', '#9DC5B0'], // , '#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.getWeekCateRecord();
        setInterval(() => {
            this.getWeekCateRecord();
        }, 5000 * 60);
    }

    getWeekCateRecord() {
        this.loading = true;
        api.getWeekCateRecord().then((res) => {
            this.echartdata.xAxis[0].data = res.data.date;
            this.echartdata.legend.data = res.data.cate;
            const lists = res.data.list;
            const series = [];
            lists.forEach((e) => {
                series.push(
                    {
                        name: e.title,
                        type: 'bar',
                        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>