carInsightSystem/src/views/BrandInsight/weiboPortraits/index.vue

<!--
 * @Author: your name
 * @Date: 2021-10-12 15:06:47
 * @LastEditTime: 2021-10-26 09:11:47
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /data-show/src/views/BrandInsight/weiboPortraits/index.vue
-->
<template>
    <div class="wp-outter" v-loading="load">
        <v-label-div title="微博人物画像" :showLine="false" :eStyle="{ 'border-style': 'none' }">
            <v-tab-group :btns="['性别', '认证', '地区']" @change="handlerTab"></v-tab-group>
        </v-label-div>
        <div class="wp-inner">
            <div class="wp-in-d1">
                 <v-echarts :opt="opt"></v-echarts>
            </div>
            <div class="wp-in-d2">
                <v-label-ctx v-for="(item,index) in labelData" :key="index" :label="item.key" :cont="item.value" :percentage="(item.value/totalData*100).toFixed(2) +'%'" :color="colors[index]" :eStyle="{ height: '121px' }"></v-label-ctx>
            </div>
        </div>
    </div>
</template>

<script>
import {getSexMergeWeiBo} from "@/api/BrandInsight";
import createOpt from "./opt"
export default {
    name: "weiboPortraits",
    props: ["brand"],
    data() {
        return {
            form: {
                sBrand: "",
                token: "",
            },
            load: false,
            attestation: [], // 认证
            sex: [], // 性别
            region: [], // 地区
            opt: {},
            labelData: [],
            totalData: 0,
            colors: [
                "#54BF93",
                "#3373CC",
                "#CC9D12",
                "#f15c80",
                "#e4d354",
                "#8085e8",
                "#8d4653",
                "#91e8e1",
                "#f7a35c",
                "#90ed7d",
            ],
        }
    },
    created() {
        this.form.token = this.getToken;
        this.form.sBrand = this.brand;
        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() {
            this.load = true;
            let obj = Object.assign({}, this.getCommTime, this.form);
            getSexMergeWeiBo(obj).then(res => {
                    let data = res.data;
                    this.attestation = data.attestation || {};
                    this.sex = data.sex || {};
                    this.region = data.RegionWeiBo || {};
                    let total = 0;
                    console.log(this.sex)
                   
                    this.sex.forEach((ele) => {
                        total += ele.value;
                    });
                    this.totalData = total;
                    this.labelData = this.sex;
                    this.opt = createOpt(this.sex, [
                        "#54BF93",
                        "#3373CC",
                        "#CC9D12",
                    ]);
                    this.load = false;
            })
        }
    }
}
</script>

<style lang="less" scoped>
.wp-outter {
    width: 628px;
    height: 412px;
    margin-left: 16px;
    .wp-inner {
        width: 100%;
        height: calc(100% - 48px);
        display: flex;
        justify-content: flex-start;
        .wp-in-d1 {
            width: 310px;
            height: 100%;
        }
        .wp-in-d2 {
            width: 310px;
            height: auto;
            margin-left: 16px;
        }
    }
}
</style>