<template>
    <div class="wlqk">
        <div id="wlqk-myChart" class="chart"></div>
    </div>
</template>

<script>
// 网络情况
export default {
    name: "wlqk",
    components: {},
    data () {
        return {
            xAxisData: [],
            wldkData: [],
            wlzcData: [],
        };
    },
    mounted () {
        this.echartInit();
    },
    methods: {
        echartInit () {
            let _this = this;
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(
                document.getElementById("wlqk-myChart")
            );
            // 绘制图表
            myChart.setOption({
                color: ["#ee9096", "#8fb657"],
                legend: {
                    data: ["网络断开", "网络正常"],
                    top: 20,
                },
                xAxis: [
                    {
                        type: "category",
                        data: _this.xAxisData,
                    },
                ],
                yAxis: [
                    {
                        type: "value",
                    },
                ],
                series: [
                    {
                        name: "网络断开",
                        type: "bar",
                        data: _this.wldkData,
                    },
                    {
                        name: "网络正常",
                        type: "bar",
                        data: _this.wlzcData,
                    },
                ],
            });
        },
    },
};
</script>
<style scoped lang="scss">
@import "./home.scss";

.wlqk {
    width: 100%;
    height: 100%;

    .chart {
        width: 100%;
        height: 100%;
    }
}
</style>