<template>
    <div class="layout-container-main" id="jcsb">
        <div class="item" id="box1">
            <div class="layout-container-main-top" style="display: flex;justify-content: space-between;">
                <div class="top-left">
                    <div class="line"></div>
                    <span>用户在线量</span>
                    <!--  <div v-for="(item, index) in options" :key="item.value">
                        <span class="text" :class="{ active: tabIndex == index }" @click="clickTap(index, item)">{{
                            item.label
                            }}</span>
                    </div> -->
                </div>
                <!--  <div>
                    <el-select v-model="value1" placeholder="年份" style="width: 100px" @change="changeData1">
                        <el-option v-for="item in year" :key="item.value" :label="`${item.label}年`"
                            :value="item.value" />
                    </el-select>
                    <el-select v-model="value2" placeholder="月份" style="width: 80px" @change="changeData">
                        <el-option v-for="(item, index) in 12" :key="index" :label="`${item}月`" :value="item" />
                    </el-select>
                </div> -->
                <div class="main"></div>
            </div>
            <div class="main-echart" ref="chartRef">
                <Chart :option="options" />
            </div>

        </div>
    </div>
</template>

<script lang="js" setup>
    import { defineComponent, reactive, ref, onMounted } from 'vue'
    import Chart from '@/components/charts/index.vue'
    // import * as echarts from 'echarts'

    const seriesData = [450, 200, 300, 520, 800, 760, 700, 680, 700, 650, 690, 710, 450, 200, 300, 520, 800, 760, 700, 680, 700, 650, 690, 710]
    const xAxisList = [
        '00:00',
        '01:00',
        '02:00',
        '03:00',
        '04:00',
        '05:00',
        '06:00',
        '07:00',
        '08:00',
        '09:00',
        '10:00',
        '11:00',
        '12:00',
        '13:00',
        '14:00',
        '15:00',
        '16:00',
        '17:00',
        '18:00',
        '19:00',
        '20:00',
        '21:00',
        '22:00',
        '23:00',
    ]
    const options = {
        title: {
            text: "单位：个", // 主标题文本，支持使用 \n 换行
            textStyle: {
                color: "#808080", // 主标题文字的颜色
                fontSize: 12 // 主标题文字的字体大小
            },
            left: "20", // title 组件离容器左侧的距离
            top: "20" // title 组件离容器上侧的距离
        },
        tooltip: {
            trigger: 'axis',
            formatter: '{c}个' // 提示框浮层内容格式器
        },
        legend: {
            data: ['在线量'],
            top: 'top', // 或者自定义位置
            textStyle: {
                color: '#808080'
            }
        },
        xAxis: {
            type: 'category',
            data: xAxisList,
            axisLabel: {
                // 坐标轴字体颜色
                color: "#808080",
                fontSize: 12
            },
            axisLine: {
                show: false, // 是否显示
            },
            axisTick: { // y轴刻度线
                show: false // 是否显示
            },
            splitLine: { // 网格
                show: false // 是否显示
            },
        },
        yAxis: {
            min: 0,
            nameTextStyle: {
                color: '#808080',
                fontSize: 12,
            },
            axisLabel: {
                // 坐标轴字体颜色
                color: "#808080",
                fontSize: 12
            },
            axisLine: {
                show: false
            },
            axisTick: {
                // y轴刻度线
                show: false
            },
            splitLine: { // 网格
                show: true, // 是否显示
                lineStyle: {
                    color: 'rgba(0,0,0,0.15)', // 颜色
                }
            }
        },

        series: [
            {
                type: 'line',
                name: '在线量',
                symbolSize: 10,
                z: 1,
                label: {
                    show: true, // 线条折点处显示值
                    position: 'top', // 标签的位置
                    color: "#808080", // 文字颜色
                    fontSize: 12, // 文字像素
                },
                itemStyle: {
                    color: '#325DEC' // 图形的颜色
                },
                lineStyle: {
                    color: '#325DEC', // 线的颜色
                    width: 1, // 线的宽度
                },
                data: seriesData, // 数据
            }
        ]
    };

    /*   const chartRef = ref(null)
  
      onMounted(() => {
          const chart = echarts.init(chartRef.value)
          chart.setOption(options)
      }) */
</script>

<style lang="scss" scoped>
    .box {
        margin: 20px auto 0;
        width: calc(100% - 40px);
        /* height: 400px; */
        background: var(--system-page-background);
        padding: 20px 20px 10px;
        overflow: hidden;
    }

    .layout-container-main {
        display: flex;
        /* margin: 0 1.25rem; */
        flex-wrap: wrap;

        .item {
            width: 100%;
            display: flex;
            flex-direction: column;
            padding: 1.13rem 1.31rem;
            margin-bottom: 1.25rem;
            height: 26.94rem;
            border-radius: 0.5rem;
            background: #fff;
            box-shadow: 0 0 0.13rem #00000029;

            .layout-container-main-top {
                height: 6vh;

                .top-left {
                    display: flex;

                    .line {
                        width: 0.25rem;
                        height: 1.56rem;
                        border-radius: 0.13rem;
                        background: #fdb818;
                    }

                    span {
                        margin: 0 1rem;
                        font-family: "PingFang SC SNaNremibold";
                        font-weight: 600;
                        font-size: 1.13rem;

                        color: #333;
                    }

                    .text {
                        display: inline-block;
                        // margin: 0 0.63rem;
                        width: 3.63rem;
                        font-weight: 400;
                        height: 1.88rem;
                        line-height: 1.88rem;
                        border-radius: 0.25rem;
                        background: transparent;
                        border: 0.03rem solid #999;
                        font-size: 0.88rem;
                        text-align: center;
                        color: #999;
                        cursor: pointer;
                    }

                    .active {
                        border-radius: 0.25rem;
                        background: #fdb818;
                        color: #fff;
                        border: 0.03rem solid #fff;
                    }
                }
            }

            .main-echart {
                width: 100%;
                height: 55vh;
                /* background-color: red; */
            }
        }
    }
</style>