carInsightSystem_web/src/views/ModelInsight/mlWeiboPortraits/index.vue

<!--
 * @Author: your name
 * @Date: 2021-10-12 15:06:47
 * @LastEditTime: 2021-11-10 09:42:52
 * @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">
                <div v-if="labelData.length<=3">
                    <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: '7.6rem' }">
                    </v-label-ctx>
                </div>
                <vue-scroll v-if="labelData.length>3">
                    <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: '4.56rem' }">
                    </v-label-ctx>
                </vue-scroll>
            </div>
        </div>
    </div>
</template>

<script>
import { getSexMergeWeiBo } from "@/api/ModelInsight";
import createOpt from "./opt";
export default {
    name: "mlWeiboPortraits",
    props: ["brand", "model"],
    data() {
        return {
            load: false,
            form: {
                sBrand: "",
                sSeriesName: "",
                token: "",
            },
            attestation: [], // 认证
            sex: [], // 性别
            region: [], // 地区
            opt: {},
            labelData: [],
            totalData: 0,
            colors: [
                "#3373CC",
                "#CC9D12",
                "#54BF93",
                "#f15c80",
                "#e4d354",
                "#8085e8",
                "#8d4653",
                "#91e8e1",
                "#f7a35c",
                "#90ed7d",
                "#54BF93",
                "#3373CC",
                "#CC9D12",
                "#f15c80",
                "#e4d354",
                "#8085e8",
                "#8d4653",
                "#91e8e1",
                "#f7a35c",
                "#90ed7d",
            ],
        };
    },
    watch: {
        model: {
            handler(val) {
                if (val) {
                    this.form.token = this.getToken;
                    this.form.sBrand = this.brand;
                    this.form.sSeriesName = this.model;
                    this.getData();
                }
            },
            immediate: true,
        },
    },
    methods: {
        // 切换数据
        handlerTab(n) {
            if (n === 0) {
                this.labelData = this.sex;
                let total = 0;
                this.sex.forEach((ele) => {
                    total += ele.value * 1;
                });
                this.totalData = total;
                this.opt = createOpt(this.sex, this.colors);
            } else if (n === 1) {
                this.labelData = this.attestation;
                let total = 0;
                this.attestation.forEach((ele) => {
                    total += ele.value * 1;
                });
                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 * 1;
                });
                this.totalData = total;
                this.opt = createOpt(this.region, this.colors);
            }
        },
        // 获取后台数据
        getData() {
            this.load = true;
            let obj = Object.assign({}, this.getCtime2, this.form);
            getSexMergeWeiBo(obj).then((res) => {
                let data = res.data;
                let attestation = data.attestation || {};
                let sex = data.sex || {};
                let region = data.RegionWeiBo || {};
                let total = 0;
                let wSex = [];
                for (let key in sex) {
                    let obj = {
                        key: key,
                        value: sex[key],
                    };
                    total += sex[key] * 1;
                    wSex.push(obj);
                }
                let wAttestation = [];
                for (let key in attestation) {
                    let obj = {
                        key: key,
                        value: attestation[key],
                    };
                    wAttestation.push(obj);
                }
                let wRegion = [];
                for (let key in region) {
                    let obj = {
                        key: key,
                        value: region[key],
                    };
                    wRegion.push(obj);
                }
                this.sex = wSex;
                this.attestation = wAttestation;
                this.region = wRegion;
                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>