carInsightSystem/src/views/Index/userPortrait/index.vue

<!--
 * @Author: xw
 * @Date: 2021-10-09 09:04:01
 * @LastEditTime: 2021-10-22 09:29:49
 * @LastEditors: Please set LastEditors
 * @Description: 用户画像
 * @FilePath: /data-show/src/views/Index/userPortrait/index.vue
-->
<template>
    <div class="u-p-outter">
        <v-label-div title="用户画像">
            <v-tab-group :btns="['性别', '认证', '地区']" @change="handlerTab"></v-tab-group>
        </v-label-div>
        <div class="u-p-bd">
            <div class="u-p-char">
                <v-echarts :opt="opt"></v-echarts>
            </div>
            <div class="u-p-bd-1">
                <vue-scroll>
                    <v-label-ctx :label="item.key" :cont="item.value" :percentage="(item.value/totalData*100).toFixed(2) +'%'" :color="colors[index]" v-for="(item,index) in labelData" :key="index"></v-label-ctx>
                </vue-scroll>
            </div>
        </div>
    </div>
</template>

<script>
import createOpt from "./opt";
import { getSexOrAttestationOrRegionHome0528 } from "@/api/home";
export default {
    name: "user-portrait",
    data() {
        return {
            attestation: [], // 认证
            sex: [], // 性别
            region: [], // 地区
            opt: {},
            labelData: [],
            totalData: 0,
            colors: [
                "#54BF93",
                "#3373CC",
                "#CC9D12",
                "#f15c80",
                "#e4d354",
                "#8085e8",
                "#8d4653",
                "#91e8e1",
                "#f7a35c",
                "#90ed7d",
            ],
        };
    },
    created() {
        this.getData();
    },
    methods: {
        // 切换数据
        handlerTab(n) {
            if (n === 0) {
                this.labelData = this.sex;
                let total = 0;
                this.sex.forEach((ele) => {
                    total += ele.value;
                });
                this.totalData = total;
                this.opt = createOpt(this.sex, [
                    "#54BF93",
                    "#3373CC",
                    "#CC9D12",
                ]);
            } else if (n === 1) {
                this.labelData = this.attestation;
                let total = 0;
                this.attestation.forEach((ele) => {
                    total += ele.value;
                });
                this.totalData = total;
                this.opt = createOpt(this.attestation, this.colors);
            } else {
                this.labelData = this.region;
                let total = 0;
                this.region.forEach((ele) => {
                    total += ele.value;
                });
                this.totalData = total;
                this.opt = createOpt(this.region, this.colors);
            }
        },
        // 获取远程数据
        getData() {
            getSexOrAttestationOrRegionHome0528(this.getCommTime).then(
                (res) => {
                    let data = res.data;
                    this.attestation = data.attestation;
                    this.sex = data.sex;
                    this.region = data.region;
                    let total = 0;
                    this.sex.forEach((ele) => {
                        total += ele.value;
                    });
                    this.totalData = total;
                    this.labelData = this.sex;
                    this.opt = createOpt(this.sex, [
                        "#54BF93",
                        "#3373CC",
                        "#CC9D12",
                    ]);
                }
            );
        },
    },
};
</script>
<style lang="less" scoped>
.u-p-outter {
    width: 460px;
    height: 316px;
    border: 2px solid #0f2a4d;
    margin-top: 16px;
    margin-left: 16px;
}
.u-p-bd {
    padding: 0 16px;
    height: calc(100% - 48px);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .u-p-char {
        width: 180px;
        height: 180px;
    }
    .u-p-bd-1 {
        width: 218px;
        height: 100%;
        margin-left: 16px;
        overflow: auto;
    }
}
</style>