parent
55f7411403
commit
332ba5df1d
@ -0,0 +1,160 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-11-03 17:12:47
|
||||
* @LastEditTime: 2021-11-09 18:24:47
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Editiv
|
||||
* @FilePath: /data-show/src/views/MarketingComparison/mcBeginCompare.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="d-container">
|
||||
<div class="mbc-outter">
|
||||
<brandCompateHeader ref="modelRef" @del="handlerDel"></brandCompateHeader>
|
||||
<div class="mbc-inner">
|
||||
<v-label-div title="车型推荐">
|
||||
</v-label-div>
|
||||
<div class="mbc-dd">
|
||||
<ul class="mb-ul">
|
||||
<li class="mbc-d-item" :class="chooseArr.includes(item) ? 'liActive': ''" v-for="(item,index) in models" :key="index" @click="handlerModel(item)">{{item.seriesname}}</li>
|
||||
</ul>
|
||||
<div style="clear: both"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="beCpm-footer" @click="handlerSubmit">
|
||||
开始对比
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getRecommendSeries} from "@/api/comm"
|
||||
import brandCompateHeader from "./brandCompateHeader";
|
||||
export default {
|
||||
name: "BrandBeginComparte",
|
||||
components: {
|
||||
brandCompateHeader,
|
||||
},
|
||||
inject: ['reload'],
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
token: ""
|
||||
},
|
||||
chooseArr: [null, null, null, null, null, null],
|
||||
models: [
|
||||
],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.form.token = this.getToken;
|
||||
this.getData()
|
||||
},
|
||||
methods: {
|
||||
// 选择默认的车型
|
||||
handlerModel(row) {
|
||||
for(let i = 0; i < this.chooseArr.length; i++) {
|
||||
if(!this.chooseArr[i]) {
|
||||
this.chooseArr[i] = row;
|
||||
let obj = this.$refs.modelRef.list[i]
|
||||
obj.brand = row.brandname;
|
||||
obj.model = row.seriesname;
|
||||
obj.isDel = true;
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
// 获取推荐车型
|
||||
getData() {
|
||||
let obj = Object.assign({}, this.form);
|
||||
getRecommendSeries(obj).then(res => {
|
||||
let data = res.data || [];
|
||||
this.models = data;
|
||||
})
|
||||
},
|
||||
// 删除
|
||||
handlerDel(n) {
|
||||
this.chooseArr[n] = null;
|
||||
},
|
||||
// 开始比对
|
||||
handlerSubmit() {
|
||||
let arr = this.$refs.modelRef.list || [];
|
||||
let filterArr = arr.filter(ele => {
|
||||
return ele.brand && ele.model
|
||||
});
|
||||
if(filterArr.length < 2) {
|
||||
this.$message.warning('至少2个车型进行对比');
|
||||
return;
|
||||
}
|
||||
this.setMComparison(filterArr);
|
||||
this.reload()
|
||||
}
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.mbc-outter {
|
||||
width: 100%;
|
||||
padding: 0px 16px 16px 16px;
|
||||
}
|
||||
.mbc-inner {
|
||||
width: 100%;
|
||||
height: 488px;
|
||||
border: 2px solid #0f2a4d;
|
||||
margin-top: 16px;
|
||||
.mbc-dd {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
.mb-ul {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
li {
|
||||
float: left;
|
||||
width: 295px;
|
||||
height: 89px;
|
||||
background-color: #0f2b47;
|
||||
margin-left: 16px;
|
||||
margin-top: 16px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
border-radius: 2px;
|
||||
border: 1px solid transparent;
|
||||
line-height: 89px;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
border: 1px solid #0058e6;
|
||||
}
|
||||
}
|
||||
.liActive {
|
||||
color: #0058e6;
|
||||
border: 1px solid #0058e6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.beCpm-footer {
|
||||
position: relative;
|
||||
width: 354px;
|
||||
height: 64px;
|
||||
background-image: url("../../assets/images/login/img_dlan_nor.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
bottom: 0px;
|
||||
left: 50%;
|
||||
transform: translate(-50%);
|
||||
cursor: pointer;
|
||||
color: #63aecc;
|
||||
font-size: 24px;
|
||||
text-align: center;
|
||||
line-height: 64px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,203 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-11-05 13:49:05
|
||||
* @LastEditTime: 2021-11-09 18:48:33
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/BrandComparison.vue
|
||||
-->
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-15 10:39:43
|
||||
* @LastEditTime: 2021-11-05 13:25:31
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="d-container">
|
||||
<div class="bc-outter">
|
||||
<brandCompateHeader :data="getMComparison" @change="handlerChangeBrand"></brandCompateHeader>
|
||||
<div class="bc-d2">
|
||||
<informationTrend></informationTrend>
|
||||
<overallInformation></overallInformation>
|
||||
<overallNumberOfInteractions></overallNumberOfInteractions>
|
||||
</div>
|
||||
<brandTonalDistribution></brandTonalDistribution>
|
||||
<div class="bc-d3">
|
||||
<channelDistribution></channelDistribution>
|
||||
<keyMediaCommunicationComparison></keyMediaCommunicationComparison>
|
||||
</div>
|
||||
<brandCommunicationTOPMedia></brandCommunicationTOPMedia>
|
||||
<overallWordCloudComparison></overallWordCloudComparison>
|
||||
<brandEventComparison></brandEventComparison>
|
||||
<div class="bc-d4">
|
||||
<v-label-div title="品牌微博对比"></v-label-div>
|
||||
<div class="bc-d4-d1">
|
||||
<comparisonOfWeiboInformation></comparisonOfWeiboInformation>
|
||||
<comparisonOfTheNumberOfWeiboInteractions></comparisonOfTheNumberOfWeiboInteractions>
|
||||
<weiboBigVComparison></weiboBigVComparison>
|
||||
</div>
|
||||
<weiboTuneComparison></weiboTuneComparison>
|
||||
<weiboContentDirectionComparison></weiboContentDirectionComparison>
|
||||
<div class="bc-d4-d2">
|
||||
<userAreaDistribution></userAreaDistribution>
|
||||
<weiboUserPortrait></weiboUserPortrait>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bc-d5">
|
||||
<v-label-div title="品牌论坛对比"></v-label-div>
|
||||
<div class="bc-d5-dd1">
|
||||
<summaryAndComparisonOfForumInformation></summaryAndComparisonOfForumInformation>
|
||||
<comparisonOfForumPostingTrends></comparisonOfForumPostingTrends>
|
||||
</div>
|
||||
<forumTonalComparison></forumTonalComparison>
|
||||
<comparisonOfPositiveTopicsInTheForum></comparisonOfPositiveTopicsInTheForum>
|
||||
<comparisonOfNegativeTopicsInForums></comparisonOfNegativeTopicsInForums>
|
||||
</div>
|
||||
<div class="bc-d6">
|
||||
<v-label-div title="品牌尾翼对比"></v-label-div>
|
||||
<div class="bc-d6-dd1">
|
||||
<brandRearWingComparison></brandRearWingComparison>
|
||||
<informationVolumeByChannel></informationVolumeByChannel>
|
||||
</div>
|
||||
<tailTOPMedia></tailTOPMedia>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import informationTrend from "./informationTrend";
|
||||
import overallInformation from "./overallInformation";
|
||||
import overallNumberOfInteractions from "./overallNumberOfInteractions";
|
||||
import brandTonalDistribution from "./brandTonalDistribution";
|
||||
import channelDistribution from "./channelDistribution";
|
||||
import keyMediaCommunicationComparison from "./keyMediaCommunicationComparison";
|
||||
import brandCommunicationTOPMedia from "./brandCommunicationTOPMedia";
|
||||
import overallWordCloudComparison from "./overallWordCloudComparison";
|
||||
import brandEventComparison from "./brandEventComparison";
|
||||
import comparisonOfWeiboInformation from "./comparisonOfWeiboInformation";
|
||||
import comparisonOfTheNumberOfWeiboInteractions from "./comparisonOfTheNumberOfWeiboInteractions";
|
||||
import weiboBigVComparison from "./weiboBigVComparison";
|
||||
import weiboTuneComparison from "./weiboTuneComparison";
|
||||
import weiboContentDirectionComparison from "./weiboContentDirectionComparison";
|
||||
import userAreaDistribution from "./userAreaDistribution";
|
||||
import weiboUserPortrait from "./weiboUserPortrait";
|
||||
import summaryAndComparisonOfForumInformation from "./summaryAndComparisonOfForumInformation"
|
||||
import comparisonOfForumPostingTrends from "./comparisonOfForumPostingTrends"
|
||||
import forumTonalComparison from "./forumTonalComparison"
|
||||
import comparisonOfPositiveTopicsInTheForum from "./comparisonOfPositiveTopicsInTheForum"
|
||||
import comparisonOfNegativeTopicsInForums from "./comparisonOfNegativeTopicsInForums"
|
||||
import brandRearWingComparison from "./brandRearWingComparison"
|
||||
import informationVolumeByChannel from "./informationVolumeByChannel"
|
||||
import tailTOPMedia from "./tailTOPMedia"
|
||||
import brandCompateHeader from "./brandCompateHeader"
|
||||
export default {
|
||||
name: "brandComparison",
|
||||
inject: ['reload'],
|
||||
components: {
|
||||
informationTrend, // 信息量趋势
|
||||
overallInformation, // 整体信息量
|
||||
overallNumberOfInteractions, // 整体互动人数
|
||||
brandTonalDistribution, // 品牌调性分布
|
||||
channelDistribution, // 渠道分布
|
||||
keyMediaCommunicationComparison, // 重点媒体传播对比
|
||||
brandCommunicationTOPMedia, // 品牌传播TOP媒体
|
||||
overallWordCloudComparison, // 整体词云对比
|
||||
brandEventComparison, //品牌事件对比
|
||||
comparisonOfWeiboInformation, // 微博信息量对比
|
||||
comparisonOfTheNumberOfWeiboInteractions, // 微博互动人数对比
|
||||
weiboBigVComparison, // 微博大V对比
|
||||
weiboTuneComparison, // 微博调性对比
|
||||
weiboContentDirectionComparison, // 微博内容方向对比
|
||||
userAreaDistribution, //用户区域分布
|
||||
weiboUserPortrait, // 微博用户画像
|
||||
summaryAndComparisonOfForumInformation, // 论坛信息概括对比
|
||||
comparisonOfForumPostingTrends, // 论坛发帖趋势对比
|
||||
forumTonalComparison, // 论坛调性对比
|
||||
comparisonOfPositiveTopicsInTheForum, // 论坛正面话题对比
|
||||
comparisonOfNegativeTopicsInForums, // 论坛负面话题对比
|
||||
brandRearWingComparison, // 尾翼趋势对比
|
||||
informationVolumeByChannel, // 分渠道信息量
|
||||
tailTOPMedia, // 尾翼TOP媒体
|
||||
brandCompateHeader // 选择品牌
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
beforeMount() {
|
||||
console.log('请等待')
|
||||
},
|
||||
methods: {
|
||||
handlerChangeBrand(arr) {
|
||||
this.setMComparison(arr);
|
||||
this.reload()
|
||||
}
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.bc-outter {
|
||||
padding: 0px 16px 16px 16px;
|
||||
}
|
||||
|
||||
.bc-d2 {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
margin-top: 16px;
|
||||
}
|
||||
.bc-d3 {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
margin-top: 16px;
|
||||
}
|
||||
.bc-d4 {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border: 2px solid #0f2a4d;
|
||||
margin-top: 16px;
|
||||
.bc-d4-d1 {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.bc-d4-d2 {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
.bc-d5 {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border: 2px solid #0f2a4d;
|
||||
margin-top: 16px;
|
||||
.bc-d5-dd1 {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
.bc-d6 {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border: 2px solid #0f2a4d;
|
||||
margin-top: 16px;
|
||||
.bc-d6-dd1 {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,114 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-15 15:58:57
|
||||
* @LastEditTime: 2021-10-15 16:52:25
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/brandCommunicationTOPMedia/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="bcm-outter">
|
||||
<v-label-div title="品牌传播TOP媒体"> </v-label-div>
|
||||
<div class="bcm-inner">
|
||||
<div class="bcm-item" v-for="(item, index) in arrList" :key="index">
|
||||
<span class="ss1" :style="{ color: colors[index] }">{{
|
||||
item.key
|
||||
}}</span>
|
||||
<v-ranking-bcm
|
||||
v-for="(it, n) in item.value"
|
||||
:key="n"
|
||||
:label="it.key"
|
||||
:num="it.num"
|
||||
:val="it.value"
|
||||
></v-ranking-bcm>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getSourceTopCount0528C } from "@/api/BrandComparison";
|
||||
import vRankingBcm from "./v-ranking-bcm";
|
||||
export default {
|
||||
name: "brandCommunicationTOPMedia",
|
||||
components: {
|
||||
vRankingBcm,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
colors: [
|
||||
"#3373CC",
|
||||
"#63AECC",
|
||||
"#54BF93",
|
||||
"#CC9D12",
|
||||
"#CC7733",
|
||||
"#CC5B41",
|
||||
],
|
||||
form: {
|
||||
token: "",
|
||||
sBrand: "",
|
||||
},
|
||||
arrList:[],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.initData();
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
this.form.token = this.getToken;
|
||||
let arr = this.getBComparison;
|
||||
let brands = [];
|
||||
arr.forEach((ele) => {
|
||||
brands.push(ele.name);
|
||||
});
|
||||
this.form.sBrand = brands.toString();
|
||||
this.getData();
|
||||
},
|
||||
getData() {
|
||||
return new Promise((resolve, reject) => {
|
||||
let obj = Object.assign({}, this.getCtime2, this.form);
|
||||
getSourceTopCount0528C(obj)
|
||||
.then((res) => {
|
||||
let data = res.data || [];
|
||||
data.forEach(ele => {
|
||||
for(let index = 0 ; index<ele.value.length;index++){
|
||||
ele.value[index].num = index + 1;
|
||||
}
|
||||
});
|
||||
this.arrList = data;
|
||||
resolve(data);
|
||||
})
|
||||
.catch(() => {
|
||||
reject(false);
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.bcm-outter {
|
||||
width: 100%;
|
||||
height: 460px;
|
||||
border: 2px solid #0f2a4d;
|
||||
margin-top: 16px;
|
||||
.bcm-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
.bcm-item {
|
||||
width: 282px;
|
||||
margin-left: 27px;
|
||||
.ss1 {
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
padding-top: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,232 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-08 16:44:08
|
||||
* @LastEditTime: 2021-10-15 16:51:59
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/components/v-ranking/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="v-r-container">
|
||||
<div class="v-r-line" v-if="lineShow"></div>
|
||||
<div class="v-r-inner">
|
||||
<div :class="ls">
|
||||
<span class="s1">{{ num|numStr }}</span>
|
||||
</div>
|
||||
<div :class="rs">
|
||||
<span class="v-r-label">{{label}}</span>
|
||||
<div class="v-r-res">
|
||||
<span class="s1">传播量</span>
|
||||
<span class="s2">{{val}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "v-ranking-bcm",
|
||||
props: {
|
||||
num: {
|
||||
type: [String, Number],
|
||||
default: 1,
|
||||
},
|
||||
val: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
lineShow: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
|
||||
},
|
||||
watch: {
|
||||
num: {
|
||||
handler(val) {
|
||||
if(val == 1) {
|
||||
this.ls = "v-r-left-1"
|
||||
this.rs = "v-r-right-1"
|
||||
} else if(val == 2) {
|
||||
this.ls = "v-r-left-2"
|
||||
this.rs = "v-r-right-2"
|
||||
} else if(val == 3) {
|
||||
this.ls = "v-r-left-3"
|
||||
this.rs = "v-r-right-3"
|
||||
} else {
|
||||
this.ls = "v-r-left"
|
||||
this.rs = "v-r-right"
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
ls: "v-r-left",
|
||||
rs: "v-r-right"
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
numStr(val) {
|
||||
let str = ""
|
||||
if(0<val && val<10) {
|
||||
str = '0' + val
|
||||
} else {
|
||||
str = val + ''
|
||||
}
|
||||
return str
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.v-r-container {
|
||||
width: 281px;
|
||||
height: auto;
|
||||
.v-r-line {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background:#0a1d3b;
|
||||
margin-top: 14px;
|
||||
}
|
||||
.v-r-inner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
margin-top: 14px;
|
||||
color: #fff;
|
||||
background: #0a1d3b;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.v-r-label {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: #FFFFFF;
|
||||
margin-left: 30px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.v-r-res {
|
||||
margin-right: 16px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
span {
|
||||
display: block;
|
||||
text-align: right;
|
||||
font-size: 12px;
|
||||
}
|
||||
.s1 {
|
||||
color: #9ba4af;
|
||||
}
|
||||
.s2 {
|
||||
color: #fff;
|
||||
font-family: Bebas;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.v-r-left {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
.s1 {
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
line-height: 40px;
|
||||
font-family: Bebas;
|
||||
}
|
||||
}
|
||||
.v-r-right {
|
||||
position: absolute;
|
||||
width: 259px;
|
||||
height: 40px;
|
||||
border-top: 2px solid transparent;
|
||||
top: 0px;
|
||||
left: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.v-r-left-1 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
border: 2px solid #cc9d12;
|
||||
border-radius: 40px;
|
||||
.s1 {
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
line-height: 36px;
|
||||
text-shadow: 0px 0px 8px #cc9d12;
|
||||
font-family: Bebas;
|
||||
}
|
||||
}
|
||||
.v-r-right-1 {
|
||||
position: absolute;
|
||||
width: 259px;
|
||||
height: 40px;
|
||||
border-top: 2px solid #CC9D12;
|
||||
top: 0px;
|
||||
left: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.v-r-left-2 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
border: 2px solid #3373CC;
|
||||
border-radius: 40px;
|
||||
.s1 {
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
line-height: 36px;
|
||||
text-shadow: 0px 0px 8px #3373CC;
|
||||
font-family: Bebas;
|
||||
}
|
||||
}
|
||||
.v-r-right-2 {
|
||||
position: absolute;
|
||||
width: 259px;
|
||||
height: 40px;
|
||||
border-top: 2px solid #3373CC;
|
||||
top: 0px;
|
||||
left: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.v-r-left-3 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
border: 2px solid #54BF93;
|
||||
border-radius: 40px;
|
||||
.s1 {
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
line-height: 36px;
|
||||
text-shadow: 0px 0px 8px #54BF93;
|
||||
font-family: Bebas;
|
||||
}
|
||||
}
|
||||
.v-r-right-3 {
|
||||
position: absolute;
|
||||
width: 259px;
|
||||
height: 40px;
|
||||
border-top: 2px solid #54BF93;
|
||||
top: 0px;
|
||||
left: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,247 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-11-03 11:54:08
|
||||
* @LastEditTime: 2021-11-09 18:23:31
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/MarketingComparison/mcChooseModel/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="mccm-outter">
|
||||
<v-label-div title="切换车型">
|
||||
<v-btn @click="goback">返回洞察详情</v-btn>
|
||||
</v-label-div>
|
||||
<div class="mccm-inner">
|
||||
<template v-for="(item,index) in list">
|
||||
<div :key="index" style="display: flex;justify-content: flex-start;">
|
||||
<div class="mccm-item" style="margin-left: 1rem">
|
||||
<div class="mc-t">
|
||||
<div class="m-t-d1">{{item.brand|doStr(4)}}</div>
|
||||
<span class="m-t-s1">{{item.model|doStr(10)}}</span>
|
||||
</div>
|
||||
<div class="m-t-btn" @click="handlerDel(index)" v-if="item.isDel">删除</div>
|
||||
<div class="m-t-btn" @click="handlerChoose(index)" v-else>切换车型</div>
|
||||
</div>
|
||||
<img v-if="index < list.length -1" class="mccm-vs" src="../../../assets/images/comm/img_vs.png">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
<iSwitchModel :brand="brand" :model="model" :visible.sync="modelShow" @change="handlerBrand"></iSwitchModel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from "moment";
|
||||
import { getUserSeriesName } from "@/api/comm";
|
||||
export default {
|
||||
name: "brandCompateHeader",
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
data: {
|
||||
handler(val) {
|
||||
if (val.length > 0) {
|
||||
val.forEach((ele, index) => {
|
||||
this.list[index] = Object.assign(this.list[index], ele);
|
||||
});
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
labelCol: { span: 9 },
|
||||
wrapperCol: { span: 14 },
|
||||
modelShow: false,
|
||||
brand: "",
|
||||
model: "",
|
||||
chooseIndex: -1,
|
||||
form: {
|
||||
token: "",
|
||||
sBrandName: "",
|
||||
},
|
||||
list: [
|
||||
{
|
||||
brand: "",
|
||||
model: "",
|
||||
isDel: false,
|
||||
},
|
||||
{
|
||||
brand: "",
|
||||
model: "",
|
||||
isDel: false,
|
||||
},
|
||||
{
|
||||
brand: "",
|
||||
model: "",
|
||||
isDel: false,
|
||||
},
|
||||
{
|
||||
brand: "",
|
||||
model: "",
|
||||
isDel: false,
|
||||
},
|
||||
{
|
||||
brand: "",
|
||||
model: "",
|
||||
isDel: false,
|
||||
},
|
||||
{
|
||||
brand: "",
|
||||
model: "",
|
||||
isDel: false,
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.brand = this.getBrand.brandname || "奥迪";
|
||||
this.modelData();
|
||||
},
|
||||
methods: {
|
||||
goback() {
|
||||
this.$router.go(-1);
|
||||
},
|
||||
// 获取车型
|
||||
modelData() {
|
||||
let model = this.getModel.name || "";
|
||||
if (!model) {
|
||||
this.getUserSeriesName(this.brand);
|
||||
} else {
|
||||
this.model = model;
|
||||
}
|
||||
},
|
||||
// 获取车型
|
||||
getUserSeriesName(brandName) {
|
||||
this.form.token = this.getToken;
|
||||
this.form.sBrandName = brandName;
|
||||
getUserSeriesName(this.form).then((res) => {
|
||||
let data = res.data || [];
|
||||
this.model = data[0].name;
|
||||
});
|
||||
},
|
||||
// 打开选择车型的弹出框
|
||||
handlerChoose(n) {
|
||||
this.chooseIndex = n;
|
||||
this.modelShow = true;
|
||||
},
|
||||
// 删除车型
|
||||
handlerDel(n) {
|
||||
let row = this.list[n];
|
||||
row.brand = "";
|
||||
row.model = "";
|
||||
row.startTime = "";
|
||||
row.endTime = "";
|
||||
row.isDel = false;
|
||||
let filterArr = this.list.filter((ele) => {
|
||||
return ele.brand && ele.model && ele.startTime && ele.endTime;
|
||||
});
|
||||
this.$emit("del", n);
|
||||
this.$emit("change", filterArr);
|
||||
|
||||
},
|
||||
// 获取切换车型的数据
|
||||
handlerBrand(arr) {
|
||||
let row = this.list[this.chooseIndex];
|
||||
row.brand = arr[0].brandname;
|
||||
row.model = arr[1].name;
|
||||
row.isDel = true;
|
||||
},
|
||||
// 选择时间的判断
|
||||
handlerTime(item) {
|
||||
if (item.startTime && item.endTime) {
|
||||
let isBefore = moment(item.startTime).isBefore(item.endTime);
|
||||
if (!isBefore) {
|
||||
item.endTime = "";
|
||||
this.$message.warning("结束时间必须大于开始时间");
|
||||
} else {
|
||||
let filterArr = this.list.filter((ele) => {
|
||||
return ele.brand && ele.model;
|
||||
});
|
||||
this.$emit("change", filterArr);
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.mccm-outter {
|
||||
width: 1888px;
|
||||
height: 236px;
|
||||
border: 2px solid #0f2a4d;
|
||||
.mccm-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
.mccm-item {
|
||||
width: 230px;
|
||||
height: 160px;
|
||||
background: linear-gradient(180deg, #003a62 0%, #001c43 100%);
|
||||
border: 2px solid #0e5193;
|
||||
margin-top: 13px;
|
||||
border-radius: 2px;
|
||||
position: relative;
|
||||
.m-t-btn {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
width: 95px;
|
||||
height: 28px;
|
||||
background-image: url("../../../assets/images/BrandInsight/img_xbut.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
color: #63aecc;
|
||||
line-height: 28px;
|
||||
}
|
||||
.mc-t {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
margin-top: 21px;
|
||||
.m-t-d1 {
|
||||
width: 78px;
|
||||
height: 78px;
|
||||
background-image: url("../../../assets/images/BrandInsight/img_lq.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
line-height: 78px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: #0090ff;
|
||||
margin-left: 17px;
|
||||
}
|
||||
.m-t-s1 {
|
||||
display: block;
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
margin-left: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.mccm-vs {
|
||||
width: 78px;
|
||||
height: 78px;
|
||||
margin-top: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
/deep/ .ant-form-item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
/deep/ .ant-calendar-picker {
|
||||
min-width: auto !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,191 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-15 17:33:28
|
||||
* @LastEditTime: 2021-10-15 18:25:51
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/brandEventComparison/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="bec-outter">
|
||||
<v-label-div title="品牌事件对比"> </v-label-div>
|
||||
<div class="bec-inner">
|
||||
<v-echarts :opt="opt1"></v-echarts>
|
||||
</div>
|
||||
<v-label-div
|
||||
title="事件上榜车型"
|
||||
:showLine="false"
|
||||
:eStyle="{ 'border-style': 'none' }"
|
||||
>
|
||||
</v-label-div>
|
||||
<div class="bec-one">
|
||||
<div class="bec-one-item" v-for="(item, index) in list" :key="index">
|
||||
<span class="s1" :style="{ color: colors[index] }">{{
|
||||
item.name
|
||||
}}</span>
|
||||
<div class="d1">
|
||||
<v-echarts :opt="item.drawOpt"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getSourcetypeC } from "@/api/BrandComparison/HotEvent.js";
|
||||
import { getContrastCount0528C } from "@/api/BrandComparison/HotEvent.js";
|
||||
import { createSideSingleColumn } from "@/utils/gol/sideSingleColumn";
|
||||
import createOpt from "./opt";
|
||||
export default {
|
||||
name: "brandEventComparison",
|
||||
data() {
|
||||
return {
|
||||
opt1: createOpt(),
|
||||
form: {
|
||||
token: "",
|
||||
sBrand: "",
|
||||
},
|
||||
colors: [
|
||||
"#3373CC",
|
||||
"#63AECC",
|
||||
"#54BF93",
|
||||
"#CC9D12",
|
||||
"#CC7733",
|
||||
"#CC5B41",
|
||||
],
|
||||
list: [
|
||||
{
|
||||
name: "奥迪",
|
||||
drawOpt: createSideSingleColumn(
|
||||
["A4", "A3", "Q5", "A7", "A6"],
|
||||
[400, 500, 600, 800, 1000],
|
||||
"#3373CC"
|
||||
),
|
||||
},
|
||||
{
|
||||
name: "宝马",
|
||||
drawOpt: createSideSingleColumn(
|
||||
["520", "220", "S4", "525", "320"],
|
||||
[400, 500, 600, 800, 1000],
|
||||
"#63AECC"
|
||||
),
|
||||
},
|
||||
{
|
||||
name: "奔驰",
|
||||
drawOpt: createSideSingleColumn(
|
||||
["GML", "350", "S600", "SEL", "300"],
|
||||
[400, 500, 600, 800, 1000],
|
||||
"#54BF93"
|
||||
),
|
||||
},
|
||||
{
|
||||
name: "吉利",
|
||||
drawOpt: createSideSingleColumn(
|
||||
["330", "吉利星", "星耀", "星月", "帝豪"],
|
||||
[400, 500, 600, 800, 1000],
|
||||
"#CC9D12"
|
||||
),
|
||||
},
|
||||
{
|
||||
name: "大众",
|
||||
drawOpt: createSideSingleColumn(
|
||||
["途观", "速腾", "迈腾", "桑塔纳", "帕萨特"],
|
||||
[400, 500, 600, 800, 1000],
|
||||
"#CC7733"
|
||||
),
|
||||
},
|
||||
{
|
||||
name: "别克",
|
||||
drawOpt: createSideSingleColumn(
|
||||
["凯悦", "奥克拉", "君悦", "君越", "君威"],
|
||||
[400, 500, 600, 800, 1000],
|
||||
"#CC5B41"
|
||||
),
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.initData();
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
this.form.token = this.getToken;
|
||||
let arr = this.getBComparison;
|
||||
let brands = [];
|
||||
arr.forEach((ele) => {
|
||||
brands.push(ele.name);
|
||||
});
|
||||
this.form.sBrand = brands.toString();
|
||||
this.getData();
|
||||
this.getTypeData();
|
||||
},
|
||||
getData() {
|
||||
return new Promise((resolve, reject) => {
|
||||
let obj = Object.assign({}, this.getCtime2, this.form);
|
||||
getSourcetypeC(obj)
|
||||
.then((res) => {
|
||||
let data = res.data || [];
|
||||
let brandList = [];
|
||||
data.forEach((e) => {
|
||||
brandList.push(e.Name);
|
||||
});
|
||||
this.opt1 = createOpt(data, brandList);
|
||||
resolve(data);
|
||||
})
|
||||
.catch(() => {
|
||||
reject(false);
|
||||
});
|
||||
});
|
||||
},
|
||||
getTypeData() {
|
||||
return new Promise((resolve, reject) => {
|
||||
let obj = Object.assign({}, this.getCtime2, this.form);
|
||||
getContrastCount0528C(obj)
|
||||
.then((res) => {
|
||||
let data = res.data || [];
|
||||
resolve(data);
|
||||
})
|
||||
.catch(() => {
|
||||
reject(false);
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.bec-outter {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border: 2px solid #0f2a4d;
|
||||
margin-top: 16px;
|
||||
.bec-inner {
|
||||
width: 100%;
|
||||
height: 412px;
|
||||
}
|
||||
.bec-one {
|
||||
width: 100%;
|
||||
height: 412px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
.bec-one-item {
|
||||
width: 314px;
|
||||
height: 100%;
|
||||
.s1 {
|
||||
padding-left: 16px;
|
||||
display: block;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
}
|
||||
.d1 {
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,101 @@
|
||||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-15 15:15:27
|
||||
* @LastEditTime: 2021-10-15 17:43:04
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/channelDistribution/opt.js
|
||||
*/
|
||||
|
||||
/*series: [
|
||||
{
|
||||
name: '奥迪',
|
||||
type: 'bar',
|
||||
barGap: 0,
|
||||
barWidth: 20,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [320, 332, 301, 334, 390, 400]
|
||||
},*/
|
||||
function createData(dataList = []) {
|
||||
let arr = [];
|
||||
dataList.forEach(ele => {
|
||||
let o = {
|
||||
name: ele.Name,
|
||||
type: 'bar',
|
||||
barGap: 0,
|
||||
barWidth: 20,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [ele.Data.新闻,ele.Data.论坛,ele.Data.微信,ele.Data.APP,ele.Data.微博,ele.Data.其他]
|
||||
};
|
||||
arr.push(o)
|
||||
})
|
||||
return arr;
|
||||
}
|
||||
|
||||
export default function createOpt(dataList = [], brandList = []) {
|
||||
let info = createData(dataList);
|
||||
return {
|
||||
grid: {
|
||||
top: "56px",
|
||||
left: "16px",
|
||||
right: "28px",
|
||||
bottom: "16px",
|
||||
containLabel: true,
|
||||
},
|
||||
legend: {
|
||||
data: brandList,
|
||||
textStyle: { //图例文字的样式
|
||||
color: '#fff'
|
||||
},
|
||||
y: 12,
|
||||
x: 16
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
backgroundColor: "#08182F",
|
||||
color: "#fff",
|
||||
borderColor: "#3373CC",
|
||||
textStyle: {
|
||||
color: "#fff", //设置文字颜色
|
||||
},
|
||||
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
data: ['新闻', '论坛', '微信', 'APP', '微博', "其他"]
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#FFF",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: "dashed", // y轴分割线类型
|
||||
color: "#012b4b",
|
||||
},
|
||||
},
|
||||
}
|
||||
],
|
||||
series: info
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,39 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-16 14:26:18
|
||||
* @LastEditTime: 2021-10-16 14:42:07
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/brandRearWingComparison/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="brw-outter">
|
||||
<v-label-div title="尾翼趋势对比" :showLine="false" :eStyle="{'border-style': 'none'}"/>
|
||||
<div class="brw-inner">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import createOpt from "./opt"
|
||||
export default {
|
||||
name: "brandRearWingComparison",
|
||||
data() {
|
||||
return {
|
||||
opt: createOpt()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.brw-outter {
|
||||
width: 944px;
|
||||
height: 412px;
|
||||
.brw-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,147 @@
|
||||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-12 10:11:24
|
||||
* @LastEditTime: 2021-10-15 11:56:55
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandInsight/titsopo/opt.js
|
||||
*/
|
||||
export default function createOpt() {
|
||||
return {
|
||||
grid: {
|
||||
left: 16,
|
||||
right: 26,
|
||||
bottom: 16,
|
||||
top: 52,
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
backgroundColor: "#08182F",
|
||||
color: "#fff",
|
||||
borderColor: "#3373CC",
|
||||
textStyle: {
|
||||
color: "#fff", //设置文字颜色
|
||||
},
|
||||
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
|
||||
},
|
||||
legend: {
|
||||
icon: 'roundRect',
|
||||
textStyle: { //图例文字的样式
|
||||
color: '#fff'
|
||||
},
|
||||
y: 12,
|
||||
x: 16
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: "dashed", // y轴分割线类型
|
||||
color: "#012b4b",
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '奥迪',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
opacity: 0.4
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [2000, 1600, 1000, 2200, 2300, 2100, 1900]
|
||||
},
|
||||
{
|
||||
name: '宝马',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
opacity: 0.4
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [1000, 1100, 1300, 2000, 1800, 2100, 1600]
|
||||
},
|
||||
{
|
||||
name: '奔驰',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
opacity: 0.4
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [1200, 1200, 1400, 2100, 1400, 1900, 2000]
|
||||
},
|
||||
{
|
||||
name: '吉利',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
opacity: 0.4
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [1200, 1200, 1350, 1550, 1750, 1900, 2000]
|
||||
},
|
||||
{
|
||||
name: '大众',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
opacity: 0.4
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [1260, 1280, 1390, 1570, 1790, 1950, 2020]
|
||||
},
|
||||
{
|
||||
name: '别克',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
opacity: 0.4
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [1260, 1280, 1390, 1570, 1790, 1950, 2020]
|
||||
},
|
||||
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,126 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-15 13:27:50
|
||||
* @LastEditTime: 2021-10-15 14:30:30
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/brandTonalDistribution/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="bd-outter">
|
||||
<v-label-div title="品牌调性分布"> </v-label-div>
|
||||
<div class="bd-d1">
|
||||
<div class="dd1" style="margin-left: 16px">
|
||||
<span class="s1"></span><span class="s2">正面</span>
|
||||
</div>
|
||||
<div class="dd1" style="margin-left: 24px">
|
||||
<span class="s1" :style="{ background: '#54BF93' }"></span
|
||||
><span class="s2">中性</span>
|
||||
</div>
|
||||
<div class="dd1" style="margin-left: 24px">
|
||||
<span class="s1" :style="{ background: '#CC9D12' }"></span
|
||||
><span class="s2">负面</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bd-inner">
|
||||
<roundata
|
||||
v-for="(item,index) in list"
|
||||
:key="index"
|
||||
:title="item.Name"
|
||||
:color="colors[index]"
|
||||
:style="index === 0 ? 'margin-left: 46px': 'margin-left: 110px'"
|
||||
:data="item.Data"
|
||||
></roundata>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAffectionsC } from "@/api/BrandComparison";
|
||||
import roundata from "./roundata";
|
||||
export default {
|
||||
name: "brandTonalDistribution",
|
||||
components: {
|
||||
roundata,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
token: "",
|
||||
sBrand: "",
|
||||
},
|
||||
colors: ['#3373CC', '#63AECC', '#54BF93', '#CC9D12', '#CC7733', '#CC5B41'],
|
||||
list: [
|
||||
|
||||
]
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.initData();
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
this.form.token = this.getToken;
|
||||
let arr = this.getBComparison;
|
||||
let brands = [];
|
||||
arr.forEach(ele => {
|
||||
brands.push(ele.name)
|
||||
});
|
||||
this.form.sBrand = brands.toString();
|
||||
this.getData();
|
||||
},
|
||||
//
|
||||
getData() {
|
||||
return new Promise((resolve, reject) => {
|
||||
let obj = Object.assign({}, this.getCtime2, this.form);
|
||||
getAffectionsC(obj).then((res) => {
|
||||
let data = res.data || [];
|
||||
this.list = data;
|
||||
resolve(data)
|
||||
}).catch(() => {
|
||||
reject(false)
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.bd-outter {
|
||||
width: 100%;
|
||||
height: 460px;
|
||||
border: 2px solid #0f2a4d;
|
||||
margin-top: 16px;
|
||||
.bd-d1 {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
height: 36px;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
.dd1 {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
.s1 {
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: #3373cc;
|
||||
}
|
||||
.s2 {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.bd-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,68 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-15 13:41:17
|
||||
* @LastEditTime: 2021-11-05 13:47:57
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/brandTonalDistribution/roundata/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="bd-item-round">
|
||||
<div class="bd-item-r-cav">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
</div>
|
||||
<span class="bd-item-r-c-s1" :style="{color: color}">{{title}}</span>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import createOpt from "./opt";
|
||||
export default {
|
||||
name: "roundata",
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
data: {
|
||||
handler(val) {
|
||||
this.opt = createOpt(val)
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.bd-item-round {
|
||||
display: inline-block;
|
||||
.bd-item-r-cav {
|
||||
width: 193px;
|
||||
height: 206px;
|
||||
}
|
||||
.bd-item-r-c-s1 {
|
||||
display: block;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,78 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-15 15:08:13
|
||||
* @LastEditTime: 2021-10-15 15:18:32
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/channelDistribution/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="cd-outter">
|
||||
<v-label-div title="渠道分布"> </v-label-div>
|
||||
<div class="cd-inner">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getSourcetypeC } from "@/api/BrandComparison/index.js";
|
||||
import createOpt from "./opt";
|
||||
export default {
|
||||
name: "channelDistribution",
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
token: "",
|
||||
sBrand: "",
|
||||
},
|
||||
opt: {},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.initData();
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
this.form.token = this.getToken;
|
||||
let arr = this.getBComparison;
|
||||
let brands = [];
|
||||
arr.forEach((ele) => {
|
||||
brands.push(ele.name);
|
||||
});
|
||||
this.form.sBrand = brands.toString();
|
||||
this.getData();
|
||||
},
|
||||
getData() {
|
||||
return new Promise((resolve, reject) => {
|
||||
let obj = Object.assign({}, this.getCtime2, this.form);
|
||||
getSourcetypeC(obj)
|
||||
.then((res) => {
|
||||
let data = res.data || [];
|
||||
let brandList = [];
|
||||
data.forEach(e => {
|
||||
brandList.push(e.Name)
|
||||
})
|
||||
this.opt = createOpt(data,brandList);
|
||||
resolve(data);
|
||||
})
|
||||
.catch(() => {
|
||||
reject(false);
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.cd-outter {
|
||||
width: 936px;
|
||||
height: 460px;
|
||||
border: 2px solid #0f2a4d;
|
||||
.cd-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,108 @@
|
||||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-15 15:15:27
|
||||
* @LastEditTime: 2021-10-28 15:44:36
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/channelDistribution/opt.js
|
||||
*/
|
||||
import { bigNumberTransform } from "@/utils/gol/dataTool"
|
||||
let colors = ['#3373CC', '#63AECC', '#54BF93', '#CC9D12', '#CC7733', "#CC5B41", '#452b74', '#71686f']
|
||||
function createData(dataList = []) {
|
||||
/*series: [
|
||||
{
|
||||
name: '奥迪',
|
||||
type: 'bar',
|
||||
barGap: 0,
|
||||
barWidth: 16,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [320, 332, 301, 334, 390, 400]
|
||||
},*/
|
||||
let arr = [];
|
||||
dataList.forEach(e => {
|
||||
let o = {
|
||||
name: e.Name,
|
||||
type: 'bar',
|
||||
barGap: 0,
|
||||
barWidth: 16,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [e.Data.新闻,e.Data.论坛,e.Data.微信,e.Data.短视频,e.Data.微博,e.Data.其他]
|
||||
};
|
||||
arr.push(o)
|
||||
})
|
||||
return arr;
|
||||
}
|
||||
export default function createOpt(dataList = [],brandList = []) {
|
||||
let info = createData(dataList);
|
||||
return {
|
||||
grid: {
|
||||
top: "56px",
|
||||
left: "16px",
|
||||
right: "28px",
|
||||
bottom: "16px",
|
||||
containLabel: true,
|
||||
},
|
||||
color: colors,
|
||||
legend: {
|
||||
data: brandList,
|
||||
textStyle: { //图例文字的样式
|
||||
color: '#fff'
|
||||
},
|
||||
y: 12,
|
||||
x: 16
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
backgroundColor: "#08182F",
|
||||
color: "#fff",
|
||||
borderColor: "#3373CC",
|
||||
textStyle: {
|
||||
color: "#fff", //设置文字颜色
|
||||
},
|
||||
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
data: ['新闻', '论坛', '微信', 'APP', '微博', "其他"]
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#FFF",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: (value) => {
|
||||
let str = bigNumberTransform(value);
|
||||
return str;
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: "dashed", // y轴分割线类型
|
||||
color: "#012b4b",
|
||||
},
|
||||
},
|
||||
}
|
||||
],
|
||||
series: info
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,39 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-16 13:45:18
|
||||
* @LastEditTime: 2021-10-16 13:49:34
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/comparisonOfForumPostingTrends/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="cop-outter">
|
||||
<v-label-div title="论坛发帖趋势对比" :showLine="false" :eStyle="{'border-style': 'none'}"/>
|
||||
<div class="cop-inner">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import createOpt from "./opt"
|
||||
export default {
|
||||
name: "comparisonOfForumPostingTrends",
|
||||
data() {
|
||||
return {
|
||||
opt: createOpt()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.cop-outter {
|
||||
width: 944px;
|
||||
height: 412px;
|
||||
.cop-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,147 @@
|
||||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-12 10:11:24
|
||||
* @LastEditTime: 2021-10-15 11:56:55
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandInsight/titsopo/opt.js
|
||||
*/
|
||||
export default function createOpt() {
|
||||
return {
|
||||
grid: {
|
||||
left: 16,
|
||||
right: 26,
|
||||
bottom: 16,
|
||||
top: 52,
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
backgroundColor: "#08182F",
|
||||
color: "#fff",
|
||||
borderColor: "#3373CC",
|
||||
textStyle: {
|
||||
color: "#fff", //设置文字颜色
|
||||
},
|
||||
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
|
||||
},
|
||||
legend: {
|
||||
icon: 'roundRect',
|
||||
textStyle: { //图例文字的样式
|
||||
color: '#fff'
|
||||
},
|
||||
y: 12,
|
||||
x: 16
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: "dashed", // y轴分割线类型
|
||||
color: "#012b4b",
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '奥迪',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
opacity: 0.4
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [2000, 1600, 1000, 2200, 2300, 2100, 1900]
|
||||
},
|
||||
{
|
||||
name: '宝马',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
opacity: 0.4
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [1000, 1100, 1300, 2000, 1800, 2100, 1600]
|
||||
},
|
||||
{
|
||||
name: '奔驰',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
opacity: 0.4
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [1200, 1200, 1400, 2100, 1400, 1900, 2000]
|
||||
},
|
||||
{
|
||||
name: '吉利',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
opacity: 0.4
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [1200, 1200, 1350, 1550, 1750, 1900, 2000]
|
||||
},
|
||||
{
|
||||
name: '大众',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
opacity: 0.4
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [1260, 1280, 1390, 1570, 1790, 1950, 2020]
|
||||
},
|
||||
{
|
||||
name: '别克',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
opacity: 0.4
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [1260, 1280, 1390, 1570, 1790, 1950, 2020]
|
||||
},
|
||||
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,88 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-16 13:57:58
|
||||
* @LastEditTime: 2021-10-16 14:20:07
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/comparisonOfPositiveTopicsInTheForum/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="cpt-outter">
|
||||
<v-label-div title="论坛负面话题对比" :showLine="false" :eStyle="{'border-style': 'none'}"/>
|
||||
<div class="cpt-inner">
|
||||
<div class="cpt-item" v-for="(item,index) in list" :key="index">
|
||||
<span class="s1" :style="{color: colors[index]}">{{item.name}}</span>
|
||||
<div class="d1">
|
||||
<v-echarts :opt="item.drawOpt"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {createSideSingleColumn} from "@/utils/gol/sideSingleColumn"
|
||||
export default {
|
||||
name: "comparisonOfPositiveTopicsInTheForum",
|
||||
data() {
|
||||
return {
|
||||
colors: ['#3373CC', '#63AECC', '#54BF93', '#CC9D12', '#CC7733', '#CC5B41'],
|
||||
list: [
|
||||
{
|
||||
name: '奥迪',
|
||||
drawOpt: createSideSingleColumn(['全屏', '高度','长度','空间','内饰'], [400, 500, 600, 800, 1000], '#bd9312'),
|
||||
},
|
||||
{
|
||||
name: '宝马',
|
||||
drawOpt: createSideSingleColumn(['异味', '舒适度','刹车','全景','内容'], [400, 500, 600, 800, 1000], '#bd9312'),
|
||||
},
|
||||
{
|
||||
name: '奔驰',
|
||||
drawOpt: createSideSingleColumn(['舒适度', '高度','宽度','空间','内饰'], [400, 500, 600, 800, 1000], '#bd9312'),
|
||||
},
|
||||
{
|
||||
name: '吉利',
|
||||
drawOpt: createSideSingleColumn(['底盘', '加速度','全景','空间','内饰'], [400, 500, 600, 800, 1000], '#bd9312'),
|
||||
},
|
||||
{
|
||||
name: '大众',
|
||||
drawOpt: createSideSingleColumn(['刹车', '加速度','大小','空间','内饰'], [400, 500, 600, 800, 1000], '#bd9312'),
|
||||
},
|
||||
{
|
||||
name: '别克',
|
||||
drawOpt: createSideSingleColumn(['空间', '长度','高度','舒适度','内饰'], [400, 500, 600, 800, 1000], '#bd9312'),
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.cpt-outter {
|
||||
width: 100%;
|
||||
height: 412px;
|
||||
.cpt-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
.cpt-item {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.s1 {
|
||||
padding-left: 16px;
|
||||
display: block;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
color:#fff;
|
||||
font-size: 18px;
|
||||
}
|
||||
.d1 {
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,88 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-16 13:57:58
|
||||
* @LastEditTime: 2021-10-16 14:16:03
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/comparisonOfPositiveTopicsInTheForum/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="cpt-outter">
|
||||
<v-label-div title="论坛正面话题对比" :showLine="false" :eStyle="{'border-style': 'none'}"/>
|
||||
<div class="cpt-inner">
|
||||
<div class="cpt-item" v-for="(item,index) in list" :key="index">
|
||||
<span class="s1" :style="{color: colors[index]}">{{item.name}}</span>
|
||||
<div class="d1">
|
||||
<v-echarts :opt="item.drawOpt"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {createSideSingleColumn} from "@/utils/gol/sideSingleColumn"
|
||||
export default {
|
||||
name: "comparisonOfPositiveTopicsInTheForum",
|
||||
data() {
|
||||
return {
|
||||
colors: ['#3373CC', '#63AECC', '#54BF93', '#CC9D12', '#CC7733', '#CC5B41'],
|
||||
list: [
|
||||
{
|
||||
name: '奥迪',
|
||||
drawOpt: createSideSingleColumn(['全屏', '高度','长度','空间','内饰'], [400, 500, 600, 800, 1000], '#3373CC'),
|
||||
},
|
||||
{
|
||||
name: '宝马',
|
||||
drawOpt: createSideSingleColumn(['异味', '舒适度','刹车','全景','内容'], [400, 500, 600, 800, 1000], '#3373CC'),
|
||||
},
|
||||
{
|
||||
name: '奔驰',
|
||||
drawOpt: createSideSingleColumn(['舒适度', '高度','宽度','空间','内饰'], [400, 500, 600, 800, 1000], '#3373CC'),
|
||||
},
|
||||
{
|
||||
name: '吉利',
|
||||
drawOpt: createSideSingleColumn(['底盘', '加速度','全景','空间','内饰'], [400, 500, 600, 800, 1000], '#3373CC'),
|
||||
},
|
||||
{
|
||||
name: '大众',
|
||||
drawOpt: createSideSingleColumn(['刹车', '加速度','大小','空间','内饰'], [400, 500, 600, 800, 1000], '#3373CC'),
|
||||
},
|
||||
{
|
||||
name: '别克',
|
||||
drawOpt: createSideSingleColumn(['空间', '长度','高度','舒适度','内饰'], [400, 500, 600, 800, 1000], '#3373CC'),
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.cpt-outter {
|
||||
width: 100%;
|
||||
height: 412px;
|
||||
.cpt-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
.cpt-item {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.s1 {
|
||||
padding-left: 16px;
|
||||
display: block;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
color:#fff;
|
||||
font-size: 18px;
|
||||
}
|
||||
.d1 {
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,82 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-16 10:22:21
|
||||
* @LastEditTime: 2021-10-16 10:28:27
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/comparisonOfTheNumberOfWeiboInteractions/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="cotn-outter">
|
||||
<v-label-div
|
||||
title="微博互动人数对比"
|
||||
:showLine="false"
|
||||
:eStyle="{ 'border-style': 'none' }"
|
||||
></v-label-div>
|
||||
<div class="cotn-inner">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getInteractCount0528C } from "@/api/BrandComparison/BrandWeibo.js";
|
||||
import { createSingleColumnar } from "@/utils/gol/singleColumnar";
|
||||
export default {
|
||||
name: "comparisonOfTheNumberOfWeiboInteractions",
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
token: "",
|
||||
sBrand: "",
|
||||
},
|
||||
opt: {}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.initData();
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
this.form.token = this.getToken;
|
||||
let arr = this.getBComparison;
|
||||
let brands = [];
|
||||
arr.forEach((ele) => {
|
||||
brands.push(ele.name);
|
||||
});
|
||||
this.form.sBrand = brands.toString();
|
||||
this.getData();
|
||||
},
|
||||
getData() {
|
||||
return new Promise((resolve, reject) => {
|
||||
let obj = Object.assign({}, this.getCtime2, this.form);
|
||||
getInteractCount0528C(obj)
|
||||
.then((res) => {
|
||||
let data = res.data || [];
|
||||
let dx = [];
|
||||
let ds = [];
|
||||
data.forEach((ele) => {
|
||||
dx.push(ele.key);
|
||||
ds.push(ele.value);
|
||||
});
|
||||
this.opt = createSingleColumnar(dx, ds);
|
||||
resolve(data);
|
||||
})
|
||||
.catch(() => {
|
||||
reject(false);
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.cotn-outter {
|
||||
width: 628px;
|
||||
height: 412px;
|
||||
.cotn-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,83 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-16 10:01:52
|
||||
* @LastEditTime: 2021-10-16 10:20:07
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/comparisonOfWeiboInformation/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="cowi-outter">
|
||||
<v-label-div
|
||||
title="微博信息量对比"
|
||||
:showLine="false"
|
||||
:eStyle="{ 'border-style': 'none' }"
|
||||
></v-label-div>
|
||||
<div class="cowi-inner">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getContrastCount0528C } from "@/api/BrandComparison/BrandWeibo.js";
|
||||
import { createSingleColumnar } from "@/utils/gol/singleColumnar";
|
||||
export default {
|
||||
name: "comparisonOfWeiboInformation",
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
token: "",
|
||||
sBrand: "",
|
||||
},
|
||||
opt: {}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.initData();
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
this.form.token = this.getToken;
|
||||
let arr = this.getBComparison;
|
||||
let brands = [];
|
||||
arr.forEach((ele) => {
|
||||
brands.push(ele.name);
|
||||
});
|
||||
this.form.sBrand = brands.toString();
|
||||
this.getData();
|
||||
},
|
||||
getData() {
|
||||
return new Promise((resolve, reject) => {
|
||||
let obj = Object.assign({}, this.getCtime2, this.form);
|
||||
getContrastCount0528C(obj)
|
||||
.then((res) => {
|
||||
let data = res.data || [];
|
||||
let dx = [];
|
||||
let ds = [];
|
||||
data.forEach(ele => {
|
||||
dx.push(ele.key);
|
||||
ds.push(ele.value)
|
||||
})
|
||||
this.opt = createSingleColumnar(dx,ds);
|
||||
resolve(data);
|
||||
})
|
||||
.catch(() => {
|
||||
reject(false);
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.cowi-outter {
|
||||
width: 628px;
|
||||
height: 412px;
|
||||
.cowi-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,76 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-16 10:49:09
|
||||
* @LastEditTime: 2021-10-16 13:55:52
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/weiboTuneComparison/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="wtc-outter">
|
||||
<v-label-div title="论坛调性对比" :showLine="false" :eStyle="{'border-style': 'none'}">
|
||||
</v-label-div>
|
||||
<div class="wtc-d1">
|
||||
<div class="dd1" style="margin-left: 16px"><span class="s1"></span><span class="s2">正面</span></div>
|
||||
<div class="dd1" style="margin-left: 24px;"><span class="s1" :style="{background: '#54BF93'}"></span><span class="s2">中性</span></div>
|
||||
<div class="dd1" style="margin-left: 24px;"><span class="s1" :style="{background: '#CC9D12'}"></span><span class="s2">负面</span></div>
|
||||
</div>
|
||||
<div class="wtc-inner">
|
||||
<roundata title="奥迪" color="#3373CC" style="margin-left: 46px"></roundata>
|
||||
<roundata title="宝马" color="#63AECC" style="margin-left: 110px"></roundata>
|
||||
<roundata title="奔驰" color="#54BF93" style="margin-left: 110px"></roundata>
|
||||
<roundata title="吉利" color="#CC9D12" style="margin-left: 110px"></roundata>
|
||||
<roundata title="大众" color="#CC7733" style="margin-left: 110px"></roundata>
|
||||
<roundata title="别克" color="#CC5B41" style="margin-left: 110px"></roundata>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import roundata from "./roundata";
|
||||
export default {
|
||||
name: "forumTonalComparison",
|
||||
components: {
|
||||
roundata
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.wtc-outter {
|
||||
width: 100%;
|
||||
height: 460px;
|
||||
margin-top: 16px;
|
||||
.wtc-d1 {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
height: 36px;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
.dd1 {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
.s1 {
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: #3373cc;
|
||||
}
|
||||
.s2 {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.wtc-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,56 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-15 13:41:17
|
||||
* @LastEditTime: 2021-11-05 13:31:48
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/brandTonalDistribution/roundata/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="bd-item-round">
|
||||
<div class="bd-item-r-cav">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
</div>
|
||||
<span class="bd-item-r-c-s1" :style="{color: color}">{{title}}</span>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import createOpt from "./opt";
|
||||
export default {
|
||||
name: "roundata",
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
opt: createOpt(),
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.bd-item-round {
|
||||
display: inline-block;
|
||||
.bd-item-r-cav {
|
||||
width: 193px;
|
||||
height: 206px;
|
||||
}
|
||||
.bd-item-r-c-s1 {
|
||||
display: block;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,96 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-15 10:39:43
|
||||
* @LastEditTime: 2021-11-09 18:11:44
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="d-container">
|
||||
<BrandComparison v-if="hasData"></BrandComparison>
|
||||
<BrandBeginComparte v-else></BrandBeginComparte>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BrandComparison from "./BrandComparison.vue";
|
||||
import BrandBeginComparte from "./BrandBeginComparte.vue";
|
||||
export default {
|
||||
name: "ModelComparison",
|
||||
components: {
|
||||
BrandComparison,
|
||||
BrandBeginComparte,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
hasData: false,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.hasData = this.getMComparison.length > 0 ? true : false;
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.bc-outter {
|
||||
padding: 0px 16px 16px 16px;
|
||||
}
|
||||
|
||||
.bc-d2 {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
margin-top: 16px;
|
||||
}
|
||||
.bc-d3 {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
margin-top: 16px;
|
||||
}
|
||||
.bc-d4 {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border: 2px solid #0f2a4d;
|
||||
margin-top: 16px;
|
||||
.bc-d4-d1 {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.bc-d4-d2 {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
.bc-d5 {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border: 2px solid #0f2a4d;
|
||||
margin-top: 16px;
|
||||
.bc-d5-dd1 {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
.bc-d6 {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border: 2px solid #0f2a4d;
|
||||
margin-top: 16px;
|
||||
.bc-d6-dd1 {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,75 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-15 11:40:55
|
||||
* @LastEditTime: 2021-10-15 11:53:35
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/informationTrend/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="it-outter">
|
||||
<v-label-div title="信息量趋势"></v-label-div>
|
||||
<div class="it-inner">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getCountTime0528C } from "@/api/BrandComparison";
|
||||
import createOpt from "./opt";
|
||||
export default {
|
||||
name: "informationTrend",
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
token: "",
|
||||
sBrand: "",
|
||||
},
|
||||
opt: {},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.initData();
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
this.form.token = this.getToken;
|
||||
let arr = this.getBComparison;
|
||||
let brands = [];
|
||||
arr.forEach((ele) => {
|
||||
brands.push(ele.name);
|
||||
});
|
||||
this.form.sBrand = brands.toString();
|
||||
this.getData();
|
||||
},
|
||||
getData() {
|
||||
let obj = Object.assign({}, this.getCtime2, this.form);
|
||||
getCountTime0528C(obj).then((res) => {
|
||||
let data = res.data || [];
|
||||
let dx = [];
|
||||
let ds = [];
|
||||
data.forEach(ele => {
|
||||
let key = ele.key;
|
||||
let value = ele.value;
|
||||
dx.push(key);
|
||||
ds.push(value);
|
||||
});
|
||||
this.opt = createOpt(dx, ds);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.it-outter {
|
||||
width: 618px;
|
||||
height: 460px;
|
||||
border: 2px solid #0f2a4d;
|
||||
.it-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,109 @@
|
||||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-12 10:11:24
|
||||
* @LastEditTime: 2021-10-15 11:56:55
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandInsight/titsopo/opt.js
|
||||
*/
|
||||
import { bigNumberTransform } from "@/utils/gol/dataTool"
|
||||
function createData(ds = []) {
|
||||
let testData = {}
|
||||
ds.forEach(item => {
|
||||
item.forEach(val => {
|
||||
if (testData[val.key] === undefined) {
|
||||
testData[val.key] = {
|
||||
name: val.key,
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
opacity: 0.2
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [val.value]
|
||||
}
|
||||
} else {
|
||||
testData[val.key].data.push(val.value)
|
||||
}
|
||||
})
|
||||
})
|
||||
let arr = [];
|
||||
for(let key in testData) {
|
||||
arr.push(testData[key])
|
||||
}
|
||||
return arr
|
||||
}
|
||||
export default function createOpt(dx = [], ds = []) {
|
||||
let data = createData(ds);
|
||||
return {
|
||||
grid: {
|
||||
left: 16,
|
||||
right: 26,
|
||||
bottom: 16,
|
||||
top: 52,
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
backgroundColor: "#08182F",
|
||||
color: "#fff",
|
||||
borderColor: "#3373CC",
|
||||
textStyle: {
|
||||
color: "#fff", //设置文字颜色
|
||||
},
|
||||
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
|
||||
},
|
||||
legend: {
|
||||
icon: 'roundRect',
|
||||
textStyle: { //图例文字的样式
|
||||
color: '#fff'
|
||||
},
|
||||
y: 12,
|
||||
x: 16
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: (value) => {
|
||||
let str = value.substring(10, 16)
|
||||
return str;
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
data: dx
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: (value) => {
|
||||
let str = bigNumberTransform(value);
|
||||
return str;
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: "dashed", // y轴分割线类型
|
||||
color: "#012b4b",
|
||||
},
|
||||
},
|
||||
},
|
||||
series: data
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,39 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-16 14:47:23
|
||||
* @LastEditTime: 2021-10-16 14:54:34
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/informationVolumeByChannel/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="ivb-outter">
|
||||
<v-label-div title="分渠道信息量" :showLine="false" :eStyle="{'border-style': 'none'}"/>
|
||||
<div class="ivb-inner">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import createOpt from "./opt"
|
||||
export default {
|
||||
name: "informationVolumeByChannel",
|
||||
data() {
|
||||
return {
|
||||
opt: createOpt()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.ivb-outter {
|
||||
width: 944px;
|
||||
height: 412px;
|
||||
.ivb-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,126 @@
|
||||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-15 15:15:27
|
||||
* @LastEditTime: 2021-10-15 17:44:34
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/channelDistribution/opt.js
|
||||
*/
|
||||
export default function createOpt() {
|
||||
return {
|
||||
grid: {
|
||||
top: "56px",
|
||||
left: "16px",
|
||||
right: "28px",
|
||||
bottom: "16px",
|
||||
containLabel: true,
|
||||
},
|
||||
legend: {
|
||||
data: ['奥迪', '宝马', '奔驰', '吉利', '大众', '别克'],
|
||||
textStyle: { //图例文字的样式
|
||||
color: '#fff'
|
||||
},
|
||||
y: 12,
|
||||
x: 16
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
backgroundColor: "#08182F",
|
||||
color: "#fff",
|
||||
borderColor: "#3373CC",
|
||||
textStyle: {
|
||||
color: "#fff", //设置文字颜色
|
||||
},
|
||||
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
data: ['新闻', '论坛', '微信', 'APP', '微博', "其他"]
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#FFF",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: "dashed", // y轴分割线类型
|
||||
color: "#012b4b",
|
||||
},
|
||||
},
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '奥迪',
|
||||
type: 'bar',
|
||||
barGap: 0,
|
||||
barWidth: 16,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [320, 332, 301, 334, 390, 400]
|
||||
},
|
||||
{
|
||||
name: '宝马',
|
||||
type: 'bar',
|
||||
barWidth: 16,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [220, 182, 191, 234, 290, 300]
|
||||
},
|
||||
{
|
||||
name: '奔驰',
|
||||
type: 'bar',
|
||||
barWidth: 16,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [150, 232, 201, 154, 190, 200]
|
||||
},
|
||||
{
|
||||
name: '吉利',
|
||||
type: 'bar',
|
||||
barWidth: 16,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [98, 77, 101, 99, 40, 44]
|
||||
},
|
||||
{
|
||||
name: '大众',
|
||||
type: 'bar',
|
||||
barWidth: 16,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [198, 177, 101, 199, 140, 145]
|
||||
},
|
||||
{
|
||||
name: '别克',
|
||||
type: 'bar',
|
||||
barWidth: 16,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [298, 277, 201, 299, 240, 250]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,67 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-15 15:34:26
|
||||
* @LastEditTime: 2021-10-15 15:43:55
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/keyMediaCommunicationComparison/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="kmcc-outter">
|
||||
<v-label-div title="重点媒体传播对比"> </v-label-div>
|
||||
<div class="kmcc-inner">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import createOpt from "./opt";
|
||||
import { getSourceCount0528C } from "@/api/BrandComparison";
|
||||
export default {
|
||||
name: "kmcc-outter",
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
token: "",
|
||||
sBrand: "",
|
||||
},
|
||||
opt: createOpt(),
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.initData();
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
this.form.token = this.getToken;
|
||||
let arr = this.getBComparison;
|
||||
let brands = [];
|
||||
arr.forEach((ele) => {
|
||||
brands.push(ele.name);
|
||||
});
|
||||
this.form.sBrand = brands.toString();
|
||||
this.getData();
|
||||
},
|
||||
getData() {
|
||||
let obj = Object.assign({}, this.getCtime2, this.form);
|
||||
getSourceCount0528C(obj).then(() => {
|
||||
//console.log(res);
|
||||
})
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.kmcc-outter {
|
||||
width: 936px;
|
||||
height: 460px;
|
||||
border: 2px solid #0f2a4d;
|
||||
margin-left: 16px;
|
||||
.kmcc-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,127 @@
|
||||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-09 11:01:19
|
||||
* @LastEditTime: 2021-10-15 15:51:52
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/Index/spreadTheSound/opt.js
|
||||
*/
|
||||
export default function createOpt() {
|
||||
return {
|
||||
grid: {
|
||||
left: 16,
|
||||
right: 16,
|
||||
bottom: 16,
|
||||
top: 56,
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
backgroundColor: "#08182F",
|
||||
color: "#fff",
|
||||
borderColor: "#3373CC",
|
||||
textStyle: {
|
||||
color: "#fff", //设置文字颜色
|
||||
},
|
||||
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
|
||||
},
|
||||
legend: {
|
||||
textStyle: { //图例文字的样式
|
||||
color: '#fff'
|
||||
},
|
||||
y: 10,
|
||||
x: 16
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
data: ['汽车之家', '懂车帝', '腾讯新闻', '凤凰网', '新浪微博']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: "dashed", // y轴分割线类型
|
||||
color: "#012b4b",
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '奥迪',
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
barWidth: 24,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [320, 302, 301, 334, 390]
|
||||
},
|
||||
{
|
||||
name: '宝马',
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
barWidth: 24,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [120, 132, 101, 134, 90]
|
||||
},
|
||||
{
|
||||
name: '奔驰',
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
barWidth: 24,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [220, 182, 191, 234, 290]
|
||||
},
|
||||
{
|
||||
name: '吉利',
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
barWidth: 24,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [150, 212, 201, 154, 190]
|
||||
},
|
||||
{
|
||||
name: '大众',
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
barWidth: 24,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [820, 832, 901, 934, 1290]
|
||||
},
|
||||
{
|
||||
name: '别克',
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
barWidth: 24,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [820, 832, 901, 934, 1290]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,79 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-15 11:58:33
|
||||
* @LastEditTime: 2021-10-15 15:20:41
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/overallInformation/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="oi-outter">
|
||||
<v-label-div title="整体信息量" ></v-label-div>
|
||||
<div class="oi-inner">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getContrastCount0528C} from "@/api/BrandComparison"
|
||||
import {createSingleColumnar} from "@/utils/gol/singleColumnar"
|
||||
export default {
|
||||
name: "overallInformation",
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
token: "",
|
||||
sBrand: ""
|
||||
},
|
||||
opt: {}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.initData();
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
this.form.token = this.getToken;
|
||||
let arr = this.getBComparison;
|
||||
let brands = [];
|
||||
arr.forEach(ele => {
|
||||
brands.push(ele.name)
|
||||
});
|
||||
this.form.sBrand = brands.toString();
|
||||
this.getData();
|
||||
},
|
||||
getData() {
|
||||
return new Promise((resolve, reject) => {
|
||||
let obj = Object.assign({}, this.getCtime2, this.form);
|
||||
getContrastCount0528C(obj).then((res) => {
|
||||
let data = res.data || [];
|
||||
let brandsList = [];
|
||||
let infoList = [];
|
||||
data.forEach(e => {
|
||||
brandsList.push(e.key);
|
||||
infoList.push(e.value);
|
||||
})
|
||||
this.opt = createSingleColumnar(brandsList, infoList);
|
||||
resolve(data)
|
||||
}).catch(() => {
|
||||
reject(false)
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.oi-outter {
|
||||
width: 618px;
|
||||
height: 460px;
|
||||
border: 2px solid #0f2a4d;
|
||||
margin-left: 16px;
|
||||
.oi-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,79 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-15 13:12:08
|
||||
* @LastEditTime: 2021-10-15 15:21:18
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/overallNumberOfInteractions/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="onoi-outter">
|
||||
<v-label-div title="整体互动人数" ></v-label-div>
|
||||
<div class="onoi-inner">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getInteractCount0528C} from "@/api/BrandComparison"
|
||||
import {createSingleColumnar} from "@/utils/gol/singleColumnar"
|
||||
export default {
|
||||
name: "overallInformation",
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
token: "",
|
||||
sBrand: ""
|
||||
},
|
||||
opt: {}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.initData();
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
this.form.token = this.getToken;
|
||||
let arr = this.getBComparison;
|
||||
let brands = [];
|
||||
arr.forEach(ele => {
|
||||
brands.push(ele.name)
|
||||
});
|
||||
this.form.sBrand = brands.toString();
|
||||
this.getData();
|
||||
},
|
||||
getData() {
|
||||
return new Promise((resolve, reject) => {
|
||||
let obj = Object.assign({}, this.getCtime2, this.form);
|
||||
getInteractCount0528C(obj).then((res) => {
|
||||
let data = res.data || [];
|
||||
let brandsList = [];
|
||||
let infoList = [];
|
||||
data.forEach(e => {
|
||||
brandsList.push(e.key);
|
||||
infoList.push(e.value);
|
||||
})
|
||||
this.opt = createSingleColumnar(brandsList, infoList);
|
||||
resolve(data)
|
||||
}).catch(() => {
|
||||
reject(false)
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.onoi-outter {
|
||||
width: 618px;
|
||||
height: 460px;
|
||||
border: 2px solid #0f2a4d;
|
||||
margin-left: 16px;
|
||||
.onoi-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,130 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-15 16:56:32
|
||||
* @LastEditTime: 2021-10-15 17:31:34
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/overallWordCloudComparison/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="owcc-outter">
|
||||
<v-label-div title="整体词云对比"> </v-label-div>
|
||||
<div class="owcc-inner">
|
||||
<div class="owcc-item" v-for="(item, index) in dataSource" :key="index">
|
||||
<v-label-div
|
||||
:title="item.name"
|
||||
:titleColor="colors[index]"
|
||||
:showLine="false"
|
||||
:eStyle="{ 'border-style': 'none' }"
|
||||
>
|
||||
<v-tab-group
|
||||
:btns="['正面', '负面']"
|
||||
@change="(n) => {handlerTab(n,item)}"
|
||||
></v-tab-group>
|
||||
</v-label-div>
|
||||
<div class="owcc-draw">
|
||||
<v-echarts :opt="item.opt"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPositiveAndNegative0528C } from "@/api/BrandComparison";
|
||||
import createWordCloud from "@/utils/gol/bubbleWord";
|
||||
export default {
|
||||
name: "overallWordCloudComparison",
|
||||
data() {
|
||||
return {
|
||||
opt: {},
|
||||
form: {
|
||||
token: "",
|
||||
sBrand: "",
|
||||
},
|
||||
colors: [
|
||||
"#3373CC",
|
||||
"#63AECC",
|
||||
"#54BF93",
|
||||
"#CC9D12",
|
||||
"#CC7733",
|
||||
"#CC5B41",
|
||||
],
|
||||
dataSource: []
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.initData();
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
this.form.token = this.getToken;
|
||||
let arr = this.getBComparison;
|
||||
let brands = [];
|
||||
arr.forEach((ele) => {
|
||||
brands.push(ele.name);
|
||||
});
|
||||
this.form.sBrand = brands.toString();
|
||||
this.getData();
|
||||
},
|
||||
getData() {
|
||||
return new Promise((resolve, reject) => {
|
||||
let obj = Object.assign({}, this.getCtime2, this.form);
|
||||
getPositiveAndNegative0528C(obj)
|
||||
.then((res) => {
|
||||
let data = res.data || [];
|
||||
let arr = [];
|
||||
data.forEach(ele => {
|
||||
let obj = {
|
||||
name: ele.key,
|
||||
p: ele.value[0].value,
|
||||
s: ele.value[1].value,
|
||||
opt: createWordCloud(ele.value[0].value),
|
||||
tapIndex: 0
|
||||
}
|
||||
arr.push(obj);
|
||||
})
|
||||
this.dataSource = arr;
|
||||
|
||||
resolve(data);
|
||||
})
|
||||
.catch(() => {
|
||||
reject(false);
|
||||
});
|
||||
});
|
||||
},
|
||||
handlerTab(n,item) {
|
||||
item.tapIndex = n;
|
||||
if(n === 0) {
|
||||
item.opt = createWordCloud(item.p)
|
||||
} else {
|
||||
item.opt = createWordCloud(item.s)
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.owcc-outter {
|
||||
width: 100%;
|
||||
height: 460px;
|
||||
border: 2px solid #0f2a4d;
|
||||
margin-top: 16px;
|
||||
.owcc-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
.owcc-item {
|
||||
width: 314px;
|
||||
height: 412px;
|
||||
margin-top: 5px;
|
||||
.owcc-draw {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,146 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-16 13:14:28
|
||||
* @LastEditTime: 2021-10-16 13:44:02
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/summaryAndComparisonOfForumInformation/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="saco-outter">
|
||||
<v-label-div title="论坛信息概括对比" :showLine="false" :eStyle="{'border-style': 'none'}"/>
|
||||
<div class="saco-item" v-for="(item,index) in list" :key="index">
|
||||
<span class="s1">{{item.name}}</span>
|
||||
<div class="d1">
|
||||
<img class="d1-m1" src="../../../assets/images/BrandInsight/ic_lt.png">
|
||||
<div class="d1-d1">
|
||||
<span class="ss1">论坛信息量</span>
|
||||
<span class="ss2">{{item.a}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d1">
|
||||
<img class="d1-m1" src="../../../assets/images/BrandInsight/ic_hdrs.png">
|
||||
<div class="d1-d1">
|
||||
<span class="ss1">互动人数</span>
|
||||
<span class="ss2">{{item.b}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d1">
|
||||
<img class="d1-m1" src="../../../assets/images/BrandInsight/ic_ztl.png">
|
||||
<div class="d1-d1">
|
||||
<span class="ss1">论坛主贴量</span>
|
||||
<span class="ss2">{{item.c}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d1">
|
||||
<img class="d1-m1" src="../../../assets/images/BrandInsight/ic_pll.png">
|
||||
<div class="d1-d1">
|
||||
<span class="ss1">论坛评论量</span>
|
||||
<span class="ss2">{{item.d}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "summaryAndComparisonOfForumInformation",
|
||||
data() {
|
||||
return {
|
||||
list: [
|
||||
{
|
||||
name: '奥迪',
|
||||
a: 5869,
|
||||
b: 2345,
|
||||
c: 45678,
|
||||
d: 12345
|
||||
},
|
||||
{
|
||||
name: '宝马',
|
||||
a: 5869,
|
||||
b: 2345,
|
||||
c: 45678,
|
||||
d: 12345
|
||||
},
|
||||
{
|
||||
name: '奔驰',
|
||||
a: 5869,
|
||||
b: 2345,
|
||||
c: 45678,
|
||||
d: 12345
|
||||
},
|
||||
{
|
||||
name: '吉利',
|
||||
a: 5869,
|
||||
b: 2345,
|
||||
c: 45678,
|
||||
d: 12345
|
||||
},
|
||||
{
|
||||
name: '大众',
|
||||
a: 5869,
|
||||
b: 2345,
|
||||
c: 45678,
|
||||
d: 12345
|
||||
},
|
||||
{
|
||||
name: '别克',
|
||||
a: 5869,
|
||||
b: 2345,
|
||||
c: 45678,
|
||||
d: 12345
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.saco-outter {
|
||||
width: 944px;
|
||||
height: 412px;
|
||||
.saco-item {
|
||||
width: 912px;
|
||||
height: 54px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #0f2a4d;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
margin-bottom: 5px;
|
||||
margin-left: 16px;
|
||||
.s1 {
|
||||
width: 137px;
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
margin-left: 16px;
|
||||
}
|
||||
.d1 {
|
||||
width: 183px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
.d1-m1 {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
.d1-d1 {
|
||||
.ss1 {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: #7f868d;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.ss2 {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
font-family: Bebas;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,91 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-16 14:56:13
|
||||
* @LastEditTime: 2021-10-19 11:52:43
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/tailTOPMedia/index.vue
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="ttm-outter">
|
||||
<v-label-div title="尾翼TOP媒体" :showLine="false" :eStyle="{'border-style': 'none'}" />
|
||||
<div class="ttm-inner">
|
||||
<div class="ttm-item" v-for="(item,index) in list" :key="index">
|
||||
<span class="s1" :style="{color: colors[index]}">{{item.name}}</span>
|
||||
<div class="d1">
|
||||
<v-echarts :opt="item.drawOpt"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {createSingleColumnar} from "@/utils/gol/singleColumnar"
|
||||
export default {
|
||||
name: "tailTOPMedia",
|
||||
data() {
|
||||
return {
|
||||
colors: ['#3373CC', '#63AECC', '#54BF93', '#CC9D12', '#CC7733', '#CC5B41'],
|
||||
list: [
|
||||
{
|
||||
name: "奥迪",
|
||||
drawOpt: createSingleColumnar(["新浪微博", "汽车之家", "懂车帝", "抖音", "快手"],[2200, 1900, 1800, 1600, 1400])
|
||||
},
|
||||
{
|
||||
name: "宝马",
|
||||
drawOpt: createSingleColumnar(["新浪微博", "汽车之家", "懂车帝", "抖音", "快手"],[2200, 1900, 1800, 1600, 1400], '#63AECC')
|
||||
},
|
||||
{
|
||||
name: "奔驰",
|
||||
drawOpt: createSingleColumnar(["新浪微博", "汽车之家", "懂车帝", "抖音", "快手"],[2200, 1900, 1800, 1600, 1400], '#54BF93')
|
||||
},
|
||||
{
|
||||
name: "吉利",
|
||||
drawOpt: createSingleColumnar(["新浪微博", "汽车之家", "懂车帝", "抖音", "快手"],[2200, 1900, 1800, 1600, 1400], '#CC9D12')
|
||||
},
|
||||
{
|
||||
name: "大众",
|
||||
drawOpt: createSingleColumnar(["新浪微博", "汽车之家", "懂车帝", "抖音", "快手"],[2200, 1900, 1800, 1600, 1400], '#CC7733')
|
||||
},
|
||||
{
|
||||
name: "别克",
|
||||
drawOpt: createSingleColumnar(["新浪微博", "汽车之家", "懂车帝", "抖音", "快手"],[2200, 1900, 1800, 1600, 1400], '#CC5B41')
|
||||
}
|
||||
],
|
||||
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.ttm-outter {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
.ttm-inner {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
.ttm-item {
|
||||
width: 628px;
|
||||
height: 380px;
|
||||
.s1 {
|
||||
padding-left: 16px;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
}
|
||||
.d1 {
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,98 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-14 11:25:20
|
||||
* @LastEditTime: 2021-10-16 11:31:16
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/WeiboDetails/weiboUserActiveArea/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="wua-outter">
|
||||
<v-label-div
|
||||
title="用户区域分布"
|
||||
:showLine="false"
|
||||
:eStyle="{ 'border-style': 'none' }"
|
||||
>
|
||||
<v-tab-group
|
||||
:btns="['奥迪', '宝马', '奔驰', '吉利', '大众', '别克']"
|
||||
></v-tab-group>
|
||||
</v-label-div>
|
||||
<div class="wua-inner">
|
||||
<div class="d1">
|
||||
<v-echarts :opt="opt1"></v-echarts>
|
||||
</div>
|
||||
<div class="d2">
|
||||
<v-echars-map :opt="opt2"></v-echars-map>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getRegionWeiBoC } from "@/api/BrandComparison/BrandWeibo.js";
|
||||
import createOptD1 from "./opt1";
|
||||
import createOptD2 from "./opt2";
|
||||
export default {
|
||||
name: "userAreaDistribution",
|
||||
data() {
|
||||
return {
|
||||
opt1: createOptD1(),
|
||||
opt2: createOptD2(),
|
||||
form: {
|
||||
token: "",
|
||||
sBrand: "",
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.initData();
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
this.form.token = this.getToken;
|
||||
let arr = this.getBComparison;
|
||||
let brands = [];
|
||||
arr.forEach((ele) => {
|
||||
brands.push(ele.name);
|
||||
});
|
||||
this.form.sBrand = brands.toString();
|
||||
this.getData();
|
||||
},
|
||||
getData() {
|
||||
return new Promise((resolve, reject) => {
|
||||
let obj = Object.assign({}, this.getCtime2, this.form);
|
||||
getRegionWeiBoC(obj)
|
||||
.then((res) => {
|
||||
let data = res.data || [];
|
||||
resolve(data);
|
||||
})
|
||||
.catch(() => {
|
||||
reject(false);
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.wua-outter {
|
||||
width: 944px;
|
||||
height: 412px;
|
||||
.wua-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
.d1 {
|
||||
width: 479px;
|
||||
height: 100%;
|
||||
}
|
||||
.d2 {
|
||||
width: 465px;
|
||||
height: 100%;
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,75 @@
|
||||
|
||||
|
||||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-09 12:38:34
|
||||
* @LastEditTime: 2021-10-14 11:48:19
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/Index/tailInsight/opt.js
|
||||
*/
|
||||
import * as echarts from "echarts";
|
||||
export default function createOptD1() {
|
||||
return {
|
||||
grid: {
|
||||
left: '4%',
|
||||
right: '4%',
|
||||
bottom: '4%',
|
||||
top: "1%",
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
backgroundColor: "#08182F",
|
||||
color: "#fff",
|
||||
borderColor: "#3373CC",
|
||||
textStyle: {
|
||||
color: "#fff", //设置文字颜色
|
||||
},
|
||||
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: "dashed", // y轴分割线类型
|
||||
color: "#012b4b",
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: ['山西省', '浙江省', '北京市', '江西省', '江苏省', '福建省', '山东省', '天津市'],
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '2011',
|
||||
type: 'bar',
|
||||
barWidth: 24,
|
||||
data: [500, 1000, 2220, 3000, 4000, 3000,2200, 2600],
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
|
||||
offset: 0,
|
||||
color: '#010B19'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#2f68b4'
|
||||
}]),
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,134 @@
|
||||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-14 11:53:16
|
||||
* @LastEditTime: 2021-10-14 15:51:30
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/WeiboDetails/weiboUserActiveArea/opt2.js
|
||||
*/
|
||||
const ini_data = [];//初始化省份数组
|
||||
const provArr = ['河北', '河南', '云南', '辽宁', '黑龙江', '湖南', '安徽', '山东'];
|
||||
//正则省份，将省与市的字眼去掉，框架不识别
|
||||
for (var i = 0; i < provArr.length; i++) {
|
||||
var str = provArr[i];
|
||||
var re = /省|市/g; //全局匹配
|
||||
var str2 = { name: str.replace(re, ''), value: 5 };//拼接对象数组
|
||||
ini_data.push(str2);
|
||||
}
|
||||
export default function createOptD2() {
|
||||
return {
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
backgroundColor: "#08182F",
|
||||
color: "#fff",
|
||||
borderColor: "#3373CC",
|
||||
textStyle: {
|
||||
color: "#fff", //设置文字颜色
|
||||
},
|
||||
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
|
||||
},
|
||||
// geo: {
|
||||
// show: true,
|
||||
// map: 'china',
|
||||
// roam: false,//地图设置不可拖拽，固定的
|
||||
// itemStyle: {
|
||||
// normal: {
|
||||
// borderWidth: 0,
|
||||
// shadowColor: 'rgba(0,54,255, 1)',
|
||||
// shadowBlur: 100
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
visualMap: {
|
||||
type: 'continuous',
|
||||
show: false,
|
||||
min: 0,
|
||||
max: 2000,
|
||||
text: ['高', '低'],
|
||||
orient: 'horizontal',
|
||||
itemWidth: 15,
|
||||
itemHeight: 200,
|
||||
right: 0,
|
||||
bottom: 30,
|
||||
inRange: {
|
||||
color: ['#0393d2', '#75ddff']
|
||||
},
|
||||
textStyle: {
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "微博区域",
|
||||
type: "map",
|
||||
mapType: "china",
|
||||
roam: false,
|
||||
zoom: 1,//默认地图在容器中显示zoom:1,可根据需求放大缩小地图
|
||||
left: 16,
|
||||
top: 20,
|
||||
right: 10,
|
||||
bottom: 10,
|
||||
selectedMode:'multiple',
|
||||
colorBy: 'data',
|
||||
itemStyle: {
|
||||
areaColor: '#001f5b',//地图区域背景颜色
|
||||
borderColor: '#005cf9',//地图边界颜色
|
||||
shadowColor: '#005cf9',
|
||||
emphasis: {
|
||||
areaColor: '#3066ba',//鼠标滑过区域颜色
|
||||
label: {
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: false
|
||||
},
|
||||
},
|
||||
|
||||
// select: {
|
||||
// label: {
|
||||
// show: false
|
||||
// },
|
||||
// itemStyle: {
|
||||
// areaColor: '#3edffe'
|
||||
// }
|
||||
// },
|
||||
data: [
|
||||
{
|
||||
name: "河北省",
|
||||
value: 1000,
|
||||
// selected: true,
|
||||
},
|
||||
{
|
||||
name: "浙江省",
|
||||
value: 1100,
|
||||
// selected: true
|
||||
},
|
||||
{
|
||||
name: "山东省",
|
||||
value: 1200,
|
||||
// selected: true
|
||||
},
|
||||
{
|
||||
name: "山西省",
|
||||
value: 1300,
|
||||
// selected: true
|
||||
},
|
||||
{
|
||||
name: "上海市",
|
||||
value: 1400,
|
||||
// selected: true
|
||||
},
|
||||
{
|
||||
name: "江苏省",
|
||||
value: 1500,
|
||||
// selected: true
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,76 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-16 10:30:29
|
||||
* @LastEditTime: 2021-10-16 10:41:39
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/weiboBigVComparison/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="wbc-outter">
|
||||
<v-label-div
|
||||
title="微博大V对比"
|
||||
:showLine="false"
|
||||
:eStyle="{ 'border-style': 'none' }"
|
||||
></v-label-div>
|
||||
<div class="wbc-inner">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getBoauthen0528C } from "@/api/BrandComparison/BrandWeibo.js";
|
||||
import createOpt from "./opt";
|
||||
export default {
|
||||
name: "weiboBigVComparison",
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
token: "",
|
||||
sBrand: "",
|
||||
},
|
||||
opt: {}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.initData();
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
this.form.token = this.getToken;
|
||||
let arr = this.getBComparison;
|
||||
let brands = [];
|
||||
arr.forEach((ele) => {
|
||||
brands.push(ele.name);
|
||||
});
|
||||
this.form.sBrand = brands.toString();
|
||||
this.getData();
|
||||
},
|
||||
getData() {
|
||||
return new Promise((resolve, reject) => {
|
||||
let obj = Object.assign({}, this.getCtime2, this.form);
|
||||
getBoauthen0528C(obj)
|
||||
.then((res) => {
|
||||
let data = res.data || [];
|
||||
this.opt = createOpt(data);
|
||||
resolve(data);
|
||||
})
|
||||
.catch(() => {
|
||||
reject(false);
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.wbc-outter {
|
||||
width: 630px;
|
||||
height: 412px;
|
||||
.wbc-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,232 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-08 16:44:08
|
||||
* @LastEditTime: 2021-10-15 16:51:59
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/components/v-ranking/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="v-r-container">
|
||||
<div class="v-r-line" v-if="lineShow"></div>
|
||||
<div class="v-r-inner">
|
||||
<div :class="ls">
|
||||
<span class="s1">{{ num|numStr }}</span>
|
||||
</div>
|
||||
<div :class="rs">
|
||||
<span class="v-r-label">{{label}}</span>
|
||||
<div class="v-r-res">
|
||||
<span class="s1">传播量</span>
|
||||
<span class="s2">{{val}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "v-ranking-bcm",
|
||||
props: {
|
||||
num: {
|
||||
type: [String, Number],
|
||||
default: 1,
|
||||
},
|
||||
val: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
lineShow: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
|
||||
},
|
||||
watch: {
|
||||
num: {
|
||||
handler(val) {
|
||||
if(val == 1) {
|
||||
this.ls = "v-r-left-1"
|
||||
this.rs = "v-r-right-1"
|
||||
} else if(val == 2) {
|
||||
this.ls = "v-r-left-2"
|
||||
this.rs = "v-r-right-2"
|
||||
} else if(val == 3) {
|
||||
this.ls = "v-r-left-3"
|
||||
this.rs = "v-r-right-3"
|
||||
} else {
|
||||
this.ls = "v-r-left"
|
||||
this.rs = "v-r-right"
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
ls: "v-r-left",
|
||||
rs: "v-r-right"
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
numStr(val) {
|
||||
let str = ""
|
||||
if(0<val && val<10) {
|
||||
str = '0' + val
|
||||
} else {
|
||||
str = val + ''
|
||||
}
|
||||
return str
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.v-r-container {
|
||||
width: 281px;
|
||||
height: auto;
|
||||
.v-r-line {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background:#0a1d3b;
|
||||
margin-top: 14px;
|
||||
}
|
||||
.v-r-inner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
margin-top: 14px;
|
||||
color: #fff;
|
||||
background: #0a1d3b;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.v-r-label {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: #FFFFFF;
|
||||
margin-left: 30px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.v-r-res {
|
||||
margin-right: 16px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
span {
|
||||
display: block;
|
||||
text-align: right;
|
||||
font-size: 12px;
|
||||
}
|
||||
.s1 {
|
||||
color: #9ba4af;
|
||||
}
|
||||
.s2 {
|
||||
color: #fff;
|
||||
font-family: Bebas;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.v-r-left {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
.s1 {
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
line-height: 40px;
|
||||
font-family: Bebas;
|
||||
}
|
||||
}
|
||||
.v-r-right {
|
||||
position: absolute;
|
||||
width: 259px;
|
||||
height: 40px;
|
||||
border-top: 2px solid transparent;
|
||||
top: 0px;
|
||||
left: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.v-r-left-1 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
border: 2px solid #cc9d12;
|
||||
border-radius: 40px;
|
||||
.s1 {
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
line-height: 36px;
|
||||
text-shadow: 0px 0px 8px #cc9d12;
|
||||
font-family: Bebas;
|
||||
}
|
||||
}
|
||||
.v-r-right-1 {
|
||||
position: absolute;
|
||||
width: 259px;
|
||||
height: 40px;
|
||||
border-top: 2px solid #CC9D12;
|
||||
top: 0px;
|
||||
left: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.v-r-left-2 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
border: 2px solid #3373CC;
|
||||
border-radius: 40px;
|
||||
.s1 {
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
line-height: 36px;
|
||||
text-shadow: 0px 0px 8px #3373CC;
|
||||
font-family: Bebas;
|
||||
}
|
||||
}
|
||||
.v-r-right-2 {
|
||||
position: absolute;
|
||||
width: 259px;
|
||||
height: 40px;
|
||||
border-top: 2px solid #3373CC;
|
||||
top: 0px;
|
||||
left: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.v-r-left-3 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
border: 2px solid #54BF93;
|
||||
border-radius: 40px;
|
||||
.s1 {
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
line-height: 36px;
|
||||
text-shadow: 0px 0px 8px #54BF93;
|
||||
font-family: Bebas;
|
||||
}
|
||||
}
|
||||
.v-r-right-3 {
|
||||
position: absolute;
|
||||
width: 259px;
|
||||
height: 40px;
|
||||
border-top: 2px solid #54BF93;
|
||||
top: 0px;
|
||||
left: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,131 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-16 10:49:09
|
||||
* @LastEditTime: 2021-11-05 13:45:20
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/weiboTuneComparison/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="wtc-outter">
|
||||
<v-label-div
|
||||
title="微博调性对比"
|
||||
:showLine="false"
|
||||
:eStyle="{ 'border-style': 'none' }"
|
||||
>
|
||||
</v-label-div>
|
||||
<div class="wtc-d1">
|
||||
<div class="dd1" style="margin-left: 16px">
|
||||
<span class="s1"></span><span class="s2">正面</span>
|
||||
</div>
|
||||
<div class="dd1" style="margin-left: 24px">
|
||||
<span class="s1" :style="{ background: '#54BF93' }"></span
|
||||
><span class="s2">中性</span>
|
||||
</div>
|
||||
<div class="dd1" style="margin-left: 24px">
|
||||
<span class="s1" :style="{ background: '#CC9D12' }"></span
|
||||
><span class="s2">负面</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wtc-inner">
|
||||
<wbRoundata
|
||||
v-for="(item,index) in dataSource"
|
||||
:key="index"
|
||||
:title="item.Name"
|
||||
:color="colors[index]"
|
||||
:style="index === 0 ? 'margin-left: 46px': 'margin-left: 110px'"
|
||||
:data="item.Data"
|
||||
></wbRoundata>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAffectionsC } from "@/api/BrandComparison/BrandWeibo.js";
|
||||
import wbRoundata from "./wbRoundata";
|
||||
export default {
|
||||
name: "weiboTuneComparison",
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
token: "",
|
||||
sBrand: "",
|
||||
},
|
||||
colors: ["#3373CC","#63AECC","#54BF93","#CC9D12","#CC7733","#CC5B41"],
|
||||
dataSource: []
|
||||
};
|
||||
},
|
||||
components: {
|
||||
wbRoundata,
|
||||
},
|
||||
|
||||
created() {
|
||||
this.initData();
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
this.form.token = this.getToken;
|
||||
let arr = this.getBComparison;
|
||||
let brands = [];
|
||||
arr.forEach((ele) => {
|
||||
brands.push(ele.name);
|
||||
});
|
||||
this.form.sBrand = brands.toString();
|
||||
this.getData();
|
||||
},
|
||||
getData() {
|
||||
return new Promise((resolve, reject) => {
|
||||
let obj = Object.assign({}, this.getCtime2, this.form);
|
||||
getAffectionsC(obj)
|
||||
.then((res) => {
|
||||
let data = res.data || [];
|
||||
this.dataSource = data;
|
||||
resolve(data);
|
||||
})
|
||||
.catch(() => {
|
||||
reject(false);
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.wtc-outter {
|
||||
width: 100%;
|
||||
height: 460px;
|
||||
margin-top: 16px;
|
||||
.wtc-d1 {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
height: 36px;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
.dd1 {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
.s1 {
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: #3373cc;
|
||||
}
|
||||
.s2 {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.wtc-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,68 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-15 13:41:17
|
||||
* @LastEditTime: 2021-11-05 13:47:15
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/brandTonalDistribution/roundata/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="bd-item-round">
|
||||
<div class="bd-item-r-cav">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
</div>
|
||||
<span class="bd-item-r-c-s1" :style="{color: color}">{{title}}</span>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import createOpt from "./opt";
|
||||
export default {
|
||||
name: "wbRoundata",
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
data: {
|
||||
handler(val) {
|
||||
this.opt = createOpt(val)
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
//opt: createOpt(),
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.bd-item-round {
|
||||
display: inline-block;
|
||||
.bd-item-r-cav {
|
||||
width: 193px;
|
||||
height: 206px;
|
||||
}
|
||||
.bd-item-r-c-s1 {
|
||||
display: block;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,81 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-16 11:36:20
|
||||
* @LastEditTime: 2021-10-16 12:01:38
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/weiboUserPortrait/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="wup-outter">
|
||||
<v-label-div title="微博用户画像" :showLine="false" :eStyle="{'border-style': 'none'}">
|
||||
<v-tab-group :btns="['奥迪','宝马','奔驰','吉利','大众','别克']"></v-tab-group>
|
||||
</v-label-div>
|
||||
<div class="wup-inner">
|
||||
<div class="d1">
|
||||
<div class="dd1">
|
||||
<v-echarts :opt="opt1"></v-echarts>
|
||||
</div>
|
||||
<div class="dd2">
|
||||
<v-label-ctx label="男性" cont="2200" percentage="25%" color="#3373CC" :eStyle="{ height: '122px' }"></v-label-ctx>
|
||||
<v-label-ctx label="女性" cont="2200" percentage="25%" color="#63AECC" :eStyle="{ height: '122px' }"></v-label-ctx>
|
||||
<v-label-ctx label="未知" cont="2200" percentage="25%" color="#54BF93 " :eStyle="{ height: '122px' }"></v-label-ctx>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d1">
|
||||
<div class="dd1">
|
||||
<v-echarts :opt="opt2">
|
||||
<v-echarts :opt="opt2"></v-echarts>
|
||||
</v-echarts>
|
||||
</div>
|
||||
<div class="dd2" style="margin-right: 16px">
|
||||
<v-label-ctx label="已认证" cont="2200" percentage="25%" color="#3373CC" :eStyle="{ height: '122px' }"></v-label-ctx>
|
||||
<v-label-ctx label="未认证" cont="2200" percentage="25%" color="#63AECC" :eStyle="{ height: '122px' }"></v-label-ctx>
|
||||
<v-label-ctx label="未知" cont="2200" percentage="25%" color="#54BF93 " :eStyle="{ height: '122px' }"></v-label-ctx>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import createOpt1 from "./opt1";
|
||||
import createOpt2 from "./opt2";
|
||||
export default {
|
||||
name: "weiboUserPortrait",
|
||||
data() {
|
||||
return {
|
||||
opt1: createOpt1(),
|
||||
opt2: createOpt2(),
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.wup-outter {
|
||||
width: 944px;
|
||||
height: 412px;
|
||||
.wup-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
.d1 {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
overflow: hidden;
|
||||
.dd1 {
|
||||
width: 260px;
|
||||
height: 100%;
|
||||
}
|
||||
.dd2 {
|
||||
width: 240px;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue