张雄 3 years ago
parent eca8828773
commit 4ed2c4b88a

@ -0,0 +1,105 @@
import httpService from "@/request"
// 主题对比-信息量趋势
export function getCountTime0528C(params) {
let obj = Object.assign({action: 'getCountTime0528C', sType: 'BrandOverview',iContrastType: '4'}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}
// 主题对比-整体信息量
export function getContrastCount0528C(params) {
let obj = Object.assign({action: 'getContrastCount0528C', sType: 'BrandOverview',iContrastType: '4'}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}
// 主题对比-调性比例
export function getAffectionsC(params) {
let obj = Object.assign({action: 'getAffectionsC', sType: 'BrandOverview',iContrastType: '4'}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}
// 主题对比-整体互动人数
export function getInteractCount0528C(params) {
let obj = Object.assign({action: 'getInteractCount0528C', sType: 'BrandOverview',iContrastType: '4'}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}
// 主题对比-渠道分布
export function getSourcetypeC(params) {
let obj = Object.assign({action: 'getSourcetypeC', sType: 'BrandOverview',iContrastType: '4'}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}
// 主题对比-重点媒体传播对比
export function getSourceCount0528C(params) {
let obj = Object.assign({action: 'getSourceCount0528C', sType: 'BrandOverview',iContrastType: '4'}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}
// 主题对比-传播top媒体
export function getSourceTopCount0528C(params) {
let obj = Object.assign({action: 'getSourceTopCount0528C', sType: 'BrandOverview',iContrastType: '4'}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}
// 主题对比-整体词云对比
export function getPositiveAndNegative0528C(params) {
let obj = Object.assign({action: 'getPositiveAndNegative0528C', sType: 'BrandOverview',iContrastType: '4'}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}

@ -0,0 +1,92 @@
import httpService from "@/request"
// 主题对比-微博信息量对比
export function getContrastCount0528C(params) {
let obj = Object.assign({action: 'getContrastCount0528C', sType: 'BrandWeiBo',iContrastType: '4'}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}
// 主题对比-微博互动人数对比
export function getInteractCount0528C(params) {
let obj = Object.assign({action: 'getInteractCount0528C', sType: 'BrandWeiBo',iContrastType: '4'}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}
// 主题对比-微博大V
export function getBoauthen0528C(params) {
let obj = Object.assign({action: 'getBoauthen0528C', sType: 'BrandWeiBo',iContrastType: '4'}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}
// 主题对比-微博调性对比
export function getAffectionsC(params) {
let obj = Object.assign({action: 'getAffectionsC', sType: 'BrandWeiBo',iContrastType: '4'}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}
// 主题对比-微博内容方向
export function getDirect0528C(params) {
let obj = Object.assign({action: 'getDirect0528C', sType: 'BrandWeiBo',iContrastType: '4'}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}
// 主题对比-用户区域分布
export function getRegionWeiBoC(params) {
let obj = Object.assign({action: 'getRegionWeiBoC', sType: 'BrandWeiBo',iContrastType: '4'}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}
// 主题对比-微博人群画像
export function getSexMergeWeiBoC(params) {
let obj = Object.assign({action: 'getSexMergeWeiBoC', sType: 'BrandWeiBo',iContrastType: '4'}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 980 B

@ -9,10 +9,10 @@
<template>
<div class="v-btn-card">
<a style="margin-left: 24px; margin-top:8px" @click="edit" class="card-edit">编辑</a>
<a @click="edit" class="card-edit">编辑</a>
<a-popconfirm @confirm="del" @cancel="cancel">
<div slot="title" style="color: white">此操作将删除数据是否继续</div>
<a style="margin-left: 34px; margin-top:8px" @click="del" class="card-delete">删除</a>
<a @click="del" class="card-delete">删除</a>
</a-popconfirm>
</div>
@ -47,11 +47,13 @@ export default {
border-image: linear-gradient(180deg, rgba(69, 149, 230, 1), rgba(0, 172, 255, 0)) 2 2;
display: flex;
justify-content: space-around;
font-weight: 600;
font-size: 20px;
.card-edit {
margin-top: 8px;
font-size: 12px;
font-family: PingFang-SC-Bold, PingFang-SC;
font-weight: bold;
@ -59,6 +61,7 @@ export default {
line-height: 12px;
}
.card-delete {
margin-top: 8px;
font-size: 12px;
font-family: PingFang-SC-Bold, PingFang-SC;
font-weight: bold;

@ -127,10 +127,10 @@ export default {
}
},
computed: {
...mapGetters(['getZoom', 'getLoading', 'getToken', 'getUser', 'getAccount', 'getCommTime', 'getCtime', 'getCtime2', 'getHeaderType', 'getBrand', 'getModel', 'getSComparison', 'getBComparison', 'getMComparison', 'getEComparison', 'getLevelBtn', 'getMenu', 'getChangeSTime', 'getMcStatus','getBcStatus','getScStatus'])
...mapGetters(['getZoom', 'getLoading', 'getToken', 'getUser', 'getAccount', 'getCommTime', 'getCtime', 'getCtime2', 'getHeaderType', 'getBrand', 'getModel', 'getSComparison', 'getBComparison','getTComparison', 'getMComparison', 'getEComparison', 'getLevelBtn', 'getMenu', 'getChangeSTime', 'getMcStatus','getBcStatus','getScStatus','getTcStatus'])
},
methods: {
...mapActions(["setZoom", 'setLoading', 'setToken', 'setUser', 'setAccount', 'setCommTime', 'setCtime', 'setCtime2', 'setHeaderType', 'setBrand', 'setModel', 'setSComparison', 'setBComparison', 'setMComparison', 'setEComparison', 'setLevelBtn', 'setMenu', 'setChangeSTime','setMcStatus','setBcStatus','setScStatus']),
...mapActions(["setZoom", 'setLoading', 'setToken', 'setUser', 'setAccount', 'setCommTime', 'setCtime', 'setCtime2', 'setHeaderType', 'setBrand', 'setModel', 'setSComparison', 'setBComparison','setTComparison', 'setMComparison', 'setEComparison', 'setLevelBtn', 'setMenu', 'setChangeSTime','setMcStatus','setBcStatus','setScStatus','setTcStatus']),
// 获取当前日期时间
getDatetime() {
let now = new Date();

@ -58,9 +58,13 @@ const actions = {
setMComparison: ({commit}, log) => {
commit('setMComparison', log)
},
//设定主题对比和状态
setTComparison: ({commit}, log) => {
commit('setTComparison', log)
},
setTcStatus: ({commit}, log) => {
commit('setTcStatus', log)
},
setEComparison: ({commit}, log) => {
commit('setEComparison', log)
},

@ -63,6 +63,9 @@ const getters = {
getTComparison(state) {
return state.tComparison
},
getTcStatus(state) {
return state.tcStatus
},
getMcStatus(state) {
return state.mcStatus
},

@ -108,6 +108,11 @@ const mutations = {
let str = JSON.stringify(log);
LS.put('tComparison', str, 1/8);
},
setTcStatus: (state, log) => {
state.tcStatus = log;
let str = JSON.stringify(log);
LS.put('tcStatus', str, 1/8);
},
setLevelBtn: (state, log) => {
state.levelBtn = log;
let str = JSON.stringify(log);

@ -28,6 +28,7 @@ const state = {
mcStatus:LS.get('mcStatus') ? JSON.parse(LS.get('mcStatus')) : false,
eComparison:LS.get('eComparison') ? JSON.parse(LS.get('eComparison')) : [],
tComparison:LS.get('tComparison') ? JSON.parse(LS.get('tComparison')) : [], //主题对比
tcStatus:LS.get('tcStatus') ? JSON.parse(LS.get('tcStatus')) : false,
levelBtn:LS.get('levelBtn') ? JSON.parse(LS.get('levelBtn')) : [],
menu: LS.get('menu') ? JSON.parse(LS.get('menu')) : [],
}

@ -28,7 +28,7 @@ function createData(obj = {}) {
//给颜色设置渐变色 前面4个参数给第一个设置1第四个设置0 ,就是水平渐变
//给第一个设置0第四个设置1就是垂直渐变
offset: 0,
color: 'black'
color: color
}, {
offset: 1,
color: color

@ -9,7 +9,7 @@
<a-tabs type="card" @change=handlerChangeTheme>
<template slot="tabBarExtraContent">
<a-button @click="handlerAdd" type="primary">新增主题</a-button>
<!-- <a-button @click="handlerCompare" type="primary" style="margin: 0px 16px 0px 16px">主题对比</a-button> -->
<a-button @click="handlerCompare" type="primary" style="margin: 0px 16px 0px 16px">主题对比</a-button>
</template>
<a-tab-pane class="tab-pane" key="0" tab="我的主题">
<div class="card-items" v-for="(item, index) in myThemeArr" :key="index">

@ -1,162 +1,124 @@
<!--
* @Author: your name
* @Date: 2021-11-05 13:56:24
* @LastEditTime: 2021-12-16 10:03:29
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandComparison/BrandBeginComparte.vue
-->
<template>
<div class="d-container">
<div class="bbc-inner">
<brandCompateHeader ref="brandRef" @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 brands" :key="index" @click="handlerBrand(item)">{{item.brandname}}</li>
</ul>
<div style="clear: both"></div>
</div>
<div class="bc-outter">
<themeCompateHeader :data="getTComparison" @change="handlerChangeTheme"></themeCompateHeader>
<vue-lazy-component>
<informationTrend></informationTrend>
</vue-lazy-component>
<div class="bc-d2">
<vue-lazy-component>
<overallInformation></overallInformation>
</vue-lazy-component>
<vue-lazy-component>
<overallNumberOfInteractions></overallNumberOfInteractions>
</vue-lazy-component>
</div>
<vue-lazy-component>
<themeTonalDistribution></themeTonalDistribution>
</vue-lazy-component>
<div class="bc-d2">
<vue-lazy-component>
<channelDistribution></channelDistribution>
</vue-lazy-component>
<vue-lazy-component>
<keyMediaCommunicationComparison></keyMediaCommunicationComparison>
</vue-lazy-component>
</div>
<div class="beCpm-footer" @click="handlerSubmit">
开始对比
<vue-lazy-component>
<themeTOPMedia></themeTOPMedia>
</vue-lazy-component>
<vue-lazy-component>
<overallWordCloudComparison></overallWordCloudComparison>
</vue-lazy-component>
<div class="bc-d4">
<v-label-div title="主题微博对比"></v-label-div>
<div class="bc-d4-d1">
<vue-lazy-component>
<comparisonOfWeiboInformation></comparisonOfWeiboInformation>
</vue-lazy-component>
<vue-lazy-component>
<comparisonOfTheNumberOfWeiboInteractions></comparisonOfTheNumberOfWeiboInteractions>
</vue-lazy-component>
<vue-lazy-component>
<weiboBigVComparison></weiboBigVComparison>
</vue-lazy-component>
</div>
<vue-lazy-component>
<weiboTuneComparison></weiboTuneComparison>
</vue-lazy-component>
<vue-lazy-component>
<weiboContentDirectionComparison></weiboContentDirectionComparison>
</vue-lazy-component>
<div class="bc-d4-d2">
<vue-lazy-component>
<userAreaDistribution></userAreaDistribution>
</vue-lazy-component>
<vue-lazy-component>
<weiboUserPortrait></weiboUserPortrait>
</vue-lazy-component>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import {getRecommendSeries} from "@/api/comm"
import brandCompateHeader from "./brandCompateHeader"
export default {
name: "BrandBeginComparte",
name: "ThemeCompare",
inject: ["reload"],
components: {
brandCompateHeader
},
inject: ['reload'],
data() {
return {
form: {
token: "",
sType: 'brand'
},
chooseArr: [null, null, null, null, null, null],
brands: [],
}
},
created() {
this.form.token = this.getToken;
this.getData();
themeCompateHeader: (resolve) => require(['./themeCompateHeader'], resolve), //
informationTrend: (resolve) => require(['./informationTrend'], resolve), //
overallInformation: (resolve) => require(['./overallInformation'], resolve), //
overallNumberOfInteractions: (resolve) => require(['./overallNumberOfInteractions'], resolve), //
themeTonalDistribution: (resolve) => require(['./themeTonalDistribution'], resolve), //
channelDistribution: (resolve) => require(['./channelDistribution'], resolve), //
keyMediaCommunicationComparison: (resolve) => require(['./keyMediaCommunicationComparison'], resolve), //
themeTOPMedia: (resolve) => require(['./themeTOPMedia'], resolve), // top
overallWordCloudComparison: (resolve) => require(['./overallWordCloudComparison'], resolve), //
comparisonOfWeiboInformation: (resolve) => require(['./comparisonOfWeiboInformation'], resolve), //
comparisonOfTheNumberOfWeiboInteractions: (resolve) => require(['./comparisonOfTheNumberOfWeiboInteractions'], resolve), //
weiboBigVComparison: (resolve) => require(['./weiboBigVComparison'], resolve), //
weiboTuneComparison: (resolve) => require(['./weiboTuneComparison'], resolve), //
weiboContentDirectionComparison: (resolve) => require(['./weiboContentDirectionComparison'], resolve), //
userAreaDistribution: (resolve) => require(['./userAreaDistribution'], resolve), //
weiboUserPortrait: (resolve) => require(['./weiboUserPortrait'], resolve), //
},
methods: {
//
getData() {
let obj = Object.assign({}, this.form);
getRecommendSeries(obj).then(res => {
let data = res.data || [];
this.brands = data;
})
},
//
handlerBrand(row) {
for(let i = 0; i < this.chooseArr.length; i++) {
let n = this.chooseArr.findIndex(ele =>{
return ele && ele.brandname === row.brandname
})
if(!this.chooseArr[i] && n === -1) {
this.chooseArr[i] = row;
let obj = this.$refs.brandRef.brands[i]
obj.name = row.brandname;
obj.isDel = true;
return;
}
}
},
//
handlerDel(n) {
this.chooseArr[n] = null;
handlerChangeTheme(arr) {
this.setTComparison(arr);
this.reload();
},
//
handlerSubmit() {
let arr = this.$refs.brandRef.brands || [];
let filterArr = arr.filter((ele) => {
return ele.name;
});
if(filterArr.length < 2) {
this.$message.warning('至少2个品牌进行对比');
return;
}
this.setBComparison(filterArr);
this.setBcStatus(true);
this.reload()
}
}
}
</script>
<style lang="less" scoped>
.bbc-inner {
<style lang="less">
.bc-outter {
padding: 0px 16px 16px 16px;
}
.mbc-inner {
.bc-d2 {
width: 100%;
height: 488px;
height: auto;
display: flex;
justify-content: flex-start;
margin-top: 16px;
}
.bc-d4 {
width: 100%;
height: auto;
border: 2px solid #0f2a4d;
margin-top: 16px;
.mbc-dd {
.bc-d4-d1 {
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;
}
}
display: flex;
justify-content: flex-start;
}
.bc-d4-d2 {
width: 100%;
height: auto;
display: flex;
justify-content: flex-start;
}
}
.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;
font-weight: bold;
text-align: center;
line-height: 64px;
margin-top: 16px;
}
</style>

@ -0,0 +1,227 @@
<!--
* @Author: your name
* @Date: 2021-11-05 13:56:24
* @LastEditTime: 2021-12-16 10:03:29
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandComparison/BrandBeginComparte.vue
-->
<template>
<div class="d-container">
<div class="bbc-inner">
<themeCompateHeader ref="brandRef" @del="handlerDel"></themeCompateHeader>
<div class="mbc-inner">
<v-label-div title="主题分析">
</v-label-div>
<div class="card-outter">
<div class="card-items" v-for="(item, index) in myThemeArr" :key="index">
<div class="card-item-top">
<div class="card-uncomp" v-if="item.isCom">
<span style="margin-top: 5px">进行中</span>
</div>
<div class="card-completed" v-else></div>
</div>
<div class="card-item-data" @click="addThemeData(item)">
<div class="cid-title">
{{item.name}}
</div>
<div class="cid-data">
<div class="s1"><div class="s1-title">开始时间</div><div class="s1-text">{{item.startTime}}</div></div>
<div class="s1"><div class="s1-title">结束时间</div><div class="s1-text">{{item.endTime}}</div></div>
<div class="s1"><div class="s1-title">相关报道</div><div class="s1-text">{{item.total}}</div></div>
</div>
</div>
</div>
</div>
</div>
<div class="beCpm-footer" @click="handlerSubmit">
开始对比
</div>
</div>
</div>
</template>
<script>
import {getSchemeDataToTheme} from "@/api/ThemeAnalize"
import themeCompateHeader from "./themeCompateHeader"
export default {
name: "BrandBeginComparte",
components: {
themeCompateHeader
},
inject: ['reload'],
data() {
return {
form: {
token: "",
pageIndex: '',
pageSize: '',
sType: 'former' //former now
},
chooseArr: [null, null, null, null, null, null],
brands: [],
myThemeArr: [],
}
},
created() {
this.form.token = this.getToken;
this.getData();
},
methods: {
//
getData() {
let obj = Object.assign({}, this.form);
getSchemeDataToTheme(obj).then(res => {
let data = res.data;
let themeArr = [];
data.forEach(ele => {
let obj = {
guids: ele.Guids,
name: ele.Name,
startTime: ele.StartTime,
endTime: ele.EndTime,
total: ele.ReportSum,
isCom: true
};
//
if(new Date(ele.EndTime) <= new Date(this.getDatetime().clock + '' + this.getDatetime().sClock)) {
obj.isCom = false
}
themeArr.push(obj);
})
this.myThemeArr = themeArr;
})
},
//
addThemeData(row) {
for(let i = 0; i < this.chooseArr.length; i++) {
let n = this.chooseArr.findIndex(ele =>{
return ele && ele.name === row.name
})
if(!this.chooseArr[i] && n === -1) {
this.chooseArr[i] = row;
let obj = this.$refs.brandRef.brands[i]
obj.name = row.name;
obj.guids = row.guids;
obj.isDel = true;
return;
}
}
},
//
handlerDel(n) {
this.chooseArr[n] = null;
},
//
handlerSubmit() {
let arr = this.$refs.brandRef.brands || [];
let filterArr = arr.filter((ele) => {
return ele.name;
});
if(filterArr.length < 2) {
this.$message.warning('至少2个品牌进行对比');
return;
}
this.setTComparison(filterArr);
this.setTcStatus(true);
this.reload()
}
}
}
</script>
<style lang="less" scoped>
.bbc-inner {
padding: 0px 16px 16px 16px;
}
.mbc-inner {
width: 100%;
border: 2px solid #0f2a4d;
margin-top: 16px;
.card-outter {
display: flex;
flex-wrap:wrap;
justify-content: flex-start;
align-items: center;
padding-left: 16px;
}
}
.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;
font-weight: bold;
text-align: center;
line-height: 64px;
margin-top: 16px;
}
.card-items {
width: 446px;
height: 240px;
border: 2px solid #0F2A4D;
border-radius: 4px;
margin-top: 16px;
margin-right: 20px;
background: #010B19;
.card-item-top {
width: 100%;
display: flex;
justify-content: space-between;
.card-uncomp {
color: #63AECC;
width: 95px;
height: 28px;
border-radius: 0px 0px 0px 1px;
background-repeat: no-repeat;
background-size: cover;
background-image: url('../../assets/images/Index/card_status.png');
display: -webkit-box;
-webkit-box-align: center;/*兼容FSafari、Chrome */
-webkit-box-pack: center;/*兼容FSafari、Chrome */
};
.card-completed {
color: rgb(71, 114, 145);
width: 95px;
height: 28px;
background-repeat: no-repeat;
background-size: cover;
border-radius: 0px 0px 0px 1px;
background-image: url('../../assets/images/Index/card_status.png');
display: -webkit-box;
-webkit-box-align: center;/*兼容FSafari、Chrome */
-webkit-box-pack: center;/*兼容FSafari、Chrome */
}
}
.card-item-data {
width: 100%;
padding: 16px;
color: white;
.cid-title {
height: 133px;
font-size: 20px;
}
.cid-data {
display: flex;
justify-content: flex-start;
.s1 {
width: 33%;
display: block;
font-family: Bebas;
font-size: 12px;
.s1-title {
color: #7b93a5;
}
}
}
}
}
</style>

@ -0,0 +1,89 @@
<!--
* @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-loading="load">
<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/ThemeComparison/index.js";
import createOpt from "./opt";
export default {
name: "channelDistribution",
data() {
return {
load: false,
form: {
token: "",
sGuid: "",
sTimeType: 3
},
opt: {},
};
},
created() {
this.initData();
},
methods: {
initData() {
this.form.token = this.getToken;
let arr = this.getTComparison;
let sGuid = [];
arr.forEach((ele) => {
sGuid.push(ele.guids);
});
this.form.sGuid = sGuid.toString();
this.getData();
},
getData() {
return new Promise((resolve, reject) => {
let obj = Object.assign({}, this.getCtime2, this.form);
this.load = true;
getSourcetypeC(obj)
.then((res) => {
let data = res.data || [];
let brandList = [];
let dx = [];
data.forEach((e) => {
let ab = e.Data || {};
for (let key in ab) {
if (!dx.includes(key)) {
dx.push(key);
}
}
brandList.push(e.Name);
});
this.opt = createOpt(data, dx, brandList);
this.load = false;
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,166 @@
/*
* @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"
import * as echarts from "echarts";
let colors = [new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#3373CC'
},
{
offset: 1,
color: '#3373CC66'
}
], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#63AECC'
},
{
offset: 1,
color: '#63AECC66'
}
], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#54BF93'
},
{
offset: 1,
color: '#54BF9366'
}
], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#CC9D12'
},
{
offset: 1,
color: '#CC9D1266'
}
], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#CC7733'
},
{
offset: 1,
color: '#CC773366'
}
], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#CC5B41'
},
{
offset: 1,
color: '#CC5B4166'
}
], false)]
function createData(dataList = [],dx = []) {
let arr = [];
dataList.forEach(e => {
let a = [];
let Data = e.Data || {};
dx.forEach(e => {
a.push(Data[e])
})
let o = {
name: e.Name,
type: 'bar',
barGap: 0,
barWidth: 13.7,
emphasis: {
focus: 'series'
},
data: a
};
arr.push(o)
})
return arr;
}
export default function createOpt(dataList = [],dx = [], brandList = []) {
let info = createData(dataList,dx);
return {
grid: {
left: 10,
right: '5%',
bottom: 10,
top: 52,
// top: "56px",
// left: "16px",
// right: "28px",
// bottom: "16px",
containLabel: true,
},
color: colors,
legend: {
data: brandList,
textStyle: { //图例文字的样式
color: '#fff',
fontSize: 10
},
y: 12,
x: 16,
itemWidth: 12,
itemHeight: 12
},
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: 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: info
}
}

@ -0,0 +1,86 @@
<!--
* @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-loading="load">
<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/ThemeComparisonWeibo";
import { createSingleColumnar } from "@/utils/gol/singleColumnar";
export default {
name: "comparisonOfTheNumberOfWeiboInteractions",
data() {
return {
form: {
token: "",
sGuid: "",
sTimeType: 3
},
opt: {},
load: false,
};
},
created() {
this.initData();
},
methods: {
initData() {
this.form.token = this.getToken;
let arr = this.getTComparison;
let sGuid = [];
arr.forEach((ele) => {
sGuid.push(ele.guids);
});
this.form.sGuid = sGuid.toString();
this.getData();
},
getData() {
return new Promise((resolve, reject) => {
let obj = Object.assign({}, this.getCtime2, this.form);
this.load = true;
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,'#54BF93');
this.load = false;
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,87 @@
<!--
* @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-loading="load">
<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/ThemeComparisonWeibo";
import { createSingleColumnar } from "@/utils/gol/singleColumnar";
export default {
name: "comparisonOfWeiboInformation",
data() {
return {
form: {
token: "",
sGuid: "",
sTimeType: 3
},
load: false,
opt: {}
};
},
created() {
this.initData();
},
methods: {
initData() {
this.form.token = this.getToken;
let arr = this.getTComparison;
let sGuid = [];
arr.forEach((ele) => {
sGuid.push(ele.guids);
});
this.form.sGuid = sGuid.toString();
this.getData();
},
getData() {
return new Promise((resolve, reject) => {
let obj = Object.assign({}, this.getCtime2, this.form);
this.load = true;
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);
this.load = false
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>

@ -1,12 +1,27 @@
<template>
<div class="d-container">
<theme-compare v-if="hasData"></theme-compare>
<theme-index v-else></theme-index>
</div>
</template>
<script>
import ThemeIndex from "./ThemeIndex.vue";
import ThemeCompare from './ThemeCompare.vue';
export default {
name: "ThemeComparison"
name: "ThemeComparison",
components: {
ThemeIndex,
ThemeCompare,
},
data() {
return {
hasData: false,
};
},
created() {
this.hasData = this.getTcStatus;
},
}
</script>

@ -0,0 +1,159 @@
<!--
* @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-loading="load">
<v-label-div title="信息量趋势"></v-label-div>
<div class="it-inner">
<v-echarts :opt="opt" @clickMark="clickMark"></v-echarts>
</div>
<div class="vshow" v-if="modelShow" :style="modelStyle">
<vLabel-div title="实时热点事件">
<a-button @click="closeBox"></a-button>
</vLabel-div>
<div class="vshow-item" v-for="(item, index) in urlArr[activeCol].value[activeIndex].hotTop" :key="index">
<a :href="item.url" target="tar">{{doStr(item.title, 28)}}</a>
</div>
</div>
</div>
</template>
<script>
import { getCountTime0528C } from "@/api/ThemeComparison";
import {doStr} from "@/utils/gol/dataTool"
import createOpt from "./opt";
export default {
name: "informationTrend",
data() {
return {
////
modelStyle: {
left: "",
top: "",
},
modelShow: false,
ecbox: {
//
width: 1880,
height: 490,
},
ecmodel: {
//
width: 300,
height: 280,
},
activeCol: 0,
activeIndex: 0,
//-*-//
load: false,
form: {
token: "",
sGuid: "",
sTimeType: 3
},
opt: {},
urlArr: [],
doStr: doStr
};
},
created() {
this.initData();
},
methods: {
initData() {
this.form.token = this.getToken;
let arr = this.getTComparison;
let sGuid = [];
arr.forEach((ele) => {
sGuid.push(ele.guids);
});
this.form.sGuid = sGuid.toString();
this.getData();
},
getData() {
let obj = Object.assign({}, this.form);
this.load = true;
getCountTime0528C(obj).then((res) => {
let data = res.data || [];
let dx = [];
let ds = [];
this.urlArr = data;
let markData = [[], [], [], [], [], []];
let dataI = 0;
data.forEach((ele) => {
let key = ele.key;
let value = ele.value;
dx.push(key);
ds.push(value);
for (let i = 0; i < ele.value.length; i++) {
if (ele.value[i].hotTop[0]) {
let obj = {
timeIndex: dataI,
yVal: data[dataI].value[i].value,
url: ele.value[i].hotTop,
};
markData[i].push(obj);
// console.log(i)//
// console.log(dataI)//
// console.log(ele.value[i].hotTop)//[{},{}]
}
}
dataI = dataI + 1;
});
this.opt = createOpt(dx, ds, markData);
this.load = false;
});
},
//
clickMark(data) {
this.activeCol = data.index;
this.activeIndex = data.seriesIndex;
this.modelShow = true;
let mw = window.event;
if (this.ecbox.width - mw.offsetX - 20 > this.ecmodel.width) {
this.modelStyle.left = mw.offsetX + 20 + "px";
} else {
this.modelStyle.left = mw.offsetX - this.ecmodel.width - 20 + "px";
}
if (this.ecbox.height - mw.offsetY - 20 > this.ecmodel.height) {
this.modelStyle.top = mw.offsetY + "px";
} else {
this.modelStyle.top = mw.offsetY - this.ecmodel.height + "px";
}
},
closeBox() {
this.modelShow = false;
},
},
};
</script>
<style lang="less" scoped>
.it-outter {
width: 100%;
height: 460px;
border: 2px solid #0f2a4d;
margin-top: 16px;
.it-inner {
width: 100%;
height: calc(100% - 48px);
}
}
.vshow{
position: absolute;
width: 300px;
background: rgb(3, 18, 36);
border: 4px solid #0f2a4d;
.vshow-item {
padding: 11px;
width: 100%;
font-size: 15px;
color: rgb(54, 189, 239);
}
}
</style>

@ -0,0 +1,142 @@
/*
* @Author: your name
* @Date: 2021-10-12 10:11:24
* @LastEditTime: 2021-11-19 19:47:53
* @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 = [], markData = []) {
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],
markPoint: {
data: [],
}
};
} else {
testData[val.key].data.push(val.value)
}
})
})
let arr = [];
for(let key in testData) {
arr.push(testData[key])
}
for(let i = 0;i< arr.length; i++) {
markData[i].forEach(ele => {
arr[i].markPoint.data.push(
{
name: 'Max',
xAxis: ele.timeIndex, yAxis: ele.yVal,
symbol: 'pin',
symbolSize: 16,
symbolOffset: [0, '-70%'],
}
)
})
}
return arr
}
export default function createOpt(dx = [], ds = [], markData = []) {
let data = createData(ds, markData);
return {
grid: {
left: 10,
right: '5%',
bottom: 10,
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',
fontSize: 10
},
y: 12,
x: 16,
itemWidth: 12,
itemHeight: 12
},
xAxis: {
type: 'category',
boundaryGap: false,
axisTick: {
show: false,
},
axisLabel: {
formatter: (value) => {
let rex = "00:00:00";
let isCont = false;
let str = value;
for(let i = 0;i<dx.length-1;i++){
//连续两条带小时
if(dx[i].indexOf(rex) === -1 && dx[i+1].indexOf(rex) === -1){
isCont = true;
break;
}
}
if(isCont == true) {
str = value.substring(10, 16)
} else {
str = value.substring(5, 10)
}
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,82 @@
<!--
* @Author: your name
* @Date: 2021-10-15 15:34:26
* @LastEditTime: 2021-11-11 16:43:10
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandComparison/keyMediaCommunicationComparison/index.vue
-->
<template>
<div class="kmcc-outter" v-loading="load">
<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/ThemeComparison/index.js";
export default {
name: "kmcc-outter",
data() {
return {
load: false,
form: {
token: "",
sGuid: "",
sTimeType: 3
},
opt: {},
};
},
created() {
this.initData();
},
methods: {
initData() {
this.form.token = this.getToken;
let arr = this.getTComparison;
let sGuid = [];
arr.forEach((ele) => {
sGuid.push(ele.guids);
});
this.form.sGuid = sGuid.toString();
this.getData();
},
getData() {
let obj = Object.assign({}, this.getCtime2, this.form);
this.load = true;
getSourceCount0528C(obj).then((res) => {
let data = res.data;
let dx = [];
data.forEach((ele) => {
let ab = ele.value || [];
// dx
ab.forEach((e) => {
if (!dx.includes(e.key)) {
dx.push(e.key);
}
});
});
this.opt = createOpt(dx, data);
this.load = false;
});
},
},
};
</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,169 @@
/*
* @Author: your name
* @Date: 2021-10-09 11:01:19
* @LastEditTime: 2021-11-21 16:51:55
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/Index/spreadTheSound/opt.js
*/
import { bigNumberTransform } from "@/utils/gol/dataTool";
import * as echarts from "echarts";
let colors = [new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#3373CC'
},
{
offset: 1,
color: '#3373CC66'
}
], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#63AECC'
},
{
offset: 1,
color: '#63AECC66'
}
], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#54BF93'
},
{
offset: 1,
color: '#54BF9366'
}
], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#CC9D12'
},
{
offset: 1,
color: '#CC9D1266'
}
], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#CC7733'
},
{
offset: 1,
color: '#CC773366'
}
], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#CC5B41'
},
{
offset: 1,
color: '#CC5B4166'
}
], false)]
function createData(dataList = [],dx) {
let arr = [];
dataList.forEach(ele => {
let a = [];
let Data = ele.value || [];
dx.forEach(e => {
Data.forEach(ex => {
if (ex.key === e) {
a.push(ex.value)
}
})
})
let o = {
name: ele.key,
type: 'bar',
stack: 'total',
barWidth: 24,
emphasis: {
focus: 'series'
},
data: a
};
arr.push(o);
})
return arr;
}
export default function createOpt(dx = [], dataList = [], n = 4) {
let info = createData(dataList, dx);
return {
grid: {
left: 10,
right: '5%',
bottom: 10,
top: 52,
containLabel: true
},
tooltip: {
trigger: "axis",
backgroundColor: "#08182F",
color: "#fff",
borderColor: "#3373CC",
textStyle: {
color: "#fff", //设置文字颜色
},
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
},
color: colors,
legend: {
textStyle: { //图例文字的样式
color: '#fff',
fontSize: 10
},
y: 12,
x: 16,
itemWidth: 12,
itemHeight: 12
},
xAxis: {
type: 'category',
axisTick: {
show: false,
},
axisLabel: {
interval: 0,
formatter: function (value) {
return (value.length > n ? (value.slice(0,n)+"...") : value )
},
},
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: info
}
}

@ -0,0 +1,77 @@
<!--
* @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-loading="load">
<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/ThemeComparison";
import { createSingleColumnar } from "@/utils/gol/singleColumnar";
export default {
name: "overallInformation",
data() {
return {
load: false,
form: {
token: "",
sGuid: "",
sTimeType: 3
},
opt: {},
};
},
created() {
this.initData();
},
methods: {
initData() {
this.form.token = this.getToken;
let arr = this.getTComparison;
let sGuid = [];
arr.forEach((ele) => {
sGuid.push(ele.guids);
});
this.form.sGuid = sGuid.toString();
this.getData();
},
getData() {
let obj = Object.assign({}, this.form);
this.load = true;
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,'#3373CC',10);
this.load = false;
});
},
},
};
</script>
<style lang="less" scoped>
.oi-outter {
width: 936px;
height: 460px;
border: 2px solid #0f2a4d;
.oi-inner {
width: 100%;
height: calc(100% - 48px);
}
}
</style>

@ -0,0 +1,78 @@
<!--
* @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-loading="load">
<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/ThemeComparison";
import { createSingleColumnar } from "@/utils/gol/singleColumnar";
export default {
name: "overallInformation",
data() {
return {
load: false,
form: {
token: "",
sGuid: "",
sTimeType: 3
},
opt: {},
};
},
created() {
this.initData();
},
methods: {
initData() {
this.form.token = this.getToken;
let arr = this.getTComparison;
let sGuid = [];
arr.forEach((ele) => {
sGuid.push(ele.guids);
});
this.form.sGuid = sGuid.toString();
this.getData();
},
getData() {
this.load = true;
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,'#54BF93',10);
this.load = false;
});
},
},
};
</script>
<style lang="less" scoped>
.onoi-outter {
width: 936px;
height: 460px;
border: 2px solid #0f2a4d;
margin-left: 16px;
.onoi-inner {
width: 100%;
height: calc(100% - 48px);
}
}
</style>

@ -0,0 +1,133 @@
<!--
* @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-loading="load">
<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/ThemeComparison";
import createWordCloud from "@/utils/gol/bubbleWord";
export default {
name: "overallWordCloudComparison",
data() {
return {
opt: {},
form: {
token: "",
sGuid: "",
sTimeType: 3
},
load: false,
colors: [
"#3373CC",
"#63AECC",
"#54BF93",
"#CC9D12",
"#CC7733",
"#CC5B41",
],
dataSource: []
};
},
created() {
this.initData();
},
methods: {
initData() {
this.form.token = this.getToken;
let arr = this.getTComparison;
let sGuid = [];
arr.forEach((ele) => {
sGuid.push(ele.guids);
});
this.form.sGuid = sGuid.toString();
this.getData();
},
getData() {
return new Promise((resolve, reject) => {
let obj = Object.assign({}, this.getCtime2, this.form);
this.load = true;
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;
this.load = false;
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: center;
.owcc-item {
width: 314px;
height: 412px;
margin-top: 5px;
.owcc-draw {
width: 100%;
height: calc(100% - 48px);
}
}
}
}
</style>

@ -0,0 +1,215 @@
/*
* @Author: your name
* @Date: 2021-10-09 13:35:13
* @LastEditTime: 2021-10-15 17:23:18
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/Index/hotDiscussionGraph/opt.js
*/
// import * as echarts from "echarts";
const dataBJ = [
[1, 55, 9, 56, 0.46, 18, 6, '良'],
[2, 25, 11, 21, 0.65, 34, 9, '优'],
[3, 56, 7, 63, 0.3, 14, 5, '良'],
[4, 33, 7, 29, 0.33, 16, 6, '优'],
[5, 42, 24, 44, 0.76, 40, 16, '优'],
[6, 82, 58, 90, 1.77, 68, 33, '良'],
[7, 74, 49, 77, 1.46, 48, 27, '良'],
[8, 78, 55, 80, 1.29, 59, 29, '良'],
[9, 267, 216, 280, 4.8, 108, 64, '重度污染'],
// [10, 185, 127, 216, 2.52, 61, 27, '中度污染'],
// [11, 39, 19, 38, 0.57, 31, 15, '优'],
// [12, 41, 11, 40, 0.43, 21, 7, '优'],
// [13, 64, 38, 74, 1.04, 46, 22, '良'],
// [14, 108, 79, 120, 1.7, 75, 41, '轻度污染'],
// [15, 108, 63, 116, 1.48, 44, 26, '轻度污染'],
// [16, 33, 6, 29, 0.34, 13, 5, '优'],
// [17, 94, 66, 110, 1.54, 62, 31, '良'],
// [18, 186, 142, 192, 3.88, 93, 79, '中度污染'],
// [19, 57, 31, 54, 0.96, 32, 14, '良'],
// [20, 22, 8, 17, 0.48, 23, 10, '优'],
// [21, 39, 15, 36, 0.61, 29, 13, '优'],
// [22, 94, 69, 114, 2.08, 73, 39, '良'],
// [23, 99, 73, 110, 2.43, 76, 48, '良'],
// [24, 31, 12, 30, 0.5, 32, 16, '优'],
// [25, 42, 27, 43, 1, 53, 22, '优'],
// [26, 154, 117, 157, 3.05, 92, 58, '中度污染'],
// [27, 234, 185, 230, 4.09, 123, 69, '重度污染'],
// [28, 160, 120, 186, 2.77, 91, 50, '中度污染'],
// [29, 134, 96, 165, 2.76, 83, 41, '轻度污染'],
// [30, 52, 24, 60, 1.03, 50, 21, '良'],
// [31, 46, 5, 49, 0.28, 10, 6, '优']
];
const dataGZ = [
[1, 26, 37, 27, 1.163, 27, 13, '优'],
[2, 85, 62, 71, 1.195, 60, 8, '良'],
[3, 78, 38, 74, 1.363, 37, 7, '良'],
[4, 21, 21, 36, 0.634, 40, 9, '优'],
[5, 41, 42, 46, 0.915, 81, 13, '优'],
// [6, 56, 52, 69, 1.067, 92, 16, '良'],
// [7, 64, 30, 28, 0.924, 51, 2, '良'],
// [8, 55, 48, 74, 1.236, 75, 26, '良'],
// [9, 76, 85, 113, 1.237, 114, 27, '良'],
// [10, 91, 81, 104, 1.041, 56, 40, '良'],
// [11, 84, 39, 60, 0.964, 25, 11, '良'],
// [12, 64, 51, 101, 0.862, 58, 23, '良'],
// [13, 70, 69, 120, 1.198, 65, 36, '良'],
// [14, 77, 105, 178, 2.549, 64, 16, '良'],
// [15, 109, 68, 87, 0.996, 74, 29, '轻度污染'],
// [16, 73, 68, 97, 0.905, 51, 34, '良'],
// [17, 54, 27, 47, 0.592, 53, 12, '良'],
// [18, 51, 61, 97, 0.811, 65, 19, '良'],
// [19, 91, 71, 121, 1.374, 43, 18, '良'],
// [20, 73, 102, 182, 2.787, 44, 19, '良'],
// [21, 73, 50, 76, 0.717, 31, 20, '良'],
// [22, 84, 94, 140, 2.238, 68, 18, '良'],
// [23, 93, 77, 104, 1.165, 53, 7, '良'],
// [24, 99, 130, 227, 3.97, 55, 15, '良'],
// [25, 146, 84, 139, 1.094, 40, 17, '轻度污染'],
// [26, 113, 108, 137, 1.481, 48, 15, '轻度污染'],
// [27, 81, 48, 62, 1.619, 26, 3, '良'],
// [28, 56, 48, 68, 1.336, 37, 9, '良'],
// [29, 82, 92, 174, 3.29, 0, 13, '良'],
// [30, 106, 116, 188, 3.628, 101, 16, '轻度污染'],
// [31, 118, 50, 0, 1.383, 76, 11, '轻度污染']
];
const dataSH = [
[1, 91, 45, 125, 0.82, 34, 23, '良'],
[2, 65, 27, 78, 0.86, 45, 29, '良'],
[3, 83, 60, 84, 1.09, 73, 27, '良'],
[4, 109, 81, 121, 1.28, 68, 51, '轻度污染'],
[5, 106, 77, 114, 1.07, 55, 51, '轻度污染'],
// [6, 109, 81, 121, 1.28, 68, 51, '轻度污染'],
// [7, 106, 77, 114, 1.07, 55, 51, '轻度污染'],
// [8, 89, 65, 78, 0.86, 51, 26, '良'],
// [9, 53, 33, 47, 0.64, 50, 17, '良'],
// [10, 80, 55, 80, 1.01, 75, 24, '良'],
// [11, 117, 81, 124, 1.03, 45, 24, '轻度污染'],
// [12, 99, 71, 142, 1.1, 62, 42, '良'],
// [13, 95, 69, 130, 1.28, 74, 50, '良'],
// [14, 116, 87, 131, 1.47, 84, 40, '轻度污染'],
// [15, 108, 80, 121, 1.3, 85, 37, '轻度污染'],
// [16, 134, 83, 167, 1.16, 57, 43, '轻度污染'],
// [17, 79, 43, 107, 1.05, 59, 37, '良'],
// [18, 71, 46, 89, 0.86, 64, 25, '良'],
// [19, 97, 71, 113, 1.17, 88, 31, '良'],
// [20, 84, 57, 91, 0.85, 55, 31, '良'],
// [21, 87, 63, 101, 0.9, 56, 41, '良'],
// [22, 104, 77, 119, 1.09, 73, 48, '轻度污染'],
// [23, 87, 62, 100, 1, 72, 28, '良'],
// [24, 168, 128, 172, 1.49, 97, 56, '中度污染'],
// [25, 65, 45, 51, 0.74, 39, 17, '良'],
// [26, 39, 24, 38, 0.61, 47, 17, '优'],
// [27, 39, 24, 39, 0.59, 50, 19, '优'],
// [28, 93, 68, 96, 1.05, 79, 29, '良'],
// [29, 188, 143, 197, 1.66, 99, 51, '中度污染'],
// [30, 174, 131, 174, 1.55, 108, 50, '中度污染'],
// [31, 187, 143, 201, 1.39, 89, 53, '中度污染']
];
// const schema = [
// { name: 'date', index: 0, text: '日' },
// { name: 'AQIindex', index: 1, text: 'AQI指数' },
// { name: 'PM25', index: 2, text: 'PM2.5' },
// { name: 'PM10', index: 3, text: 'PM10' },
// { name: 'CO', index: 4, text: '一氧化碳CO' },
// { name: 'NO2', index: 5, text: '二氧化氮NO2' },
// { name: 'SO2', index: 6, text: '二氧化硫SO2' }
// ];
const itemStyle = {
opacity: 0.8,
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowColor: 'rgba(0,0,0,0.3)'
};
export default function createOpt() {
return {
grid: {
top: "16px",
left: "16px",
right: "16px",
bottom: "16px",
containLabel: true,
},
tooltip: {
backgroundColor: "#08182F",
color: "#fff",
borderColor: "#3373CC",
textStyle: {
color: "#fff", //设置文字颜色
},
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
formatter: function(param) {
let value = param.value;
return `<span>${value[value.length - 1]}</span><br><span>${value[0]}</span>`
}
},
xAxis: {
show: false,
type: 'value',
splitLine: {
lineStyle: {
type: 'dashed'
}
}
},
yAxis: {
show: false,
type: 'value',
splitLine: {
lineStyle: {
type: 'dashed'
}
},
scale: true
},
series: [{
name: '北京',
data: dataBJ,
type: 'scatter',
symbolSize: function (data) {
return data[2]
},
label: {
show: true,
color: "#FFF",
formatter: function (param) {
return param.data[param.data.length - 1];
},
},
itemStyle: itemStyle
}, {
name: '上海',
data: dataSH,
type: 'scatter',
symbolSize: function (data) {
return data[2]
},
label: {
show: true,
color: "#FFF",
formatter: function (param) {
return param.data[param.data.length - 1];
},
},
itemStyle: itemStyle
},
{
name: '广州',
data: dataGZ,
type: 'scatter',
symbolSize: function (data) {
return data[2]
},
label: {
show: true,
color: "#FFF",
formatter: function (param) {
return param.data[param.data.length - 1];
},
},
itemStyle: itemStyle
}
]
}
}

@ -0,0 +1,194 @@
<!--
* @Author: your name
* @Date: 2021-11-05 13:18:12
* @LastEditTime: 2021-12-16 10:25:16
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandComparison/brandCompateHeader/index.vue
-->
<template>
<div class="bc-d1">
<v-label-div title="品牌对比">
<div>
<v-btn @click="reCompare"></v-btn>
<v-btn style="margin-left: 1rem" @click="goback"></v-btn>
</div>
</v-label-div>
<div class="bc-d1-inner">
<template v-for="(item,index) in brands">
<div class="bc-d1-item" :key="index">
<div class="d1-item" :style="index === 0 ? 'margin-left: 16px' : ''">
<span class="s2"><span style="margin-right:8px;margin-top:3px">主题{{index+1}}</span></span>
<span class="s3" @click="handlerDel(index)" v-if="item.isDel"></span>
<div class="s4">
{{item.name}}
</div>
</div>
<img v-if="index != brands.length -1" src="../../../assets/images/comm/img_vs.png" class="d1-m1">
</div>
</template>
</div>
</div>
</template>
<script>
export default {
name: "brandCompateHeader",
props: {
data: {
type: Array,
default: () => {
return [];
},
},
},
inject: ['reload'],
watch: {
data: {
handler(val) {
if (val.length > 0) {
val.forEach((ele, index) => {
this.brands[index] = Object.assign(
this.brands[index],
ele
);
});
}
},
immediate: true,
},
},
data() {
return {
brandIndex: 0,
brands: [
{
name: "",
isDel: false,
},
{
name: "",
isDel: false,
},
{
name: "",
isDel: false,
},
{
name: "",
isDel: false,
},
{
name: "",
isDel: false,
},
{
name: "",
isDel: false,
},
],
};
},
methods: {
goback() {
this.$router.go(-1);
},
//
openBrand(n) {
this.brandShow = true;
this.brandIndex = n;
},
//
handlerDel(n) {
let row = this.brands[n];
row.name = "";
row.isDel = false;
let filterArr = this.brands.filter((ele) => {
return ele.name;
});
if (filterArr.length === 0) {
this.setTcStatus(false);
}
this.$emit("del", n);
this.$emit("change", filterArr);
},
//
reCompare() {
this.setTcStatus(false);
this.reload()
},
},
};
</script>
<style lang="less" scoped>
.bc-d1 {
width: 100%;
height: 222px;
border: 2px solid #0f2a4d;
.bc-d1-inner {
width: 100%;
height: calc(100% - 48px);
display: flex;
justify-content: flex-start;
align-items: center;
.bc-d1-item {
display: inline-block;
display: flex;
justify-content: flex-start;
}
.d1-m1 {
width: 96px;
height: 102px;
}
.d1-item {
position: relative;
width: 228.5px;
height: 120px;
background: linear-gradient(180deg, #0088C9 0%, #001C43 100%);
border-radius: 4px;
opacity: 0.8;
border: 2px solid #0091FF;
background-repeat: no-repeat;
background-size: 100% 100%;
.s2 {
display: block;
width: 80px;
height: 27px;
display: flex;
opacity: 0.6;
justify-content: space-around;
background-image: url("../../../assets/images/Index/card_status_small.png");
background-repeat: no-repeat;
background-size: cover;
color: rgba(99, 174, 204);
font-size: 12px;
font-weight: bold;
}
.s3 {
display: block;
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: cover;
color: #4390ba;
text-align: center;
line-height: 28px;
font-size: 12px;
font-weight: bold;
cursor: pointer;
}
.s4 {
padding: 12px 16px 20px 16px;
font-size: 14px;
font-family: PingFang-SC-Bold, PingFang-SC;
color: #FFFFFF
}
}
}
}
</style>

@ -0,0 +1,125 @@
<!--
* @Author: your name
* @Date: 2021-10-15 15:58:57
* @LastEditTime: 2021-11-16 11:01:43
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandComparison/brandCommunicationTOPMedia/index.vue
-->
<template>
<div class="bcm-outter" v-loading="load">
<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>
<div class="dd1">
<vue-scroll>
<v-ranking-bcm v-for="(it, n) in item.value" :key="n" :label="it.key" :num="it.num" :val="it.value"></v-ranking-bcm>
</vue-scroll>
</div>
</div>
</div>
</div>
</template>
<script>
import { getSourceTopCount0528C } from "@/api/ThemeComparison";
import vRankingBcm from "./v-ranking-bcm";
export default {
name: "brandCommunicationTOPMedia",
components: {
vRankingBcm,
},
data() {
return {
colors: [
"#3373CC",
"#63AECC",
"#54BF93",
"#CC9D12",
"#CC7733",
"#CC5B41",
],
load: false,
form: {
token: "",
sGuid: "",
sTimeType: 3
},
arrList: [],
};
},
created() {
this.initData();
},
methods: {
initData() {
this.form.token = this.getToken;
let arr = this.getTComparison;
let sGuid = [];
arr.forEach((ele) => {
sGuid.push(ele.guids);
});
this.form.sGuid = sGuid.toString();
this.getData();
},
getData() {
return new Promise((resolve, reject) => {
let obj = Object.assign({}, this.getCtime2, this.form);
this.load = true;
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;
this.load = false;
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: center;
.bcm-item {
width: 282px;
height: 100%;
margin-left: 27px;
.ss1 {
display: block;
font-size: 18px;
color: #fff;
font-weight: 500;
padding-top: 14px;
}
.dd1 {
height: calc(100% - 44px);
}
}
}
}
</style>

@ -0,0 +1,232 @@
<!--
* @Author: your name
* @Date: 2021-10-08 16:44:08
* @LastEditTime: 2021-11-12 16:14:56
* @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: #9ba4af;
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-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-loading="load">
<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/ThemeComparison";
import roundata from "./roundata";
export default {
name: "brandTonalDistribution",
components: {
roundata,
},
data() {
return {
form: {
token: "",
sGuid: "",
sTimeType: 3
},
load: false,
colors: ['#3373CC', '#63AECC', '#54BF93', '#CC9D12', '#CC7733', '#CC5B41'],
list: [
]
};
},
created() {
this.initData();
},
methods: {
initData() {
this.form.token = this.getToken;
let arr = this.getTComparison;
let sGuid = [];
arr.forEach((ele) => {
sGuid.push(ele.guids);
});
this.form.sGuid = sGuid.toString();
this.getData();
},
//
getData() {
return new Promise((resolve, reject) => {
let obj = Object.assign({}, this.getCtime2, this.form);
this.load = true;
getAffectionsC(obj).then((res) => {
let data = res.data || [];
this.list = data;
this.load = false;
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);
margin-left: -24px;
display: flex;
justify-content: center;
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,89 @@
/*
* @Author: your name
* @Date: 2021-10-12 14:33:51
* @LastEditTime: 2021-10-15 14:49:19
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandInsight/weiboKol/opt.js
*/
import * as echarts from "echarts";
function createData(obj = {}) {
if(JSON.stringify(obj) === '{}') {
return;
}
let arr = [];
for(let key in obj) {
let color = "";
if(key === '正面') {
color = "#3373CC"
} else if(key === '负面') {
color = "#b38b14"
} else {
color = "#54BF93"
}
let o = {
value: obj[key],
name: key,
itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数给第一个设置1第四个设置0 ,就是水平渐变
//给第一个设置0第四个设置1就是垂直渐变
offset: 0,
color: color
}, {
offset: 1,
color: color
}])}
}
arr.push(o)
}
return arr
}
export default function createOpt(obj = {}) {
let data = createData(obj)
return {
series: [
{
name: 'Access From0',
type: 'pie',
radius: ['70%', '92%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center',
lineHeight: 28
},
emphasis: {
label: {
show: true,
fontSize: '18',
color: "#ffff",
fontWeight: 'bold',
formatter: function(p) {
return `${p.data.name}\n${p.percent}%\n${p.data.value}`
}
}
},
labelLine: {
show: false
},
data: data
},
{
name: 'Access From1',
type: 'pie',
radius: ['96%', '100%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
labelLine: {
show: false
},
center: ['50%', '50%'],//边框位置
data: data
}
]
}
}

@ -0,0 +1,149 @@
<!--
* @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-loading="load">
<v-label-div
title="用户区域分布"
:showLine="false"
:eStyle="{ 'border-style': 'none' }"
>
<v-tab-group :btns="this.brandArr" @change="handlerTab"></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/ThemeComparisonWeibo";
import createOptD1 from "./opt1";
import createOptD2 from "./opt2";
export default {
name: "userAreaDistribution",
data() {
return {
opt1: {},
opt2: {},
form: {
token: "",
sGuid: "",
sTimeType: 3
},
load:false,
dataSource: [],
brandArr: [],
};
},
created() {
this.initData();
},
methods: {
initData() {
this.form.token = this.getToken;
let arr = this.getTComparison;
let sGuid = [];
arr.forEach((ele) => {
sGuid.push(ele.guids);
});
this.form.sGuid = sGuid.toString();
Promise.all([this.getData()]).then(() => {
//
this.handlerTab(0);
});
},
getData() {
return new Promise((resolve, reject) => {
let obj = Object.assign({}, this.form);
this.load = true;
getRegionWeiBoC(obj)
.then((res) => {
let data = res.data || [];
//dx ds dm
let mapArr = [];
let brandList = [];
data.forEach((ele) => {
let dx = [];
let ds = [];
let dm = this.toArr(ele.Data);
dm.forEach((e) => {
//
e.name = e.name.replace('省', '');
dx.push(e.name);
ds.push(e.value);
});
let o = {
name: ele.Name,
dx: dx,
ds: ds,
dm: dm,
//opt1: createOptD1(),
//opt2: createOptD2(),
//tapIndex: 0
};
brandList.push(ele.Name);
mapArr.push(o);
});
this.dataSource = mapArr;
this.brandArr = brandList;
this.load = false;
resolve(data);
})
.catch(() => {
reject(false);
});
});
},
//
toArr(obj) {
let arr = [];
for (let key in obj) {
let o = {
name: key,
value: obj[key] * 1,
};
arr.push(o);
}
return arr;
},
//
handlerTab(n) {
this.opt1 = createOptD1(this.dataSource[n].dx, this.dataSource[n].ds);
this.opt2 = createOptD2(this.dataSource[n].dm);
},
},
};
</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: 579px;
height: 100%;
}
.d2 {
width: 465px;
height: 100%;
margin-left: 16px;
}
}
}
</style>

@ -0,0 +1,83 @@
/*
* @Author: your name
* @Date: 2021-10-09 12:38:34
* @LastEditTime: 2021-11-12 16:35:31
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/Index/tailInsight/opt.js
*/
import * as echarts from "echarts";
import { bigNumberTransform } from "@/utils/gol/dataTool"
export default function createOptD1(dx = [],ds = []) {
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",
},
},
axisLabel: {
formatter: (value) => {
let str = bigNumberTransform(value);
return str;
}
},
splitLine: {
lineStyle: {
type: "dashed", // y轴分割线类型
color: "#012b4b",
},
},
},
yAxis: {
type: 'category',
data: dx,
axisTick: {
show: false,
},
axisLine: {
show: false,
lineStyle: {
color: "#fff",
},
},
inverse: true
},
series: [
{
name: '2011',
type: 'bar',
barWidth: 16,
data: ds,
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: '#2f68b466'
}, {
offset: 1,
color: '#2f68b4'
}]),
}
]
}
}

@ -0,0 +1,102 @@
/*
* @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(dm = []) {
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: dm
}
]
}
}

@ -0,0 +1,90 @@
<!--
* @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-loading="load">
<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/ThemeComparisonWeibo";
import createOpt from "./opt";
export default {
name: "weiboBigVComparison",
data() {
return {
load: false,
form: {
token: "",
sGuid: "",
sTimeType: 3
},
opt: {}
};
},
created() {
this.initData();
},
methods: {
initData() {
this.form.token = this.getToken;
let arr = this.getTComparison;
let sGuid = [];
arr.forEach((ele) => {
sGuid.push(ele.guids);
});
this.form.sGuid = sGuid.toString();
this.getData();
},
getData() {
return new Promise((resolve, reject) => {
let obj = Object.assign({}, this.getCtime2, this.form);
this.load = true;
getBoauthen0528C(obj)
.then((res) => {
let data = res.data || [];
let dx = [];
data.forEach((ele) => {
let ab = ele.value || [];
// dx
ab.forEach((e) => {
if (!dx.includes(e.key) && e.value != 0) {
dx.push(e.key);
}
});
});
this.opt = createOpt(dx,data);
this.load = false;
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,163 @@
/*
* @Author: your name
* @Date: 2021-10-09 11:01:19
* @LastEditTime: 2021-11-18 11:36:55
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/Index/spreadTheSound/opt.js
*/
import * as echarts from "echarts";
let colors = [new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#3373CC'
},
{
offset: 1,
color: '#3373CC66'
}
], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#63AECC'
},
{
offset: 1,
color: '#63AECC66'
}
], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#54BF93'
},
{
offset: 1,
color: '#54BF9366'
}
], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#CC9D12'
},
{
offset: 1,
color: '#CC9D1266'
}
], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#CC7733'
},
{
offset: 1,
color: '#CC773366'
}
], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#CC5B41'
},
{
offset: 1,
color: '#CC5B4166'
}
], false)]
function createData(dataList = [], dx = []) {
let arr = [];
dataList.forEach(ele => {
let a = [];
let Data = ele.value || [];
dx.forEach(e => {
Data.forEach(ex => {
if (ex.key === e) {
a.push(ex.value)
}
})
})
let o = {
name: ele.key,
type: 'bar',
stack: 'total',
barWidth: 24,
emphasis: {
focus: 'series'
},
data: a
};
arr.push(o);
})
return arr;
}
export default function createOpt(dx = [], dataList = []) {
let info = createData(dataList, dx);
return {
grid: {
left: 10,
right: '5%',
bottom: 10,
top: 52,
containLabel: true
},
tooltip: {
trigger: "axis",
backgroundColor: "#08182F",
color: "#fff",
borderColor: "#3373CC",
textStyle: {
color: "#fff", //设置文字颜色
},
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
},
color: colors,
legend: {
textStyle: { //图例文字的样式
color: '#fff',
fontSize: 10
},
y: 10,
x: 16,
itemWidth: 12,
itemHeight: 12
},
xAxis: {
type: 'category',
axisTick: {
show: false,
},
axisLabel: {
interval: 0,
with: 1 / dx.length * 100 + '%',
overflow: 'truncate',
ellipsis: '...'
},
axisLine: {
show: false,
lineStyle: {
color: "#fff",
},
},
data: dx
},
yAxis: {
type: 'value',
axisLine: {
show: false,
lineStyle: {
color: "#fff",
},
},
splitLine: {
lineStyle: {
type: "dashed", // y轴分割线类型
color: "#012b4b",
},
},
},
series: info
}
}

@ -0,0 +1,143 @@
<!--
* @Author: your name
* @Date: 2021-10-15 15:58:57
* @LastEditTime: 2021-11-16 11:26:29
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandComparison/brandCommunicationTOPMedia/index.vue
-->
<template>
<div class="bcm-outter" v-loading="load">
<v-label-div title="微博内容方向对比" :showLine="false" :eStyle="{ 'border-style': 'none' }">
</v-label-div>
<div class="bcm-inner">
<div class="bcm-item" v-for="(item, index) in sourceData" :key="index">
<span class="ss1" :style="{ color: colors[index] }">{{
item.key
}}</span>
<div class="dd1">
<vue-scroll>
<v-ranking-bcm v-for="(it, n) in item.value" :key="n" :label="it.key" :num="it.num" :val="it.value"></v-ranking-bcm>
</vue-scroll>
</div>
</div>
</div>
</div>
</template>
<script>
import { getDirect0528C } from "@/api/ThemeComparisonWeibo";
import vRankingBcm from "./v-ranking-bcm";
export default {
name: "weiboContentDirectionComparison",
components: {
vRankingBcm,
},
data() {
return {
colors: [
"#3373CC",
"#63AECC",
"#54BF93",
"#CC9D12",
"#CC7733",
"#CC5B41",
],
form: {
token: "",
sGuid: "",
sTimeType: 3
},
load: false,
sourceData: [],
};
},
created() {
this.initData();
},
methods: {
initData() {
this.form.token = this.getToken;
let arr = this.getTComparison;
let sGuid = [];
arr.forEach((ele) => {
sGuid.push(ele.guids);
});
this.form.sGuid = sGuid.toString();
this.getData();
},
getData() {
return new Promise((resolve, reject) => {
let obj = Object.assign({}, this.getCtime2, this.form);
this.load = true;
getDirect0528C(obj)
.then((res) => {
let data = res.data || [];
let showData = [];
data.forEach((e) => {
//5obj
let sortedArr = e.Data;
sortedArr.sort(this.compare("value"));
let obj = {
key: e.Name,
value: sortedArr,
};
showData.push(obj);
});
showData.forEach((ele) => {
//
for (
let index = 0;
index < ele.value.length;
index++
) {
ele.value[index].num = index + 1;
}
});
this.sourceData = showData;
this.load = false;
resolve(data);
})
.catch(() => {
reject(false);
});
});
},
// v2-v1v1-v2
compare(property) {
return function (a, b) {
let value1 = a[property];
let value2 = b[property];
return value2 - value1;
};
},
},
};
</script>
<style lang="less" scoped>
.bcm-outter {
width: 100%;
height: 460px;
margin-top: 16px;
.bcm-inner {
width: 100%;
height: calc(100% - 48px);
display: flex;
justify-content: center;
.bcm-item {
width: 282px;
margin-left: 27px;
.ss1 {
display: block;
font-size: 18px;
color: #fff;
font-weight: 500;
padding-top: 14px;
}
.dd1 {
height: calc(100% - 44px);
}
}
}
}
</style>

@ -0,0 +1,232 @@
<!--
* @Author: your name
* @Date: 2021-10-08 16:44:08
* @LastEditTime: 2021-11-12 16:15:53
* @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: #9ba4af;
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,136 @@
<!--
* @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-loading="load">
<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/ThemeComparisonWeibo";
import wbRoundata from "./wbRoundata";
export default {
name: "weiboTuneComparison",
data() {
return {
form: {
token: "",
sGuid: "",
sTimeType: 3
},
load: false,
colors: ["#3373CC","#63AECC","#54BF93","#CC9D12","#CC7733","#CC5B41"],
dataSource: []
};
},
components: {
wbRoundata,
},
created() {
this.initData();
},
methods: {
initData() {
this.form.token = this.getToken;
let arr = this.getTComparison;
let sGuid = [];
arr.forEach((ele) => {
sGuid.push(ele.guids);
});
this.form.sGuid = sGuid.toString();
this.getData();
},
getData() {
return new Promise((resolve, reject) => {
let obj = Object.assign({}, this.getCtime2, this.form);
this.load = true;
getAffectionsC(obj)
.then((res) => {
let data = res.data || [];
this.dataSource = data;
this.load = false;
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);
margin-left: -24px;
display: flex;
justify-content: center;
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,90 @@
/*
* @Author: your name
* @Date: 2021-10-12 14:33:51
* @LastEditTime: 2021-10-15 14:49:19
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandInsight/weiboKol/opt.js
*/
import * as echarts from "echarts";
function createData(obj = {}) {
if (JSON.stringify(obj) === '{}') {
return;
}
let arr = [];
for (let key in obj) {
let color = "";
if (key === '正面') {
color = "#3373CC"
} else if (key === '负面') {
color = "#b38b14"
} else {
color = "#54BF93"
}
let o = {
value: obj[key],
name: key,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数给第一个设置1第四个设置0 ,就是水平渐变
//给第一个设置0第四个设置1就是垂直渐变
offset: 0,
color: color
}, {
offset: 1,
color: color
}])
}
}
arr.push(o)
}
return arr
}
export default function createOpt(obj={}) {
let data = createData(obj);
return {
series: [
{
name: 'Access From0',
type: 'pie',
radius: ['70%', '92%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center',
lineHeight: 28
},
emphasis: {
label: {
show: true,
fontSize: '18',
color: "#ffff",
fontWeight: 'bold',
formatter: function (p) {
return `${p.data.name}\n${p.percent}%\n${p.data.value}`
}
}
},
labelLine: {
show: false
},
data: data
},
{
name: 'Access From1',
type: 'pie',
radius: ['96%', '100%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
labelLine: {
show: false
},
center: ['50%', '50%'],//边框位置
data: data
}
]
}
}

@ -0,0 +1,200 @@
<!--
* @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-loading="load">
<v-label-div
title="微博用户画像"
:showLine="false"
:eStyle="{ 'border-style': 'none' }"
>
<v-tab-group
:btns="this.brandArr"
@change="handlerTab"
></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 v-for="(item,index) in showSexData "
:key="index"
:label="item.key"
:cont="item.value"
:percentage="((item.value / totalSexData) * 100).toFixed(2) + '%'"
:color="colors[index]"
:eStyle="{ height: '7.35rem' }"
></v-label-ctx>
</div>
</div>
<div class="d1">
<div class="dd1">
<v-echarts :opt="opt2"></v-echarts>
</div>
<div class="dd2" style="margin-right: 16px">
<v-label-ctx v-for="(item,index) in showAttestData "
:key="index"
:label="item.key"
:cont="item.value"
:percentage="((item.value / totalAttestData) * 100).toFixed(2) + '%'"
:color="colors[index]"
:eStyle="{ height: '7.35rem' }"
></v-label-ctx>
</div>
</div>
</div>
</div>
</template>
<script>
import { getSexMergeWeiBoC } from "@/api/ThemeComparisonWeibo";
import createOpt1 from "./opt1";
import createOpt2 from "./opt2";
export default {
name: "weiboUserPortrait",
data() {
return {
form: {
token: "",
sGuid: "",
sTimeType: 3
},
load: false,
opt1: {},
opt2: {},
sourceData: [],
showSexData: [],
totalSexData: 0,
totalAttestData: 0,
showAttestData: [],
brandArr: [],
colors: [
"#54BF93",
"#3373CC",
"#CC9D12",
"#f15c80",
"#e4d354",
"#8085e8",
"#8d4653",
"#91e8e1",
"#f7a35c",
"#90ed7d",
"#54BF93",
"#3373CC",
"#CC9D12",
"#f15c80",
"#e4d354",
"#8085e8",
"#8d4653",
"#91e8e1",
"#f7a35c",
"#90ed7d",
],
};
},
created() {
this.initData();
},
methods: {
initData() {
this.form.token = this.getToken;
let arr = this.getTComparison;
let sGuid = [];
arr.forEach((ele) => {
sGuid.push(ele.guids);
});
this.form.sGuid = sGuid.toString();
this.getData();
},
getData() {
return new Promise((resolve, reject) => {
let obj = Object.assign({}, this.getCtime2, this.form);
this.load = true;
getSexMergeWeiBoC(obj)
.then((res) => {
let data = res.data;
let brandList = [];
let dataArr = []; //createOpt
data.forEach( e => {
let o = {
name: e.Name,
sexData: this.toArr(e.Data.sex), // type=arr
attestData: this.toArr(e.Data.attestation) // type=arr
}
brandList.push(e.Name); //
dataArr.push(o);
})
this.brandArr = brandList;
this.sourceData = dataArr;
this.doVal(0);
this.load = false;
resolve(data);
})
.catch(() => {
reject(false);
});
});
},
//
toArr(obj) {
let arr = [];
for (let key in obj) {
let o = {
key: key,
value: obj[key],
};
arr.push(o);
}
return arr;
},
//
doVal(index) {
this.showSexData = this.sourceData[index].sexData;
this.showAttestData = this.sourceData[index].attestData;
this.totalSexData = this.showSexData[0].value*1 + this.showSexData[1].value*1 + this.showSexData[2].value*1;
this.totalAttestData = this.showAttestData[0].value*1+this.showAttestData[1].value*1+this.showAttestData[2].value*1;
this.opt1 = createOpt1(this.showSexData, this.colors);
this.opt2 = createOpt2(this.showAttestData, this.colors);
},
//
handlerTab(n) {
this.doVal(n)
},
},
};
</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>

@ -0,0 +1,75 @@
/*
* @Author: your name
* @Date: 2021-10-12 15:14:58
* @LastEditTime: 2021-10-14 10:43:47
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandInsight/weiboPortraits/opt.js
*/
function createData(ds = [], colors) {
let arr = [];
ds.map((ele, index) => {
let obj = {
value: ele.value,
name: ele.key,
itemStyle: {
color: colors[index]
}
}
arr.push(obj)
})
return arr;
}
import * as echarts from "echarts";
export default function createOpt1(ds = [], color = []) {
const data = createData(ds, color);
return {
series: [
{
name: 'Access From0',
type: 'pie',
radius: ['63%', '77%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center',
lineHeight: 28,
color: "#ffff"
},
emphasis: {
label: {
show: true,
fontSize: '20',
color: "#ffff",
fontWeight: 'bold',
formatter: function (p) {
return `${p.data.name}\n${p.percent}%\n${p.data.value}`
}
}
},
labelLine: {
show: false
},
data: data,
},
{
name: 'Access From1',
type: 'pie',
radius: ['80%', '84%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
labelLine: {
show: false
},
center: ['50%', '50%'],//边框位置
data: data,
}
]
}
}

@ -0,0 +1,75 @@
/*
* @Author: your name
* @Date: 2021-10-12 15:14:58
* @LastEditTime: 2021-10-16 11:53:25
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandInsight/weiboPortraits/opt.js
*/
function createData(ds = [], colors) {
let arr = [];
ds.map((ele, index) => {
let obj = {
value: ele.value,
name: ele.key,
itemStyle: {
color: colors[index]
}
}
arr.push(obj)
})
return arr;
}
import * as echarts from "echarts";
export default function createOpt2(ds = [], color = []) {
const data = createData(ds, color);
return {
series: [
{
name: 'Access From0',
type: 'pie',
radius: ['63%', '77%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center',
lineHeight: 28,
color: "#ffff",
},
emphasis: {
label: {
show: true,
fontSize: '20',
color: "#ffff",
fontWeight: 'bold',
formatter: function (p) {
return `${p.data.name}\n${p.percent}%\n${p.data.value}`
}
}
},
labelLine: {
show: false
},
data: data,
},
{
name: 'Access From1',
type: 'pie',
radius: ['80%', '84%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
labelLine: {
show: false
},
center: ['50%', '50%'],//边框位置
data: data,
}
]
}
}
Loading…
Cancel
Save