<!--
 * @Author: your name
 * @Date: 2021-10-19 19:35:25
 * @LastEditTime: 2021-11-04 16:04:07
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /data-show/src/views/EventDEC/tonalCommunicationPosture/index.vue
-->
<template>
    <div class="tcp-outter">
        <v-label-div title="事件传播态势">
            <a-select :default-value="1" :size="$vuiSize" style="width: 120px; margin-left: 40px; margin-right: 8px" v-model="selVal" @change="handleChange">
                <a-select-option :style="{ color: '#fff' }" v-for="item in selDatas" :value="item.key" :key="item.key">
                    {{ item.label }}
                </a-select-option>
            </a-select>
        </v-label-div>
        <div class="tcp-inner">
            <v-echarts :opt="opt"></v-echarts>
        </div>
    </div>
</template>

<script>
import createOpt from "./opt"
export default {
    name: "tonalCommunicationPosture",
    data() {
        return {
            opt: createOpt(),
            selVal: 1,
            selDatas: [
                {
                    key: 1,
                    label: "24小时",
                },
                {
                    key: 2,
                    label: "最近7天",
                },
                {
                    key: 3,
                    label: "最近30天",
                },
                {
                    key: 4,
                    label: "自定义",
                },
            ],
        };
    },
    methods: {
       handleChange() {}
    }
};
</script>

<style lang="less" scoped>
.tcp-outter {
    width: 100%;
    height: 460px;
    border: 2px solid #0f2a4d;
    margin-top: 16px;
    .tcp-inner {
        width: 100%;
        height: calc(100% - 48px);
    }
}
</style>
