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

zx-品牌对比-至微博内容方向对比

Browse Source
prod
张雄 3 years ago
parent d9966f538b
commit 7c84faf457
20 changed files with 1255 additions and 1019 deletions

79
src/api/BrandComparison/BrandWeibo.js
Unescape View File

@ -0,0 +1,79 @@
import httpService from "@/request"
// 品牌对比-微博信息量对比
export function getContrastCount0528C(params) {
let obj = Object.assign({action: 'getContrastCount0528C', sType: 'BrandWeiBo', iContrastType: 1}, 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: 1}, 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: 1}, 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: 1}, 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: 1}, 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: 1}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}

27
src/api/BrandComparison/HotEvent.js
Unescape View File

@ -0,0 +1,27 @@
import httpService from "@/request"
// 品牌对比-品牌事件对比
export function getSourcetypeC(params) {
let obj = Object.assign({action: 'getSourcetypeC', sType: 'HotEvent0528', iContrastType: 1}, 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: 'HotEvent0528', iContrastType: 1}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}

42
src/api/BrandComparison/index.js
Unescape View File

@ -54,7 +54,7 @@ export function getInteractCount0528C(params) {
// 品牌对比-渠道分布 // 品牌对比-渠道分布
export function getSourcetypeC(params) { export function getSourcetypeC(params) {
let obj = Object.assign({action: 'getSourcetypeC', sType: 'BrandOverview', iContrastType: 1}, params) let obj = Object.assign({action: 'getSourcetypeC', iContrastType: 1}, params)
return httpService({ return httpService({
url: `/api/v6.ashx`, url: `/api/v6.ashx`,
method: 'post', method: 'post',
@ -64,3 +64,43 @@ export function getSourcetypeC(params) {
} }
}) })
} }
// 品牌对比-重点媒体传播对比
export function getSourceCount0528C(params) {
let obj = Object.assign({action: 'getSourceCount0528C', sType: 'BrandOverview', iContrastType: 1}, 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: 1}, 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: 1}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}

1
src/mixins/index.js
Unescape View File

@ -9,7 +9,6 @@
import { mapGetters, mapActions } from "vuex"; import { mapGetters, mapActions } from "vuex";
import Loading from './loading' import Loading from './loading'
function detectZoom (){ function detectZoom (){
console.log(2222)
let ratio = 0, let ratio = 0,
screen = window.screen, screen = window.screen,
ua = navigator.userAgent.toLowerCase(); ua = navigator.userAgent.toLowerCase();

28
src/utils/gol/bubbleWord.js
Unescape View File

@ -6,12 +6,12 @@
* @Description: In User Settings Edit * @Description: In User Settings Edit
* @FilePath: /data-show/src/utils/gol/bubbleWord.js * @FilePath: /data-show/src/utils/gol/bubbleWord.js
*/ */
import {compare} from "./dataTool" import { compare } from "./dataTool"
// 将后台数据转成数组 // 将后台数据转成数组
function doWordCloud(data) { function doWordCloud(data) {
let arr1 = []; let arr1 = [];
for (let key in data) { for (let key in data) {
let obj = { name: key, value: data[key] }; let obj = { key: key, value: data[key] };
arr1.push(obj); arr1.push(obj);
} }
return arr1; return arr1;
@ -93,9 +93,14 @@ function bubbleChart(data = [], format = []) {
// 创建词云图 // 创建词云图
export default function createWordCloud(obj) { export default function createWordCloud(obj) {
let words = doWordCloud(obj); let bubble = null;
words.sort(compare('value')); if (Array.isArray(obj)) {
let bubble = bubbleChart(words, ['name', 'value']); bubble = bubbleChart(obj, ['key', 'value']);
} else {
let words = doWordCloud(obj);
words.sort(compare('value'));
bubble = bubbleChart(words, ['key', 'value']);
}
return { return {
animationEasingUpdate: 'bounceIn', animationEasingUpdate: 'bounceIn',
tooltip: { tooltip: {
@ -106,8 +111,9 @@ export default function createWordCloud(obj) {
color: "#fff", //设置文字颜色 color: "#fff", //设置文字颜色
}, },
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;", extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
formatter: function(param) { formatter: function (param) {
let data = param.data; let data = param.data;
console.log(data)
return `<span>${data.name}</span><br><span>${data.value}</span>` return `<span>${data.name}</span><br><span>${data.value}</span>`
} }
}, },
@ -115,13 +121,13 @@ export default function createWordCloud(obj) {
type: 'graph', type: 'graph',
layout: 'force', layout: 'force',
label: { label: {
show:true, show: true,
color:"#FFF", color: "#FFF",
fontSize:12, fontSize: 12,
}, },
force: { force: {
gravity:0.2, gravity: 0.2,
repulsion: bubble.repulsion, repulsion: bubble.repulsion,
edgeLength: 10 edgeLength: 10
}, },

308
src/views/BrandComparison/brandCommunicationTOPMedia/index.vue
Unescape View File

@ -7,236 +7,108 @@
* @FilePath: /data-show/src/views/BrandComparison/brandCommunicationTOPMedia/index.vue * @FilePath: /data-show/src/views/BrandComparison/brandCommunicationTOPMedia/index.vue
--> -->
<template> <template>
<div class="bcm-outter"> <div class="bcm-outter">
<v-label-div title="品牌传播TOP媒体"> <v-label-div title="品牌传播TOP媒体"> </v-label-div>
</v-label-div> <div class="bcm-inner">
<div class="bcm-inner"> <div class="bcm-item" v-for="(item, index) in arrList" :key="index">
<div class="bcm-item" v-for="(item,index) in list" :key="index"> <span class="ss1" :style="{ color: colors[index] }">{{
<span class="ss1" :style="{color: colors[index]}">{{item.name}}</span> item.key
<v-ranking-bcm v-for="(it,n) in item.medias" :key="n" :label="it.label" :num="it.num" :val="it.val"></v-ranking-bcm> }}</span>
</div> <v-ranking-bcm
</div> v-for="(it, n) in item.value"
:key="n"
:label="it.key"
:num="it.num"
:val="it.value"
></v-ranking-bcm>
</div>
</div> </div>
</div>
</template> </template>
<script> <script>
import vRankingBcm from "./v-ranking-bcm" import { getSourceTopCount0528C } from "@/api/BrandComparison";
import vRankingBcm from "./v-ranking-bcm";
export default { export default {
name: "brandCommunicationTOPMedia", name: "brandCommunicationTOPMedia",
components: { components: {
vRankingBcm 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();
}, },
data() { getData() {
return { return new Promise((resolve, reject) => {
colors: ['#3373CC', '#63AECC', '#54BF93', '#CC9D12', '#CC7733', '#CC5B41'], let obj = Object.assign({}, this.getCtime2, this.form);
list: [ getSourceTopCount0528C(obj)
{ .then((res) => {
name: '奥迪', let data = res.data || [];
medias: [ data.forEach(ele => {
{ for(let index = 0 ; index<ele.value.length;index++){
num: 1, ele.value[index].num = index + 1;
label: '微博',
val: 1000
},
{
num: 2,
label: '字节跳动',
val: 800
},
{
num: 3,
label: '搜狐汽车',
val: 600
},
{
num: 4,
label: '汽车之家',
val: 400
},
{
num: 5,
label: '企鹅网',
val: 300
}
]
},
{
name: '宝马',
medias: [
{
num: 1,
label: '微博',
val: 1000
},
{
num: 2,
label: '字节跳动',
val: 800
},
{
num: 3,
label: '搜狐汽车',
val: 600
},
{
num: 4,
label: '汽车之家',
val: 400
},
{
num: 5,
label: '企鹅网',
val: 300
}
]
},
{
name: '奔驰',
medias: [
{
num: 1,
label: '微博',
val: 1000
},
{
num: 2,
label: '字节跳动',
val: 800
},
{
num: 3,
label: '搜狐汽车',
val: 600
},
{
num: 4,
label: '汽车之家',
val: 400
},
{
num: 5,
label: '企鹅网',
val: 300
}
]
},
{
name: '吉利',
medias: [
{
num: 1,
label: '微博',
val: 1000
},
{
num: 2,
label: '字节跳动',
val: 800
},
{
num: 3,
label: '搜狐汽车',
val: 600
},
{
num: 4,
label: '汽车之家',
val: 400
},
{
num: 5,
label: '企鹅网',
val: 300
}
]
},
{
name: '大众',
medias: [
{
num: 1,
label: '微博',
val: 1000
},
{
num: 2,
label: '字节跳动',
val: 800
},
{
num: 3,
label: '搜狐汽车',
val: 600
},
{
num: 4,
label: '汽车之家',
val: 400
},
{
num: 5,
label: '企鹅网',
val: 300
}
]
},
{
name: '别克',
medias: [
{
num: 1,
label: '微博',
val: 1000
},
{
num: 2,
label: '字节跳动',
val: 800
},
{
num: 3,
label: '搜狐汽车',
val: 600
},
{
num: 4,
label: '汽车之家',
val: 400
},
{
num: 5,
label: '企鹅网',
val: 300
}
]
} }
] });
} this.arrList = data;
} resolve(data);
})
.catch(() => {
reject(false);
});
});
},
},
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.bcm-outter { .bcm-outter {
width: 100%;
height: 460px;
border: 2px solid #0f2a4d;
margin-top: 16px;
.bcm-inner {
width: 100%; width: 100%;
height: 460px; height: calc(100% - 48px);
border: 2px solid #0f2a4d; display: flex;
margin-top: 16px; justify-content: flex-start;
.bcm-inner { .bcm-item {
width: 100%; width: 282px;
height: calc(100% - 48px); margin-left: 27px;
display: flex; .ss1 {
justify-content: flex-start; display: block;
.bcm-item { font-size: 18px;
width: 282px; color: #fff;
margin-left: 27px; font-weight: 500;
.ss1 { padding-top: 14px;
display: block; }
font-size: 18px;
color: #fff;
font-weight: 500;
padding-top: 14px;
}
}
} }
}
} }
</style> </style>

245
src/views/BrandComparison/brandEventComparison/index.vue
Unescape View File

@ -7,96 +7,185 @@
* @FilePath: /data-show/src/views/BrandComparison/brandEventComparison/index.vue * @FilePath: /data-show/src/views/BrandComparison/brandEventComparison/index.vue
--> -->
<template> <template>
<div class="bec-outter"> <div class="bec-outter">
<v-label-div title="品牌事件对比"> <v-label-div title="品牌事件对比"> </v-label-div>
</v-label-div> <div class="bec-inner">
<div class="bec-inner"> <v-echarts :opt="opt1"></v-echarts>
<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>
<v-label-div title="事件上榜车型" :showLine="false" :eStyle="{'border-style': 'none'}"> </div>
</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> </div>
</div>
</template> </template>
<script> <script>
import {createSideSingleColumn} from "@/utils/gol/sideSingleColumn" import { getSourcetypeC } from "@/api/BrandComparison/HotEvent.js";
import createOpt from "./opt" import { getContrastCount0528C } from "@/api/BrandComparison/HotEvent.js";
import { createSideSingleColumn } from "@/utils/gol/sideSingleColumn";
import createOpt from "./opt";
export default { export default {
name: "brandEventComparison", name: "brandEventComparison",
data() { data() {
return { return {
opt1: createOpt(), opt1: createOpt(),
colors: ['#3373CC', '#63AECC', '#54BF93', '#CC9D12', '#CC7733', '#CC5B41'], form: {
list: [ token: "",
{ sBrand: "",
name: '奥迪', },
drawOpt: createSideSingleColumn(['A4', 'A3','Q5','A7','A6'], [400, 500, 600, 800, 1000], '#3373CC'), colors: [
}, "#3373CC",
{ "#63AECC",
name: '宝马', "#54BF93",
drawOpt: createSideSingleColumn(['520', '220','S4','525','320'], [400, 500, 600, 800, 1000], '#63AECC'), "#CC9D12",
}, "#CC7733",
{ "#CC5B41",
name: '奔驰', ],
drawOpt: createSideSingleColumn(['GML', '350','S600','SEL','300'], [400, 500, 600, 800, 1000], '#54BF93'), list: [
}, {
{ name: "奥迪",
name: '吉利', drawOpt: createSideSingleColumn(
drawOpt: createSideSingleColumn(['330', '吉利星','星耀','星月','帝豪'], [400, 500, 600, 800, 1000], '#CC9D12'), ["A4", "A3", "Q5", "A7", "A6"],
}, [400, 500, 600, 800, 1000],
{ "#3373CC"
name: '大众', ),
drawOpt: createSideSingleColumn(['途观', '速腾','迈腾','桑塔纳','帕萨特'], [400, 500, 600, 800, 1000], '#CC7733'), },
}, {
{ name: "宝马",
name: '别克', drawOpt: createSideSingleColumn(
drawOpt: createSideSingleColumn(['凯悦', '奥克拉','君悦','君越','君威'], [400, 500, 600, 800, 1000], '#CC5B41'), ["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> </script>
<style lang="less" scoped> <style lang="less" scoped>
.bec-outter { .bec-outter {
width: 100%;
height: auto;
border: 2px solid #0f2a4d;
margin-top: 16px;
.bec-inner {
width: 100%; width: 100%;
height: auto; height: 412px;
border: 2px solid #0f2a4d; }
margin-top: 16px; .bec-one {
.bec-inner { width: 100%;
width: 100%; height: 412px;
height: 412px; display: flex;
} justify-content: flex-start;
.bec-one { .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%; width: 100%;
height: 412px; height: calc(100% - 40px);
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> </style>

93
src/views/BrandComparison/brandEventComparison/opt.js
Unescape View File

@ -6,7 +6,38 @@
* @Description: In User Settings Edit * @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandComparison/channelDistribution/opt.js * @FilePath: /data-show/src/views/BrandComparison/channelDistribution/opt.js
*/ */
export default function createOpt() {
/*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 { return {
grid: { grid: {
top: "56px", top: "56px",
@ -16,7 +47,7 @@ export default function createOpt() {
containLabel: true, containLabel: true,
}, },
legend: { legend: {
data: ['奥迪', '宝马', '奔驰', '吉利', '大众', '别克'], data: brandList,
textStyle: { //图例文字的样式 textStyle: { //图例文字的样式
color: '#fff' color: '#fff'
}, },
@ -65,62 +96,6 @@ export default function createOpt() {
}, },
} }
], ],
series: [ series: info
{
name: '奥迪',
type: 'bar',
barGap: 0,
barWidth: 20,
emphasis: {
focus: 'series'
},
data: [320, 332, 301, 334, 390, 400]
},
{
name: '宝马',
type: 'bar',
barWidth: 20,
emphasis: {
focus: 'series'
},
data: [220, 182, 191, 234, 290, 300]
},
{
name: '奔驰',
type: 'bar',
barWidth: 20,
emphasis: {
focus: 'series'
},
data: [150, 232, 201, 154, 190, 200]
},
{
name: '吉利',
type: 'bar',
barWidth: 20,
emphasis: {
focus: 'series'
},
data: [98, 77, 101, 99, 40, 44]
},
{
name: '大众',
type: 'bar',
barWidth: 20,
emphasis: {
focus: 'series'
},
data: [198, 177, 101, 199, 140, 145]
},
{
name: '别克',
type: 'bar',
barWidth: 20,
emphasis: {
focus: 'series'
},
data: [298, 277, 201, 299, 240, 250]
}
]
} }
} }

4
src/views/BrandComparison/channelDistribution/index.vue
Unescape View File

@ -16,7 +16,7 @@
</template> </template>
<script> <script>
import { getSourcetypeC } from "@/api/BrandComparison"; import { getSourcetypeC } from "@/api/BrandComparison/index.js";
import createOpt from "./opt"; import createOpt from "./opt";
export default { export default {
name: "channelDistribution", name: "channelDistribution",
@ -51,7 +51,7 @@ export default {
let data = res.data || []; let data = res.data || [];
let brandList = []; let brandList = [];
data.forEach(e => { data.forEach(e => {
brandList.push(e.Name); brandList.push(e.Name)
}) })
this.opt = createOpt(data,brandList); this.opt = createOpt(data,brandList);
resolve(data); resolve(data);

82
src/views/BrandComparison/comparisonOfTheNumberOfWeiboInteractions/index.vue
Unescape View File

@ -7,32 +7,76 @@
* @FilePath: /data-show/src/views/BrandComparison/comparisonOfTheNumberOfWeiboInteractions/index.vue * @FilePath: /data-show/src/views/BrandComparison/comparisonOfTheNumberOfWeiboInteractions/index.vue
--> -->
<template> <template>
<div class="cotn-outter"> <div class="cotn-outter">
<v-label-div title="微博互动人数对比" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div> <v-label-div
<div class="cotn-inner"> title="微博互动人数对比"
<v-echarts :opt="opt"></v-echarts> :showLine="false"
</div> :eStyle="{ 'border-style': 'none' }"
></v-label-div>
<div class="cotn-inner">
<v-echarts :opt="opt"></v-echarts>
</div> </div>
</div>
</template> </template>
<script> <script>
import {createSingleColumnar} from "@/utils/gol/singleColumnar" import { getInteractCount0528C } from "@/api/BrandComparison/BrandWeibo.js";
import { createSingleColumnar } from "@/utils/gol/singleColumnar";
export default { export default {
name: "comparisonOfTheNumberOfWeiboInteractions", name: "comparisonOfTheNumberOfWeiboInteractions",
data() { data() {
return { return {
opt: createSingleColumnar(['奥迪', '宝马', '奔驰', '吉利', '大众', '别克'], ['2100','1800','1700','1600','1500','1400'],'#45a380') 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> </script>
<style lang="less" scoped> <style lang="less" scoped>
.cotn-outter { .cotn-outter {
width: 628px; width: 628px;
height: 412px; height: 412px;
.cotn-inner { .cotn-inner {
width: 100%; width: 100%;
height: calc(100% - 48px); height: calc(100% - 48px);
} }
} }
</style> </style>

82
src/views/BrandComparison/comparisonOfWeiboInformation/index.vue
Unescape View File

@ -7,33 +7,77 @@
* @FilePath: /data-show/src/views/BrandComparison/comparisonOfWeiboInformation/index.vue * @FilePath: /data-show/src/views/BrandComparison/comparisonOfWeiboInformation/index.vue
--> -->
<template> <template>
<div class="cowi-outter"> <div class="cowi-outter">
<v-label-div title="微博信息量对比" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div> <v-label-div
<div class="cowi-inner"> title="微博信息量对比"
<v-echarts :opt="opt"></v-echarts> :showLine="false"
</div> :eStyle="{ 'border-style': 'none' }"
></v-label-div>
<div class="cowi-inner">
<v-echarts :opt="opt"></v-echarts>
</div> </div>
</div>
</template> </template>
<script> <script>
import {createSingleColumnar} from "@/utils/gol/singleColumnar" import { getContrastCount0528C } from "@/api/BrandComparison/BrandWeibo.js";
import { createSingleColumnar } from "@/utils/gol/singleColumnar";
export default { export default {
name: "comparisonOfWeiboInformation", name: "comparisonOfWeiboInformation",
data() { data() {
return { return {
opt: createSingleColumnar(['奥迪', '宝马', '奔驰', '吉利', '大众', '别克'], ['2100','1800','1700','1600','1500','1400']) 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> </script>
<style lang="less" scoped> <style lang="less" scoped>
.cowi-outter { .cowi-outter {
width: 628px; width: 628px;
height: 412px; height: 412px;
.cowi-inner { .cowi-inner {
width: 100%; width: 100%;
height: calc(100% - 48px); height: calc(100% - 48px);
} }
} }
</style> </style>

67
src/views/BrandComparison/keyMediaCommunicationComparison/index.vue
Unescape View File

@ -7,36 +7,61 @@
* @FilePath: /data-show/src/views/BrandComparison/keyMediaCommunicationComparison/index.vue * @FilePath: /data-show/src/views/BrandComparison/keyMediaCommunicationComparison/index.vue
--> -->
<template> <template>
<div class="kmcc-outter"> <div class="kmcc-outter">
<v-label-div title="重点媒体传播对比"> <v-label-div title="重点媒体传播对比"> </v-label-div>
</v-label-div> <div class="kmcc-inner">
<div class="kmcc-inner"> <v-echarts :opt="opt"></v-echarts>
<v-echarts :opt="opt"></v-echarts>
</div>
</div> </div>
</div>
</template> </template>
<script> <script>
import createOpt from "./opt" import createOpt from "./opt";
import { getSourceCount0528C } from "@/api/BrandComparison";
export default { export default {
name: "kmcc-outter", name: "kmcc-outter",
data() { data() {
return { return {
opt: createOpt() 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> </script>
<style lang="less" scoped> <style lang="less" scoped>
.kmcc-outter { .kmcc-outter {
width: 936px; width: 936px;
height: 460px; height: 460px;
border: 2px solid #0f2a4d; border: 2px solid #0f2a4d;
margin-left: 16px; margin-left: 16px;
.kmcc-inner { .kmcc-inner {
width: 100%; width: 100%;
height: calc(100% - 48px); height: calc(100% - 48px);
} }
} }
</style> </style>

155
src/views/BrandComparison/overallWordCloudComparison/index.vue
Unescape View File

@ -7,75 +7,124 @@
* @FilePath: /data-show/src/views/BrandComparison/overallWordCloudComparison/index.vue * @FilePath: /data-show/src/views/BrandComparison/overallWordCloudComparison/index.vue
--> -->
<template> <template>
<div class="owcc-outter"> <div class="owcc-outter">
<v-label-div title="整体词云对比"> <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> </v-label-div>
<div class="owcc-inner"> <div class="owcc-draw">
<div class="owcc-item" v-for="(item,index) in list" :key="index"> <v-echarts :opt="item.opt"></v-echarts>
<v-label-div :title="item.name" :titleColor="colors[index]" :showLine="false" :eStyle="{'border-style': 'none'}">
<v-tab-group :btns="['正面', '负面']"></v-tab-group>
</v-label-div>
<div class="owcc-draw">
<v-echarts :opt="opt"></v-echarts>
</div>
</div>
</div> </div>
</div>
</div> </div>
</div>
</template> </template>
<script> <script>
import createOpt from "./opt"; import { getPositiveAndNegative0528C } from "@/api/BrandComparison";
import createWordCloud from "@/utils/gol/bubbleWord";
export default { export default {
name: "overallWordCloudComparison", name: "overallWordCloudComparison",
data() { data() {
return { return {
opt: createOpt(), opt: {},
colors: ['#3373CC', '#63AECC', '#54BF93', '#CC9D12', '#CC7733', '#CC5B41'], form: {
list: [ token: "",
{ sBrand: "",
name: "奥迪", },
}, colors: [
{ "#3373CC",
name: "宝马", "#63AECC",
}, "#54BF93",
{ "#CC9D12",
name: "奔驰", "#CC7733",
}, "#CC5B41",
{ ],
name: "吉利", dataSource: []
}, };
{ },
name: "大众", created() {
}, this.initData();
{ },
name: "别克", 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> </script>
<style lang="less" scoped> <style lang="less" scoped>
.owcc-outter { .owcc-outter {
width: 100%;
height: 460px;
border: 2px solid #0f2a4d;
margin-top: 16px;
.owcc-inner {
width: 100%; width: 100%;
height: 460px; height: calc(100% - 48px);
border: 2px solid #0f2a4d; display: flex;
margin-top: 16px; justify-content: flex-start;
.owcc-inner { .owcc-item {
width: 314px;
height: 412px;
margin-top: 5px;
.owcc-draw {
width: 100%; width: 100%;
height: calc(100% - 48px); 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> </style>

113
src/views/BrandComparison/userAreaDistribution/index.vue
Unescape View File

@ -7,53 +7,92 @@
* @FilePath: /data-show/src/views/WeiboDetails/weiboUserActiveArea/index.vue * @FilePath: /data-show/src/views/WeiboDetails/weiboUserActiveArea/index.vue
--> -->
<template> <template>
<div class="wua-outter"> <div class="wua-outter">
<v-label-div title="用户区域分布" :showLine="false" :eStyle="{'border-style': 'none'}"> <v-label-div
<v-tab-group :btns="['奥迪','宝马','奔驰','吉利','大众','别克']"></v-tab-group> title="用户区域分布"
</v-label-div> :showLine="false"
<div class="wua-inner"> :eStyle="{ 'border-style': 'none' }"
<div class="d1"> >
<v-echarts :opt="opt1"></v-echarts> <v-tab-group
</div> :btns="['奥迪', '宝马', '奔驰', '吉利', '大众', '别克']"
<div class="d2"> ></v-tab-group>
<v-echars-map :opt="opt2"></v-echars-map> </v-label-div>
</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> </div>
</div>
</template> </template>
<script> <script>
import createOptD1 from "./opt1" import { getRegionWeiBoC } from "@/api/BrandComparison/BrandWeibo.js";
import createOptD2 from './opt2' import createOptD1 from "./opt1";
import createOptD2 from "./opt2";
export default { export default {
name: "userAreaDistribution", name: "userAreaDistribution",
data() { data() {
return { return {
opt1: createOptD1(), opt1: createOptD1(),
opt2: createOptD2() 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> </script>
<style lang="less" scoped> <style lang="less" scoped>
.wua-outter { .wua-outter {
width: 944px; width: 944px;
height: 412px; height: 412px;
.wua-inner { .wua-inner {
width: 100%; width: 100%;
height: calc(100% - 48px); height: calc(100% - 48px);
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
.d1 { .d1 {
width: 479px; width: 479px;
height: 100%; height: 100%;
} }
.d2 { .d2 {
width: 465px; width: 465px;
height: 100%; height: 100%;
margin-left: 16px; margin-left: 16px;
}
} }
}
} }
</style> </style>

76
src/views/BrandComparison/weiboBigVComparison/index.vue
Unescape View File

@ -7,32 +7,70 @@
* @FilePath: /data-show/src/views/BrandComparison/weiboBigVComparison/index.vue * @FilePath: /data-show/src/views/BrandComparison/weiboBigVComparison/index.vue
--> -->
<template> <template>
<div class="wbc-outter"> <div class="wbc-outter">
<v-label-div title="微博大V对比" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div> <v-label-div
<div class="wbc-inner"> title="微博大V对比"
<v-echarts :opt="opt"></v-echarts> :showLine="false"
</div> :eStyle="{ 'border-style': 'none' }"
></v-label-div>
<div class="wbc-inner">
<v-echarts :opt="opt"></v-echarts>
</div> </div>
</div>
</template> </template>
<script> <script>
import createOpt from "./opt" import { getBoauthen0528C } from "@/api/BrandComparison/BrandWeibo.js";
import createOpt from "./opt";
export default { export default {
name: "weiboBigVComparison", name: "weiboBigVComparison",
data() { data() {
return { return {
opt: createOpt() 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> </script>
<style lang="less" scoped> <style lang="less" scoped>
.wbc-outter { .wbc-outter {
width: 630px; width: 630px;
height: 412px; height: 412px;
.wbc-inner { .wbc-inner {
width: 100%; width: 100%;
height: calc(100% - 48px); height: calc(100% - 48px);
} }
} }
</style> </style>

186
src/views/BrandComparison/weiboBigVComparison/opt.js
Unescape View File

@ -6,61 +6,8 @@
* @Description: In User Settings Edit * @Description: In User Settings Edit
* @FilePath: /data-show/src/views/Index/spreadTheSound/opt.js * @FilePath: /data-show/src/views/Index/spreadTheSound/opt.js
*/ */
export default function createOpt() { /*
return { series: [
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: ['名人', '媒体', '企业', '政府', '个人大v']
},
yAxis: {
type: 'value',
axisLine: {
show: false,
lineStyle: {
color: "#fff",
},
},
splitLine: {
lineStyle: {
type: "dashed", // y轴分割线类型
color: "#012b4b",
},
},
},
series: [
{ {
name: '奥迪', name: '奥迪',
type: 'bar', type: 'bar',
@ -71,57 +18,82 @@ export default function createOpt() {
}, },
data: [320, 302, 301, 334, 390] data: [320, 302, 301, 334, 390]
}, },
{ */
name: '宝马', function createData(dataList = []) {
type: 'bar', let arr = [];
stack: 'total', dataList.forEach(ele => {
barWidth: 24, let o = {
emphasis: { name: ele.key,
focus: 'series' type: 'bar',
}, stack: 'total',
data: [120, 132, 101, 134, 90] barWidth: 24,
}, emphasis: {
{ focus: 'series'
name: '奔驰', },
type: 'bar', //索引各类型大v的值，0表示名人，1表示政府，2表示企业，3表示媒体，4表示个人大V
stack: 'total', data: [ele.value[0].value, ele.value[3].value, ele.value[2].value, ele.value[1].value, ele.value[4].value]
barWidth: 24, };
emphasis: { arr.push(o);
focus: 'series' })
}, return arr;
data: [220, 182, 191, 234, 290] }
},
{ export default function createOpt(dataList = []) {
name: '吉利', let info = createData(dataList);
type: 'bar', return {
stack: 'total', grid: {
barWidth: 24, left: 16,
emphasis: { right: 16,
focus: 'series' bottom: 16,
}, top: 56,
data: [150, 212, 201, 154, 190] containLabel: true
}, },
{ tooltip: {
name: '大众', trigger: "axis",
type: 'bar', backgroundColor: "#08182F",
stack: 'total', color: "#fff",
barWidth: 24, borderColor: "#3373CC",
emphasis: { textStyle: {
focus: 'series' color: "#fff", //设置文字颜色
}, },
data: [820, 832, 901, 934, 1290] extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
}, },
{ legend: {
name: '别克', textStyle: { //图例文字的样式
type: 'bar', color: '#fff'
stack: 'total', },
barWidth: 24, y: 10,
emphasis: { x: 16
focus: 'series' },
}, xAxis: {
data: [820, 832, 901, 934, 1290] type: 'category',
} axisTick: {
] show: false,
} },
axisLine: {
show: false,
lineStyle: {
color: "#fff",
},
},
data: ['名人', '媒体', '企业', '政府', '个人大v']
},
yAxis: {
type: 'value',
axisLine: {
show: false,
lineStyle: {
color: "#fff",
},
},
splitLine: {
lineStyle: {
type: "dashed", // y轴分割线类型
color: "#012b4b",
},
},
},
series: info
}
} }

332
src/views/BrandComparison/weiboContentDirectionComparison/index.vue
Unescape View File

@ -7,235 +7,131 @@
* @FilePath: /data-show/src/views/BrandComparison/brandCommunicationTOPMedia/index.vue * @FilePath: /data-show/src/views/BrandComparison/brandCommunicationTOPMedia/index.vue
--> -->
<template> <template>
<div class="bcm-outter"> <div class="bcm-outter">
<v-label-div title="微博内容方向对比" :showLine="false" :eStyle="{'border-style': 'none'}"> <v-label-div
</v-label-div> title="微博内容方向对比"
<div class="bcm-inner"> :showLine="false"
<div class="bcm-item" v-for="(item,index) in list" :key="index"> :eStyle="{ 'border-style': 'none' }"
<span class="ss1" :style="{color: colors[index]}">{{item.name}}</span> >
<v-ranking-bcm v-for="(it,n) in item.medias" :key="n" :label="it.label" :num="it.num" :val="it.val"></v-ranking-bcm> </v-label-div>
</div> <div class="bcm-inner">
</div> <div class="bcm-item" v-for="(item, index) in sourceData" :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>
</div>
</template> </template>
<script> <script>
import vRankingBcm from "./v-ranking-bcm" import { getDirect0528C } from "@/api/BrandComparison/BrandWeibo.js";
import vRankingBcm from "./v-ranking-bcm";
export default { export default {
name: "weiboContentDirectionComparison", name: "weiboContentDirectionComparison",
components: { components: {
vRankingBcm vRankingBcm,
},
data() {
return {
colors: [
"#3373CC",
"#63AECC",
"#54BF93",
"#CC9D12",
"#CC7733",
"#CC5B41",
],
form: {
token: "",
sBrand: "",
},
sourceData: [],
};
},
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();
}, },
data() { getData() {
return { return new Promise((resolve, reject) => {
colors: ['#3373CC', '#63AECC', '#54BF93', '#CC9D12', '#CC7733', '#CC5B41'], let obj = Object.assign({}, this.getCtime2, this.form);
list: [ getDirect0528C(obj)
{ .then((res) => {
name: '奥迪', let data = res.data || [];
medias: [ let showData = [];
{ data.forEach((e) => {
num: 1, //按照数据的值排序，然后取前5个值放入obj中传给用于显示数据的数组
label: '微博', let sortedArr = e.value.sort(this.compare("value")).slice(0, 5);
val: 1000 let obj = {
}, key: e.key,
{ value: sortedArr,
num: 2, };
label: '字节跳动', showData.push(obj);
val: 800 });
}, showData.forEach((ele) => {
{ //给数据添加排名
num: 3, for (let index = 0; index < ele.value.length; index++) {
label: '搜狐汽车', ele.value[index].num = index + 1;
val: 600 }
}, });
{ this.sourceData = showData;
num: 4, resolve(data);
label: '汽车之家', })
val: 400 .catch(() => {
}, reject(false);
{ });
num: 5, });
label: '企鹅网', },
val: 300 // 根据对象的属性排序 v2-v1为顺序，v1-v2为倒序
} compare(property) {
] return function (a, b) {
}, let value1 = a[property];
{ let value2 = b[property];
name: '宝马', return value2 - value1;
medias: [ };
{ },
num: 1, },
label: '微博',
val: 1000
},
{
num: 2,
label: '字节跳动',
val: 800
},
{
num: 3,
label: '搜狐汽车',
val: 600
},
{
num: 4,
label: '汽车之家',
val: 400
},
{
num: 5,
label: '企鹅网',
val: 300
}
]
},
{
name: '奔驰',
medias: [
{
num: 1,
label: '微博',
val: 1000
},
{
num: 2,
label: '字节跳动',
val: 800
},
{
num: 3,
label: '搜狐汽车',
val: 600
},
{
num: 4,
label: '汽车之家',
val: 400
},
{
num: 5,
label: '企鹅网',
val: 300
}
]
},
{
name: '吉利',
medias: [
{
num: 1,
label: '微博',
val: 1000
},
{
num: 2,
label: '字节跳动',
val: 800
},
{
num: 3,
label: '搜狐汽车',
val: 600
},
{
num: 4,
label: '汽车之家',
val: 400
},
{
num: 5,
label: '企鹅网',
val: 300
}
]
},
{
name: '大众',
medias: [
{
num: 1,
label: '微博',
val: 1000
},
{
num: 2,
label: '字节跳动',
val: 800
},
{
num: 3,
label: '搜狐汽车',
val: 600
},
{
num: 4,
label: '汽车之家',
val: 400
},
{
num: 5,
label: '企鹅网',
val: 300
}
]
},
{
name: '别克',
medias: [
{
num: 1,
label: '微博',
val: 1000
},
{
num: 2,
label: '字节跳动',
val: 800
},
{
num: 3,
label: '搜狐汽车',
val: 600
},
{
num: 4,
label: '汽车之家',
val: 400
},
{
num: 5,
label: '企鹅网',
val: 300
}
]
}
]
}
}
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.bcm-outter { .bcm-outter {
width: 100%;
height: 460px;
margin-top: 16px;
.bcm-inner {
width: 100%; width: 100%;
height: 460px; height: calc(100% - 48px);
margin-top: 16px; display: flex;
.bcm-inner { justify-content: flex-start;
width: 100%; .bcm-item {
height: calc(100% - 48px); width: 282px;
display: flex; margin-left: 27px;
justify-content: flex-start; .ss1 {
.bcm-item { display: block;
width: 282px; font-size: 18px;
margin-left: 27px; color: #fff;
.ss1 { font-weight: 500;
display: block; padding-top: 14px;
font-size: 18px; }
color: #fff;
font-weight: 500;
padding-top: 14px;
}
}
} }
}
} }
</style> </style>

159
src/views/BrandComparison/weiboTuneComparison/index.vue
Unescape View File

@ -7,70 +7,125 @@
* @FilePath: /data-show/src/views/BrandComparison/weiboTuneComparison/index.vue * @FilePath: /data-show/src/views/BrandComparison/weiboTuneComparison/index.vue
--> -->
<template> <template>
<div class="wtc-outter"> <div class="wtc-outter">
<v-label-div title="微博调性对比" :showLine="false" :eStyle="{'border-style': 'none'}"> <v-label-div
</v-label-div> title="微博调性对比"
<div class="wtc-d1"> :showLine="false"
<div class="dd1" style="margin-left: 16px"><span class="s1"></span><span class="s2">正面</span></div> :eStyle="{ 'border-style': 'none' }"
<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> </v-label-div>
</div> <div class="wtc-d1">
<div class="wtc-inner"> <div class="dd1" style="margin-left: 16px">
<wbRoundata title="奥迪" color="#3373CC" style="margin-left: 46px"></wbRoundata> <span class="s1"></span><span class="s2">正面</span>
<wbRoundata title="宝马" color="#63AECC" style="margin-left: 110px"></wbRoundata> </div>
<wbRoundata title="奔驰" color="#54BF93" style="margin-left: 110px"></wbRoundata> <div class="dd1" style="margin-left: 24px">
<wbRoundata title="吉利" color="#CC9D12" style="margin-left: 110px"></wbRoundata> <span class="s1" :style="{ background: '#54BF93' }"></span
<wbRoundata title="大众" color="#CC7733" style="margin-left: 110px"></wbRoundata> ><span class="s2">中性</span>
<wbRoundata title="别克" color="#CC5B41" style="margin-left: 110px"></wbRoundata> </div>
</div> <div class="dd1" style="margin-left: 24px">
<span class="s1" :style="{ background: '#CC9D12' }"></span
><span class="s2">负面</span>
</div>
</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> </template>
<script> <script>
import { getAffectionsC } from "@/api/BrandComparison/BrandWeibo.js";
import wbRoundata from "./wbRoundata"; import wbRoundata from "./wbRoundata";
export default { export default {
name: "weiboTuneComparison", name: "weiboTuneComparison",
components: { data() {
wbRoundata 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> </script>
<style lang="less" scoped> <style lang="less" scoped>
.wtc-outter { .wtc-outter {
width: 100%;
height: 460px;
margin-top: 16px;
.wtc-d1 {
width: 100%; width: 100%;
height: 460px; display: flex;
margin-top: 16px; height: 36px;
.wtc-d1 { justify-content: flex-start;
width: 100%; align-items: center;
display: flex; .dd1 {
height: 36px; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
.dd1 { }
display: flex; .s1 {
justify-content: flex-start; display: inline-block;
align-items: center; width: 12px;
} height: 12px;
.s1 { background: #3373cc;
display: inline-block;
width: 12px;
height: 12px;
background: #3373cc;
}
.s2 {
display: inline-block;
font-size: 12px;
color: #fff;
margin-left: 10px;
}
} }
.wtc-inner { .s2 {
width: 100%; display: inline-block;
height: calc(100% - 48px); font-size: 12px;
display: flex; color: #fff;
justify-content: flex-start; margin-left: 10px;
align-items: center;
} }
}
.wtc-inner {
width: 100%;
height: calc(100% - 48px);
display: flex;
justify-content: flex-start;
align-items: center;
}
} }
</style> </style>

14
src/views/BrandComparison/weiboTuneComparison/wbRoundata/index.vue
Unescape View File

@ -27,10 +27,22 @@ export default {
type: String, type: String,
default: "", default: "",
}, },
data: {
type: Object,
default: () => {}
}
},
watch: {
data: {
handler(val) {
this.opt = createOpt(val)
},
immediate: true
}
}, },
data() { data() {
return { return {
opt: createOpt(), //opt: createOpt(),
}; };
}, },
methods: { methods: {

175
src/views/BrandComparison/weiboTuneComparison/wbRoundata/opt.js
Unescape View File

@ -7,109 +7,84 @@
* @FilePath: /data-show/src/views/BrandInsight/weiboKol/opt.js * @FilePath: /data-show/src/views/BrandInsight/weiboKol/opt.js
*/ */
import * as echarts from "echarts"; import * as echarts from "echarts";
export default function createOpt() { function createData(obj = {}) {
return { if (JSON.stringify(obj) === '{}') {
series: [ return;
{ }
name: 'Access From0', let arr = [];
type: 'pie', for (let key in obj) {
radius: ['70%', '92%'], let color = "";
avoidLabelOverlap: false, if (key === '正面') {
label: { color = "#3373CC"
show: false, } else if (key === '负面') {
position: 'center', color = "#b38b14"
lineHeight: 40 } else {
}, color = "#54BF93"
emphasis: { }
label: { 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: 'black'
}, {
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, show: true,
fontSize: '20', fontSize: '18',
color: "#ffff", color: "#ffff",
fontWeight: 'bold', fontWeight: 'bold',
formatter: function(p) { formatter: function (p) {
return `${p.data.name}\n25%\n${p.data.value}` return `${p.data.name}\n${p.percent}%\n${p.data.value}`
} }
} }
}, },
labelLine: { labelLine: {
show: false show: false
}, },
data: [ data: data
{ value: 2000, name: '正面', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{ },
//给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变 {
//给第一个设置0，第四个设置1，就是垂直渐变 name: 'Access From1',
offset: 0, type: 'pie',
color: 'black' radius: ['96%', '100%'],
}, { avoidLabelOverlap: false,
offset: 1, label: {
color: '#3373CC' show: false,
}])} }, position: 'center'
},
{ value: 1000, name: '中性', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{ labelLine: {
//给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变 show: false
//给第一个设置0，第四个设置1，就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: '#54BF93'
}])} },
{ value: 1000, name: '负面', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
//给第一个设置0，第四个设置1，就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: '#b38b14'
}])} },
],
}, },
{ center: ['50%', '50%'],//边框位置
name: 'Access From1', data: data
type: 'pie', }
radius: ['96%', '100%'], ]
avoidLabelOverlap: false, }
label: {
show: false,
position: 'center'
},
labelLine: {
show: false
},
center: ['50%', '50%'],//边框位置
data: [
{ value: 2000, name: '正面', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
//给第一个设置0，第四个设置1，就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: '#3373CC'
}])} },
{ value: 1000, name: '中性', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
//给第一个设置0，第四个设置1，就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: '#54BF93'
}])} },
{ value: 1000, name: '负面', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
//给第一个设置0，第四个设置1，就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: '#b38b14'
}])} },
],
}
]
}
} }

Write Preview
Loading…
Cancel
Save