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

<!--
 * @Author: your name
 * @Date: 2021-10-12 14:19:53
 * @LastEditTime: 2021-11-01 09:59:47
 * @LastEditors: Please set LastEditors
 * @Description: 微博KOL
 * @FilePath: /data-show/src/views/BrandInsight/weiboKol/index.vue
-->

<template>
    <div class="wk-outter" v-loading="load">
        <div class="wk-inner">
            <div class="wk-in-d1">
                <v-label-div title="微博KOL" :showLine="false" :eStyle="{ 'border-style': 'none' }"></v-label-div>
                <div class="wk-in-d1-dd1">
                    <v-echarts :opt="opt"></v-echarts>
                </div>
            </div>
            <div class="wk-in-d2">
                <vue-scroll>
                    <v-label-ctx v-for="(item,index) in labelData" :key="index" :label="item.key" :cont="item.value" :percentage="(item.value/total*100).toFixed(2) +'%'" :color="colors[index]" contLabel="数量" :eStyle="{ height: '5rem' }"></v-label-ctx>
                </vue-scroll>
            </div>
        </div>
    </div>
</template>

<script>
import { getBoauthenCount0528 } from "@/api/BrandInsight";
import createOpt from "./opt";
export default {
    name: "weiboKol",
    props: ["brand"],
    data() {
        return {
            load: false,
            form: {
                sBrand: "",
                token: "",
            },
            opt: {},
            labelData: [],
            total: 0,
            colors: [
                "#54BF93",
                "#3373CC",
                "#CC9D12",
                "#f15c80",
                "#e4d354",
                "#8085e8",
                "#8d4653",
                "#91e8e1",
                "#f7a35c",
                "#90ed7d",
                "#54BF93",
                "#3373CC",
                "#CC9D12",
                "#f15c80",
                "#e4d354",
                "#8085e8",
                "#8d4653",
                "#91e8e1",
                "#f7a35c",
                "#90ed7d",
            ],
        };
    },
    created() {
        this.form.token = this.getToken;
        this.form.sBrand = this.getBrand.brandname || this.brand;
        this.getData();
    },
    methods: {
        getData() {
            let obj = Object.assign({}, this.getCtime2, this.form);
            this.load = true;
            getBoauthenCount0528(obj).then((res) => {
                let data = res.data || [];
                let total = 0;
                data.forEach((ele) => {
                    total += ele.value * 1;
                });
                this.total = total;
                this.labelData = data;
                this.opt = createOpt(data, this.colors);
                this.load = false;
            });
        },
    },
};
</script>

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