|
|
|
@ -1,7 +1,7 @@
|
|
|
|
<!--
|
|
|
|
<!--
|
|
|
|
* @Author: your name
|
|
|
|
* @Author: your name
|
|
|
|
* @Date: 2021-10-12 15:06:47
|
|
|
|
* @Date: 2021-10-12 15:06:47
|
|
|
|
* @LastEditTime: 2021-10-26 09:11:47
|
|
|
|
* @LastEditTime: 2021-10-26 12:58:03
|
|
|
|
* @LastEditors: Please set LastEditors
|
|
|
|
* @LastEditors: Please set LastEditors
|
|
|
|
* @Description: In User Settings Edit
|
|
|
|
* @Description: In User Settings Edit
|
|
|
|
* @FilePath: /data-show/src/views/BrandInsight/weiboPortraits/index.vue
|
|
|
|
* @FilePath: /data-show/src/views/BrandInsight/weiboPortraits/index.vue
|
|
|
|
@ -13,18 +13,20 @@
|
|
|
|
</v-label-div>
|
|
|
|
</v-label-div>
|
|
|
|
<div class="wp-inner">
|
|
|
|
<div class="wp-inner">
|
|
|
|
<div class="wp-in-d1">
|
|
|
|
<div class="wp-in-d1">
|
|
|
|
<v-echarts :opt="opt"></v-echarts>
|
|
|
|
<v-echarts :opt="opt"></v-echarts>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="wp-in-d2">
|
|
|
|
<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>
|
|
|
|
<vue-scroll>
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
</vue-scroll>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
<script>
|
|
|
|
import {getSexMergeWeiBo} from "@/api/BrandInsight";
|
|
|
|
import { getSexMergeWeiBo } from "@/api/BrandInsight";
|
|
|
|
import createOpt from "./opt"
|
|
|
|
import createOpt from "./opt";
|
|
|
|
export default {
|
|
|
|
export default {
|
|
|
|
name: "weiboPortraits",
|
|
|
|
name: "weiboPortraits",
|
|
|
|
props: ["brand"],
|
|
|
|
props: ["brand"],
|
|
|
|
@ -52,8 +54,18 @@ export default {
|
|
|
|
"#91e8e1",
|
|
|
|
"#91e8e1",
|
|
|
|
"#f7a35c",
|
|
|
|
"#f7a35c",
|
|
|
|
"#90ed7d",
|
|
|
|
"#90ed7d",
|
|
|
|
|
|
|
|
"#54BF93",
|
|
|
|
|
|
|
|
"#3373CC",
|
|
|
|
|
|
|
|
"#CC9D12",
|
|
|
|
|
|
|
|
"#f15c80",
|
|
|
|
|
|
|
|
"#e4d354",
|
|
|
|
|
|
|
|
"#8085e8",
|
|
|
|
|
|
|
|
"#8d4653",
|
|
|
|
|
|
|
|
"#91e8e1",
|
|
|
|
|
|
|
|
"#f7a35c",
|
|
|
|
|
|
|
|
"#90ed7d",
|
|
|
|
],
|
|
|
|
],
|
|
|
|
}
|
|
|
|
};
|
|
|
|
},
|
|
|
|
},
|
|
|
|
created() {
|
|
|
|
created() {
|
|
|
|
this.form.token = this.getToken;
|
|
|
|
this.form.token = this.getToken;
|
|
|
|
@ -61,13 +73,13 @@ export default {
|
|
|
|
this.getData();
|
|
|
|
this.getData();
|
|
|
|
},
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
methods: {
|
|
|
|
// 切换数据
|
|
|
|
// 切换数据
|
|
|
|
handlerTab(n) {
|
|
|
|
handlerTab(n) {
|
|
|
|
if (n === 0) {
|
|
|
|
if (n === 0) {
|
|
|
|
this.labelData = this.sex;
|
|
|
|
this.labelData = this.sex;
|
|
|
|
let total = 0;
|
|
|
|
let total = 0;
|
|
|
|
this.sex.forEach((ele) => {
|
|
|
|
this.sex.forEach((ele) => {
|
|
|
|
total += ele.value;
|
|
|
|
total += ele.value * 1;
|
|
|
|
});
|
|
|
|
});
|
|
|
|
this.totalData = total;
|
|
|
|
this.totalData = total;
|
|
|
|
this.opt = createOpt(this.sex, [
|
|
|
|
this.opt = createOpt(this.sex, [
|
|
|
|
@ -79,15 +91,16 @@ export default {
|
|
|
|
this.labelData = this.attestation;
|
|
|
|
this.labelData = this.attestation;
|
|
|
|
let total = 0;
|
|
|
|
let total = 0;
|
|
|
|
this.attestation.forEach((ele) => {
|
|
|
|
this.attestation.forEach((ele) => {
|
|
|
|
total += ele.value;
|
|
|
|
total += ele.value * 1;
|
|
|
|
});
|
|
|
|
});
|
|
|
|
this.totalData = total;
|
|
|
|
this.totalData = total;
|
|
|
|
this.opt = createOpt(this.attestation, this.colors);
|
|
|
|
this.opt = createOpt(this.attestation, this.colors);
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
this.labelData = this.region;
|
|
|
|
this.labelData = this.region;
|
|
|
|
|
|
|
|
console.log(this.labelData)
|
|
|
|
let total = 0;
|
|
|
|
let total = 0;
|
|
|
|
this.region.forEach((ele) => {
|
|
|
|
this.region.forEach((ele) => {
|
|
|
|
total += ele.value;
|
|
|
|
total += ele.value * 1;
|
|
|
|
});
|
|
|
|
});
|
|
|
|
this.totalData = total;
|
|
|
|
this.totalData = total;
|
|
|
|
this.opt = createOpt(this.region, this.colors);
|
|
|
|
this.opt = createOpt(this.region, this.colors);
|
|
|
|
@ -97,29 +110,52 @@ export default {
|
|
|
|
getData() {
|
|
|
|
getData() {
|
|
|
|
this.load = true;
|
|
|
|
this.load = true;
|
|
|
|
let obj = Object.assign({}, this.getCommTime, this.form);
|
|
|
|
let obj = Object.assign({}, this.getCommTime, this.form);
|
|
|
|
getSexMergeWeiBo(obj).then(res => {
|
|
|
|
getSexMergeWeiBo(obj).then((res) => {
|
|
|
|
let data = res.data;
|
|
|
|
let data = res.data;
|
|
|
|
this.attestation = data.attestation || {};
|
|
|
|
let attestation = data.attestation || {};
|
|
|
|
this.sex = data.sex || {};
|
|
|
|
let sex = data.sex || {};
|
|
|
|
this.region = data.RegionWeiBo || {};
|
|
|
|
let region = data.RegionWeiBo || {};
|
|
|
|
let total = 0;
|
|
|
|
let total = 0;
|
|
|
|
console.log(this.sex)
|
|
|
|
let wSex = [];
|
|
|
|
|
|
|
|
for (let key in sex) {
|
|
|
|
this.sex.forEach((ele) => {
|
|
|
|
let obj = {
|
|
|
|
total += ele.value;
|
|
|
|
key: key,
|
|
|
|
});
|
|
|
|
value: sex[key],
|
|
|
|
this.totalData = total;
|
|
|
|
};
|
|
|
|
this.labelData = this.sex;
|
|
|
|
total += sex[key] * 1;
|
|
|
|
this.opt = createOpt(this.sex, [
|
|
|
|
wSex.push(obj);
|
|
|
|
"#54BF93",
|
|
|
|
}
|
|
|
|
"#3373CC",
|
|
|
|
let wAttestation = [];
|
|
|
|
"#CC9D12",
|
|
|
|
for (let key in attestation) {
|
|
|
|
]);
|
|
|
|
let obj = {
|
|
|
|
this.load = false;
|
|
|
|
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>
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
|
<style lang="less" scoped>
|
|
|
|
|
