yunyang
/
carInsightSystem
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

cxw-010203

Browse Source
prod
lily.zhang 3 years ago
parent c1f5e556f1
commit 7b54c62959
7 changed files with 240 additions and 126 deletions
Show Stats Download Patch File Download Diff File

30
src/api/BrandInsight/index.js
Unescape View File

@ -1,7 +1,7 @@
/*
* @Author: your name
* @Date: 2021-10-25 15:38:59
* @LastEditTime: 2021-10-25 18:58:15
* @LastEditTime: 2021-10-26 08:50:57
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/api/BrandInsight/index.js
@ -54,3 +54,31 @@ export function getHotEventsList0528(params) {
params: obj
})
}
// 热点事件
export function getHotEventsType(params) {
let obj = Object.assign({action: 'getHotEventsType', sType: 'HotEvent'}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'get',
params: obj
})
}
// 微博KOL
export function getBoauthenCount0528(params) {
let obj = Object.assign({action: 'getBoauthenCount0528', sType: 'BrandWeiBo'}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'get',
params: obj
})
}
// 微博洞察-微博人物画像
export function getSexMergeWeiBo(params) {
let obj = Object.assign({action: 'getSexMergeWeiBo', sType: 'BrandWeiBo'}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'get',
params: obj
})
}

8
src/views/BrandInsight/index.vue
Unescape View File

@ -1,7 +1,7 @@
<!--
* @Author: xw
* @Date: 2021-10-11 17:59:49
* @LastEditTime: 2021-10-25 18:52:45
* @LastEditTime: 2021-10-26 08:54:31
* @LastEditors: Please set LastEditors
* @Description: 品牌洞察
* @FilePath: /data-show/src/views/BrandInsight/index.vue
@ -31,7 +31,7 @@
</v-label-div>
<div class="bdl-d2-bd">
<popular-events-list :brand="brand"></popular-events-list>
<popular-events></popular-events>
<popular-events :brand="brand"></popular-events>
</div>
</div>
<div class="bdl-d3">
@ -39,8 +39,8 @@
<v-btn @click="goRouter('/weiboDetails')">微博详情</v-btn>
</v-label-div>
<div class="bdl-d3-bd">
<weibo-Kol></weibo-Kol>
<weibo-portraits></weibo-portraits>
<weibo-Kol :brand="brand"></weibo-Kol>
<weibo-portraits :brand="brand"></weibo-portraits>
<weibo-volume-trend></weibo-volume-trend>
</div>
</div>

31
src/views/BrandInsight/popularEvents/index.vue
Unescape View File

@ -1,7 +1,7 @@
<!--
* @Author: xw
* @Date: 2021-10-12 11:06:58
* @LastEditTime: 2021-10-12 11:20:47
* @LastEditTime: 2021-10-25 19:06:12
* @LastEditors: Please set LastEditors
* @Description: 热门事件
* @FilePath: /data-show/src/views/BrandInsight/popularEvents/index.vue
@ -16,15 +16,34 @@
</template>
<script>
import createOpt from "./opt"
import { getHotEventsType } from "@/api/BrandInsight";
import createOpt from "./opt";
export default {
name: "popularEvents",
props: ["brand"],
data() {
return {
opt: createOpt()
}
}
}
form: {
sBrand: "",
token: "",
},
opt: createOpt(),
};
},
created() {
this.form.token = this.getToken;
this.form.sBrand = this.brand;
this.getData();
},
methods: {
getData() {
let obj = Object.assign({}, this.getCommTime, this.form);
getHotEventsType(obj).then((res) => {
console.log(res);
});
},
},
};
</script>
<style lang="less" scoped>

3
src/views/BrandInsight/popularEventsList/index.vue
Unescape View File

@ -1,7 +1,7 @@
<!--
* @Author: xw
* @Date: 2021-10-12 10:50:44
* @LastEditTime: 2021-10-25 18:59:42
* @LastEditTime: 2021-10-25 19:07:28
* @LastEditors: Please set LastEditors
* @Description: 热门事件列表
* @FilePath: /data-show/src/views/BrandInsight/popularEventsList/index.vue
@ -67,7 +67,6 @@ export default {
header: ["事件列表", "影响力", "时间", "关联车型"],
data: arr,
};
console.log(res);
});
},
},

62
src/views/BrandInsight/weiboKol/index.vue
Unescape View File

@ -1,7 +1,7 @@
<!--
* @Author: your name
* @Date: 2021-10-12 14:19:53
* @LastEditTime: 2021-10-12 15:22:09
* @LastEditTime: 2021-10-26 08:56:37
* @LastEditors: Please set LastEditors
* @Description: 微博KOL
* @FilePath: /data-show/src/views/BrandInsight/weiboKol/index.vue
@ -17,25 +17,73 @@
</div>
</div>
<div class="wk-in-d2">
<v-label-ctx label="名人" cont="2000" percentage="25%" color="#3373CC" contLabel="数量" :eStyle="{ height: '82px' }"></v-label-ctx>
<v-label-ctx label="政府" cont="2000" percentage="25%" color="#518ea9" contLabel="数量" :eStyle="{ height: '82px' }"></v-label-ctx>
<v-label-ctx label="大V" cont="1000" percentage="25%" color="#54BF93" contLabel="数量" :eStyle="{ height: '82px' }"></v-label-ctx>
<v-label-ctx label="企业" cont="1000" percentage="25%" color="#b38b14" contLabel="数量" :eStyle="{ height: '82px' }"></v-label-ctx>
<v-label-ctx label="其他" cont="2000" percentage="25%" color="#b56a2f" contLabel="数量" :eStyle="{ height: '82px' }"></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/total*100).toFixed(2) +'%'" :color="colors[index]" contLabel="数量" :eStyle="{ height: '82px' }"></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 {
opt: createOpt(),
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.brand;
this.getData();
},
methods: {
getData() {
let obj = Object.assign({}, this.getCommTime, this.form);
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);
});
},
},
};
</script>

132
src/views/BrandInsight/weiboKol/opt.js
Unescape View File

@ -1,13 +1,35 @@
/*
* @Author: your name
* @Date: 2021-10-12 14:33:51
* @LastEditTime: 2021-10-12 14:39:58
* @LastEditTime: 2021-10-25 20:04:41
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandInsight/weiboKol/opt.js
*/
import * as echarts from "echarts";
export default function createOpt() {
function createData(ds=[], colors=[]) {
let arr = [];
for(let i = 0; i < ds.length; i++) {
let ele = ds[i];
if(ele.value*1 > 0) {
let obj = { value: ele.value*1, name: ele.key, itemStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
//给第一个设置0，第四个设置1，就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: colors[i]
}])
}};
arr.push(obj)
}
}
return arr;
}
export default function createOpt(ds = [], colors= []) {
const data = createData(ds, colors)
return {
series: [
{
@ -17,66 +39,24 @@ export default function createOpt() {
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
position: 'center',
lineHeight: 48
},
emphasis: {
label: {
show: true,
fontSize: '40',
fontSize: '30',
color: "#ffff",
fontWeight: 'bold'
fontWeight: 'bold',
formatter: function (p) {
return `${p.data.name}\n${p.percent}%\n${p.data.value}`
}
}
},
labelLine: {
show: false
},
data: [
{ value: 2000, name: '名人', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
//给第一个设置0，第四个设置1，就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: '#3373CC'
}])} },
{ value: 2000, name: '政府', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
//给第一个设置0，第四个设置1，就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: '#518ea9'
}])} },
{ value: 1000, name: '大V', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
//给第一个设置0，第四个设置1，就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: '#54BF93'
}])} },
{ value: 1000, name: '企业', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
//给第一个设置0，第四个设置1，就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: '#b38b14'
}])} },
{ value: 2000, name: '其他', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
//给第一个设置0，第四个设置1，就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: '#b56a2f'
}])} },
],
data: data,
},
{
@ -92,53 +72,7 @@ export default function createOpt() {
show: false
},
center: ['50%', '50%'],//边框位置
data: [
{ value: 2000, name: '名人', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
//给第一个设置0，第四个设置1，就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: '#3373CC'
}])} },
{ value: 2000, name: '政府', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
//给第一个设置0，第四个设置1，就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: '#518ea9'
}])} },
{ value: 1000, name: '大V', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
//给第一个设置0，第四个设置1，就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: '#54BF93'
}])} },
{ value: 1000, name: '企业', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
//给第一个设置0，第四个设置1，就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: '#b38b14'
}])} },
{ value: 2000, name: '其他', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
//给第一个设置0，第四个设置1，就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: '#b56a2f'
}])} },
],
data: data,
}
]

100
src/views/BrandInsight/weiboPortraits/index.vue
Unescape View File

@ -1,36 +1,122 @@
<!--
* @Author: your name
* @Date: 2021-10-12 15:06:47
* @LastEditTime: 2021-10-12 17:39:26
* @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">
<div class="wp-outter" v-loading="load">
<v-label-div title="微博人物画像" :showLine="false" :eStyle="{ 'border-style': 'none' }">
<v-tab-group :btns="['性别', '认证', '地区']"></v-tab-group>
<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 label="男性" cont="2200" percentage="25%" color="#3373CC" :eStyle="{ height: '121px' }"></v-label-ctx>
<v-label-ctx label="女性" cont="2200" percentage="25%" color="#CC9D12" :eStyle="{ height: '121px' }"></v-label-ctx>
<v-label-ctx label="未知" cont="2200" percentage="25%" color="#54BF93" :eStyle="{ height: '121px' }"></v-label-ctx>
<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 {
opt: createOpt()
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;
})
}
}
}

Write Preview
Loading…
Cancel
Save