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
Show Stats Download Patch File Download Diff File

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'
}
})
}

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

@ -54,7 +54,7 @@ export function getInteractCount0528C(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({
url: `/api/v6.ashx`,
method: 'post',
@ -63,4 +63,44 @@ export function getSourcetypeC(params) {
'content-type': 'application/x-www-form-urlencoded'
}
})
}
}
// 品牌对比-重点媒体传播对比
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 Loading from './loading'
function detectZoom (){
console.log(2222)
let ratio = 0,
screen = window.screen,
ua = navigator.userAgent.toLowerCase();

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

@ -6,12 +6,12 @@
* @Description: In User Settings Edit
* @FilePath: /data-show/src/utils/gol/bubbleWord.js
*/
import {compare} from "./dataTool"
// 将后台数据转成数组
import { compare } from "./dataTool"
// 将后台数据转成数组
function doWordCloud(data) {
let arr1 = [];
for (let key in data) {
let obj = { name: key, value: data[key] };
let obj = { key: key, value: data[key] };
arr1.push(obj);
}
return arr1;
@ -93,12 +93,17 @@ function bubbleChart(data = [], format = []) {
// 创建词云图
export default function createWordCloud(obj) {
let words = doWordCloud(obj);
words.sort(compare('value'));
let bubble = bubbleChart(words, ['name', 'value']);
let bubble = null;
if (Array.isArray(obj)) {
bubble = bubbleChart(obj, ['key', 'value']);
} else {
let words = doWordCloud(obj);
words.sort(compare('value'));
bubble = bubbleChart(words, ['key', 'value']);
}
return {
animationEasingUpdate: 'bounceIn',
tooltip: {
tooltip: {
backgroundColor: "#08182F",
color: "#fff",
borderColor: "#3373CC",
@ -106,8 +111,9 @@ export default function createWordCloud(obj) {
color: "#fff", //设置文字颜色
},
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
formatter: function(param) {
formatter: function (param) {
let data = param.data;
console.log(data)
return `<span>${data.name}</span><br><span>${data.value}</span>`
}
},
@ -115,13 +121,13 @@ export default function createWordCloud(obj) {
type: 'graph',
layout: 'force',
label: {
show:true,
color:"#FFF",
fontSize:12,
show: true,
color: "#FFF",
fontSize: 12,
},
force: {
gravity:0.2,
gravity: 0.2,
repulsion: bubble.repulsion,
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
-->
<template>
<div class="bcm-outter">
<v-label-div title="品牌传播TOP媒体">
</v-label-div>
<div class="bcm-inner">
<div class="bcm-item" v-for="(item,index) in list" :key="index">
<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>
</div>
</div>
<div class="bcm-outter">
<v-label-div title="品牌传播TOP媒体"> </v-label-div>
<div class="bcm-inner">
<div class="bcm-item" v-for="(item, index) in arrList" :key="index">
<span class="ss1" :style="{ color: colors[index] }">{{
item.key
}}</span>
<v-ranking-bcm
v-for="(it, n) in item.value"
:key="n"
:label="it.key"
:num="it.num"
:val="it.value"
></v-ranking-bcm>
</div>
</div>
</div>
</template>
<script>
import vRankingBcm from "./v-ranking-bcm"
import { getSourceTopCount0528C } from "@/api/BrandComparison";
import vRankingBcm from "./v-ranking-bcm";
export default {
name: "brandCommunicationTOPMedia",
components: {
vRankingBcm
name: "brandCommunicationTOPMedia",
components: {
vRankingBcm,
},
data() {
return {
colors: [
"#3373CC",
"#63AECC",
"#54BF93",
"#CC9D12",
"#CC7733",
"#CC5B41",
],
form: {
token: "",
sBrand: "",
},
arrList:[],
};
},
created() {
this.initData();
},
methods: {
initData() {
this.form.token = this.getToken;
let arr = this.getBComparison;
let brands = [];
arr.forEach((ele) => {
brands.push(ele.name);
});
this.form.sBrand = brands.toString();
this.getData();
},
data() {
return {
colors: ['#3373CC', '#63AECC', '#54BF93', '#CC9D12', '#CC7733', '#CC5B41'],
list: [
{
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
}
]
},
{
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
}
]
getData() {
return new Promise((resolve, reject) => {
let obj = Object.assign({}, this.getCtime2, this.form);
getSourceTopCount0528C(obj)
.then((res) => {
let data = res.data || [];
data.forEach(ele => {
for(let index = 0 ; index<ele.value.length;index++){
ele.value[index].num = index + 1;
}
]
}
}
});
this.arrList = data;
resolve(data);
})
.catch(() => {
reject(false);
});
});
},
},
};
</script>
<style lang="less" scoped>
.bcm-outter {
width: 100%;
height: 460px;
border: 2px solid #0f2a4d;
margin-top: 16px;
.bcm-inner {
width: 100%;
height: 460px;
border: 2px solid #0f2a4d;
margin-top: 16px;
.bcm-inner {
width: 100%;
height: calc(100% - 48px);
display: flex;
justify-content: flex-start;
.bcm-item {
width: 282px;
margin-left: 27px;
.ss1 {
display: block;
font-size: 18px;
color: #fff;
font-weight: 500;
padding-top: 14px;
}
}
height: calc(100% - 48px);
display: flex;
justify-content: flex-start;
.bcm-item {
width: 282px;
margin-left: 27px;
.ss1 {
display: block;
font-size: 18px;
color: #fff;
font-weight: 500;
padding-top: 14px;
}
}
}
}
</style>

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

@ -7,96 +7,185 @@
* @FilePath: /data-show/src/views/BrandComparison/brandEventComparison/index.vue
-->
<template>
<div class="bec-outter">
<v-label-div title="品牌事件对比">
</v-label-div>
<div class="bec-inner">
<v-echarts :opt="opt1"></v-echarts>
<div class="bec-outter">
<v-label-div title="品牌事件对比"> </v-label-div>
<div class="bec-inner">
<v-echarts :opt="opt1"></v-echarts>
</div>
<v-label-div
title="事件上榜车型"
:showLine="false"
:eStyle="{ 'border-style': 'none' }"
>
</v-label-div>
<div class="bec-one">
<div class="bec-one-item" v-for="(item, index) in list" :key="index">
<span class="s1" :style="{ color: colors[index] }">{{
item.name
}}</span>
<div class="d1">
<v-echarts :opt="item.drawOpt"></v-echarts>
</div>
<v-label-div title="事件上榜车型" :showLine="false" :eStyle="{'border-style': 'none'}">
</v-label-div>
<div class="bec-one">
<div class="bec-one-item" v-for="(item,index) in list" :key="index">
<span class="s1" :style="{color: colors[index]}">{{item.name}}</span>
<div class="d1">
<v-echarts :opt="item.drawOpt"></v-echarts>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import {createSideSingleColumn} from "@/utils/gol/sideSingleColumn"
import createOpt from "./opt"
import { getSourcetypeC } from "@/api/BrandComparison/HotEvent.js";
import { getContrastCount0528C } from "@/api/BrandComparison/HotEvent.js";
import { createSideSingleColumn } from "@/utils/gol/sideSingleColumn";
import createOpt from "./opt";
export default {
name: "brandEventComparison",
data() {
return {
opt1: createOpt(),
colors: ['#3373CC', '#63AECC', '#54BF93', '#CC9D12', '#CC7733', '#CC5B41'],
list: [
{
name: '奥迪',
drawOpt: createSideSingleColumn(['A4', 'A3','Q5','A7','A6'], [400, 500, 600, 800, 1000], '#3373CC'),
},
{
name: '宝马',
drawOpt: createSideSingleColumn(['520', '220','S4','525','320'], [400, 500, 600, 800, 1000], '#63AECC'),
},
{
name: '奔驰',
drawOpt: createSideSingleColumn(['GML', '350','S600','SEL','300'], [400, 500, 600, 800, 1000], '#54BF93'),
},
{
name: '吉利',
drawOpt: createSideSingleColumn(['330', '吉利星','星耀','星月','帝豪'], [400, 500, 600, 800, 1000], '#CC9D12'),
},
{
name: '大众',
drawOpt: createSideSingleColumn(['途观', '速腾','迈腾','桑塔纳','帕萨特'], [400, 500, 600, 800, 1000], '#CC7733'),
},
{
name: '别克',
drawOpt: createSideSingleColumn(['凯悦', '奥克拉','君悦','君越','君威'], [400, 500, 600, 800, 1000], '#CC5B41'),
}
]
}
}
}
name: "brandEventComparison",
data() {
return {
opt1: createOpt(),
form: {
token: "",
sBrand: "",
},
colors: [
"#3373CC",
"#63AECC",
"#54BF93",
"#CC9D12",
"#CC7733",
"#CC5B41",
],
list: [
{
name: "奥迪",
drawOpt: createSideSingleColumn(
["A4", "A3", "Q5", "A7", "A6"],
[400, 500, 600, 800, 1000],
"#3373CC"
),
},
{
name: "宝马",
drawOpt: createSideSingleColumn(
["520", "220", "S4", "525", "320"],
[400, 500, 600, 800, 1000],
"#63AECC"
),
},
{
name: "奔驰",
drawOpt: createSideSingleColumn(
["GML", "350", "S600", "SEL", "300"],
[400, 500, 600, 800, 1000],
"#54BF93"
),
},
{
name: "吉利",
drawOpt: createSideSingleColumn(
["330", "吉利星", "星耀", "星月", "帝豪"],
[400, 500, 600, 800, 1000],
"#CC9D12"
),
},
{
name: "大众",
drawOpt: createSideSingleColumn(
["途观", "速腾", "迈腾", "桑塔纳", "帕萨特"],
[400, 500, 600, 800, 1000],
"#CC7733"
),
},
{
name: "别克",
drawOpt: createSideSingleColumn(
["凯悦", "奥克拉", "君悦", "君越", "君威"],
[400, 500, 600, 800, 1000],
"#CC5B41"
),
},
],
};
},
created() {
this.initData();
},
methods: {
initData() {
this.form.token = this.getToken;
let arr = this.getBComparison;
let brands = [];
arr.forEach((ele) => {
brands.push(ele.name);
});
this.form.sBrand = brands.toString();
this.getData();
this.getTypeData();
},
getData() {
return new Promise((resolve, reject) => {
let obj = Object.assign({}, this.getCtime2, this.form);
getSourcetypeC(obj)
.then((res) => {
let data = res.data || [];
let brandList = [];
data.forEach((e) => {
brandList.push(e.Name);
});
this.opt1 = createOpt(data, brandList);
resolve(data);
})
.catch(() => {
reject(false);
});
});
},
getTypeData() {
return new Promise((resolve, reject) => {
let obj = Object.assign({}, this.getCtime2, this.form);
getContrastCount0528C(obj)
.then((res) => {
let data = res.data || [];
resolve(data);
})
.catch(() => {
reject(false);
});
});
},
},
};
</script>
<style lang="less" scoped>
.bec-outter {
width: 100%;
height: auto;
border: 2px solid #0f2a4d;
margin-top: 16px;
.bec-inner {
width: 100%;
height: auto;
border: 2px solid #0f2a4d;
margin-top: 16px;
.bec-inner {
width: 100%;
height: 412px;
}
.bec-one {
height: 412px;
}
.bec-one {
width: 100%;
height: 412px;
display: flex;
justify-content: flex-start;
.bec-one-item {
width: 314px;
height: 100%;
.s1 {
padding-left: 16px;
display: block;
height: 40px;
line-height: 40px;
color: #fff;
font-size: 18px;
}
.d1 {
width: 100%;
height: 412px;
display: flex;
justify-content: flex-start;
.bec-one-item {
width: 314px;
height: 100%;
.s1 {
padding-left: 16px;
display: block;
height: 40px;
line-height: 40px;
color:#fff;
font-size: 18px;
}
.d1 {
width: 100%;
height: calc(100% - 40px);
}
}
height: calc(100% - 40px);
}
}
}
}
</style>

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

@ -6,7 +6,38 @@
* @Description: In User Settings Edit
* @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 {
grid: {
top: "56px",
@ -16,7 +47,7 @@ export default function createOpt() {
containLabel: true,
},
legend: {
data: ['奥迪', '宝马', '奔驰', '吉利', '大众', '别克'],
data: brandList,
textStyle: { //图例文字的样式
color: '#fff'
},
@ -65,62 +96,6 @@ export default function createOpt() {
},
}
],
series: [
{
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]
}
]
series: info
}
}

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

@ -16,7 +16,7 @@
</template>
<script>
import { getSourcetypeC } from "@/api/BrandComparison";
import { getSourcetypeC } from "@/api/BrandComparison/index.js";
import createOpt from "./opt";
export default {
name: "channelDistribution",
@ -51,7 +51,7 @@ export default {
let data = res.data || [];
let brandList = [];
data.forEach(e => {
brandList.push(e.Name);
brandList.push(e.Name)
})
this.opt = createOpt(data,brandList);
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
-->
<template>
<div class="cotn-outter">
<v-label-div title="微博互动人数对比" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div>
<div class="cotn-inner">
<v-echarts :opt="opt"></v-echarts>
</div>
<div class="cotn-outter">
<v-label-div
title="微博互动人数对比"
:showLine="false"
:eStyle="{ 'border-style': 'none' }"
></v-label-div>
<div class="cotn-inner">
<v-echarts :opt="opt"></v-echarts>
</div>
</div>
</template>
<script>
import {createSingleColumnar} from "@/utils/gol/singleColumnar"
import { getInteractCount0528C } from "@/api/BrandComparison/BrandWeibo.js";
import { createSingleColumnar } from "@/utils/gol/singleColumnar";
export default {
name: "comparisonOfTheNumberOfWeiboInteractions",
data() {
return {
opt: createSingleColumnar(['奥迪', '宝马', '奔驰', '吉利', '大众', '别克'], ['2100','1800','1700','1600','1500','1400'],'#45a380')
}
}
}
name: "comparisonOfTheNumberOfWeiboInteractions",
data() {
return {
form: {
token: "",
sBrand: "",
},
opt: {}
};
},
created() {
this.initData();
},
methods: {
initData() {
this.form.token = this.getToken;
let arr = this.getBComparison;
let brands = [];
arr.forEach((ele) => {
brands.push(ele.name);
});
this.form.sBrand = brands.toString();
this.getData();
},
getData() {
return new Promise((resolve, reject) => {
let obj = Object.assign({}, this.getCtime2, this.form);
getInteractCount0528C(obj)
.then((res) => {
let data = res.data || [];
let dx = [];
let ds = [];
data.forEach((ele) => {
dx.push(ele.key);
ds.push(ele.value);
});
this.opt = createSingleColumnar(dx, ds);
resolve(data);
})
.catch(() => {
reject(false);
});
});
},
},
};
</script>
<style lang="less" scoped>
.cotn-outter {
width: 628px;
height: 412px;
.cotn-inner {
width: 100%;
height: calc(100% - 48px);
}
width: 628px;
height: 412px;
.cotn-inner {
width: 100%;
height: calc(100% - 48px);
}
}
</style>

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

@ -7,33 +7,77 @@
* @FilePath: /data-show/src/views/BrandComparison/comparisonOfWeiboInformation/index.vue
-->
<template>
<div class="cowi-outter">
<v-label-div title="微博信息量对比" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div>
<div class="cowi-inner">
<v-echarts :opt="opt"></v-echarts>
</div>
<div class="cowi-outter">
<v-label-div
title="微博信息量对比"
:showLine="false"
:eStyle="{ 'border-style': 'none' }"
></v-label-div>
<div class="cowi-inner">
<v-echarts :opt="opt"></v-echarts>
</div>
</div>
</template>
<script>
import {createSingleColumnar} from "@/utils/gol/singleColumnar"
import { getContrastCount0528C } from "@/api/BrandComparison/BrandWeibo.js";
import { createSingleColumnar } from "@/utils/gol/singleColumnar";
export default {
name: "comparisonOfWeiboInformation",
data() {
return {
opt: createSingleColumnar(['奥迪', '宝马', '奔驰', '吉利', '大众', '别克'], ['2100','1800','1700','1600','1500','1400'])
}
}
}
name: "comparisonOfWeiboInformation",
data() {
return {
form: {
token: "",
sBrand: "",
},
opt: {}
};
},
created() {
this.initData();
},
methods: {
initData() {
this.form.token = this.getToken;
let arr = this.getBComparison;
let brands = [];
arr.forEach((ele) => {
brands.push(ele.name);
});
this.form.sBrand = brands.toString();
this.getData();
},
getData() {
return new Promise((resolve, reject) => {
let obj = Object.assign({}, this.getCtime2, this.form);
getContrastCount0528C(obj)
.then((res) => {
let data = res.data || [];
let dx = [];
let ds = [];
data.forEach(ele => {
dx.push(ele.key);
ds.push(ele.value)
})
this.opt = createSingleColumnar(dx,ds);
resolve(data);
})
.catch(() => {
reject(false);
});
});
},
},
};
</script>
<style lang="less" scoped>
.cowi-outter {
width: 628px;
height: 412px;
.cowi-inner {
width: 100%;
height: calc(100% - 48px);
}
width: 628px;
height: 412px;
.cowi-inner {
width: 100%;
height: calc(100% - 48px);
}
}
</style>

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

@ -7,36 +7,61 @@
* @FilePath: /data-show/src/views/BrandComparison/keyMediaCommunicationComparison/index.vue
-->
<template>
<div class="kmcc-outter">
<v-label-div title="重点媒体传播对比">
</v-label-div>
<div class="kmcc-inner">
<v-echarts :opt="opt"></v-echarts>
</div>
<div class="kmcc-outter">
<v-label-div title="重点媒体传播对比"> </v-label-div>
<div class="kmcc-inner">
<v-echarts :opt="opt"></v-echarts>
</div>
</div>
</template>
<script>
import createOpt from "./opt"
import createOpt from "./opt";
import { getSourceCount0528C } from "@/api/BrandComparison";
export default {
name: "kmcc-outter",
data() {
return {
opt: createOpt()
}
name: "kmcc-outter",
data() {
return {
form: {
token: "",
sBrand: "",
},
opt: createOpt(),
};
},
created() {
this.initData();
},
methods: {
initData() {
this.form.token = this.getToken;
let arr = this.getBComparison;
let brands = [];
arr.forEach((ele) => {
brands.push(ele.name);
});
this.form.sBrand = brands.toString();
this.getData();
},
getData() {
let obj = Object.assign({}, this.getCtime2, this.form);
getSourceCount0528C(obj).then(() => {
//console.log(res);
})
}
}
},
};
</script>
<style lang="less" scoped>
.kmcc-outter {
width: 936px;
height: 460px;
border: 2px solid #0f2a4d;
margin-left: 16px;
.kmcc-inner {
width: 100%;
height: calc(100% - 48px);
}
width: 936px;
height: 460px;
border: 2px solid #0f2a4d;
margin-left: 16px;
.kmcc-inner {
width: 100%;
height: calc(100% - 48px);
}
}
</style>

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

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

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

@ -7,53 +7,92 @@
* @FilePath: /data-show/src/views/WeiboDetails/weiboUserActiveArea/index.vue
-->
<template>
<div class="wua-outter">
<v-label-div title="用户区域分布" :showLine="false" :eStyle="{'border-style': 'none'}">
<v-tab-group :btns="['奥迪','宝马','奔驰','吉利','大众','别克']"></v-tab-group>
</v-label-div>
<div class="wua-inner">
<div class="d1">
<v-echarts :opt="opt1"></v-echarts>
</div>
<div class="d2">
<v-echars-map :opt="opt2"></v-echars-map>
</div>
<div class="wua-outter">
<v-label-div
title="用户区域分布"
:showLine="false"
:eStyle="{ 'border-style': 'none' }"
>
<v-tab-group
:btns="['奥迪', '宝马', '奔驰', '吉利', '大众', '别克']"
></v-tab-group>
</v-label-div>
<div class="wua-inner">
<div class="d1">
<v-echarts :opt="opt1"></v-echarts>
</div>
<div class="d2">
<v-echars-map :opt="opt2"></v-echars-map>
</div>
</div>
</div>
</template>
<script>
import createOptD1 from "./opt1"
import createOptD2 from './opt2'
import { getRegionWeiBoC } from "@/api/BrandComparison/BrandWeibo.js";
import createOptD1 from "./opt1";
import createOptD2 from "./opt2";
export default {
name: "userAreaDistribution",
data() {
return {
opt1: createOptD1(),
opt2: createOptD2()
}
}
}
name: "userAreaDistribution",
data() {
return {
opt1: createOptD1(),
opt2: createOptD2(),
form: {
token: "",
sBrand: "",
},
};
},
created() {
this.initData();
},
methods: {
initData() {
this.form.token = this.getToken;
let arr = this.getBComparison;
let brands = [];
arr.forEach((ele) => {
brands.push(ele.name);
});
this.form.sBrand = brands.toString();
this.getData();
},
getData() {
return new Promise((resolve, reject) => {
let obj = Object.assign({}, this.getCtime2, this.form);
getRegionWeiBoC(obj)
.then((res) => {
let data = res.data || [];
resolve(data);
})
.catch(() => {
reject(false);
});
});
},
},
};
</script>
<style lang="less" scoped>
.wua-outter {
width: 944px;
height: 412px;
.wua-inner {
width: 100%;
height: calc(100% - 48px);
display: flex;
justify-content: flex-start;
.d1 {
width: 479px;
height: 100%;
}
.d2 {
width: 465px;
height: 100%;
margin-left: 16px;
}
width: 944px;
height: 412px;
.wua-inner {
width: 100%;
height: calc(100% - 48px);
display: flex;
justify-content: flex-start;
.d1 {
width: 479px;
height: 100%;
}
.d2 {
width: 465px;
height: 100%;
margin-left: 16px;
}
}
}
</style>

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

@ -7,32 +7,70 @@
* @FilePath: /data-show/src/views/BrandComparison/weiboBigVComparison/index.vue
-->
<template>
<div class="wbc-outter">
<v-label-div title="微博大V对比" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div>
<div class="wbc-inner">
<v-echarts :opt="opt"></v-echarts>
</div>
<div class="wbc-outter">
<v-label-div
title="微博大V对比"
:showLine="false"
:eStyle="{ 'border-style': 'none' }"
></v-label-div>
<div class="wbc-inner">
<v-echarts :opt="opt"></v-echarts>
</div>
</div>
</template>
<script>
import createOpt from "./opt"
import { getBoauthen0528C } from "@/api/BrandComparison/BrandWeibo.js";
import createOpt from "./opt";
export default {
name: "weiboBigVComparison",
data() {
return {
opt: createOpt()
}
}
}
name: "weiboBigVComparison",
data() {
return {
form: {
token: "",
sBrand: "",
},
opt: {}
};
},
created() {
this.initData();
},
methods: {
initData() {
this.form.token = this.getToken;
let arr = this.getBComparison;
let brands = [];
arr.forEach((ele) => {
brands.push(ele.name);
});
this.form.sBrand = brands.toString();
this.getData();
},
getData() {
return new Promise((resolve, reject) => {
let obj = Object.assign({}, this.getCtime2, this.form);
getBoauthen0528C(obj)
.then((res) => {
let data = res.data || [];
this.opt = createOpt(data);
resolve(data);
})
.catch(() => {
reject(false);
});
});
},
},
};
</script>
<style lang="less" scoped>
.wbc-outter {
width: 630px;
height: 412px;
.wbc-inner {
width: 100%;
height: calc(100% - 48px);
}
width: 630px;
height: 412px;
.wbc-inner {
width: 100%;
height: calc(100% - 48px);
}
}
</style>

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

@ -6,61 +6,8 @@
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/Index/spreadTheSound/opt.js
*/
export default function createOpt() {
return {
grid: {
left: 16,
right: 16,
bottom: 16,
top: 56,
containLabel: true
},
tooltip: {
trigger: "axis",
backgroundColor: "#08182F",
color: "#fff",
borderColor: "#3373CC",
textStyle: {
color: "#fff", //设置文字颜色
},
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
},
legend: {
textStyle: { //图例文字的样式
color: '#fff'
},
y: 10,
x: 16
},
xAxis: {
type: 'category',
axisTick: {
show: false,
},
axisLine: {
show: false,
lineStyle: {
color: "#fff",
},
},
data: ['名人', '媒体', '企业', '政府', '个人大v']
},
yAxis: {
type: 'value',
axisLine: {
show: false,
lineStyle: {
color: "#fff",
},
},
splitLine: {
lineStyle: {
type: "dashed", // y轴分割线类型
color: "#012b4b",
},
},
},
series: [
/*
series: [
{
name: '奥迪',
type: 'bar',
@ -71,57 +18,82 @@ export default function createOpt() {
},
data: [320, 302, 301, 334, 390]
},
{
name: '宝马',
type: 'bar',
stack: 'total',
barWidth: 24,
emphasis: {
focus: 'series'
},
data: [120, 132, 101, 134, 90]
},
{
name: '奔驰',
type: 'bar',
stack: 'total',
barWidth: 24,
emphasis: {
focus: 'series'
},
data: [220, 182, 191, 234, 290]
},
{
name: '吉利',
type: 'bar',
stack: 'total',
barWidth: 24,
emphasis: {
focus: 'series'
},
data: [150, 212, 201, 154, 190]
},
{
name: '大众',
type: 'bar',
stack: 'total',
barWidth: 24,
emphasis: {
focus: 'series'
},
data: [820, 832, 901, 934, 1290]
},
{
name: '别克',
type: 'bar',
stack: 'total',
barWidth: 24,
emphasis: {
focus: 'series'
},
data: [820, 832, 901, 934, 1290]
}
]
}
*/
function createData(dataList = []) {
let arr = [];
dataList.forEach(ele => {
let o = {
name: ele.key,
type: 'bar',
stack: 'total',
barWidth: 24,
emphasis: {
focus: 'series'
},
//索引各类型大v的值，0表示名人，1表示政府，2表示企业，3表示媒体，4表示个人大V
data: [ele.value[0].value, ele.value[3].value, ele.value[2].value, ele.value[1].value, ele.value[4].value]
};
arr.push(o);
})
return arr;
}
export default function createOpt(dataList = []) {
let info = createData(dataList);
return {
grid: {
left: 16,
right: 16,
bottom: 16,
top: 56,
containLabel: true
},
tooltip: {
trigger: "axis",
backgroundColor: "#08182F",
color: "#fff",
borderColor: "#3373CC",
textStyle: {
color: "#fff", //设置文字颜色
},
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
},
legend: {
textStyle: { //图例文字的样式
color: '#fff'
},
y: 10,
x: 16
},
xAxis: {
type: 'category',
axisTick: {
show: false,
},
axisLine: {
show: false,
lineStyle: {
color: "#fff",
},
},
data: ['名人', '媒体', '企业', '政府', '个人大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
-->
<template>
<div class="bcm-outter">
<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 list" :key="index">
<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>
</div>
</div>
<div class="bcm-outter">
<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>
<v-ranking-bcm
v-for="(it, n) in item.value"
:key="n"
:label="it.key"
:num="it.num"
:val="it.value"
></v-ranking-bcm>
</div>
</div>
</div>
</template>
<script>
import vRankingBcm from "./v-ranking-bcm"
import { getDirect0528C } from "@/api/BrandComparison/BrandWeibo.js";
import vRankingBcm from "./v-ranking-bcm";
export default {
name: "weiboContentDirectionComparison",
components: {
vRankingBcm
name: "weiboContentDirectionComparison",
components: {
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() {
return {
colors: ['#3373CC', '#63AECC', '#54BF93', '#CC9D12', '#CC7733', '#CC5B41'],
list: [
{
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
}
]
},
{
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
}
]
}
]
}
}
getData() {
return new Promise((resolve, reject) => {
let obj = Object.assign({}, this.getCtime2, this.form);
getDirect0528C(obj)
.then((res) => {
let data = res.data || [];
let showData = [];
data.forEach((e) => {
//按照数据的值排序，然后取前5个值放入obj中传给用于显示数据的数组
let sortedArr = e.value.sort(this.compare("value")).slice(0, 5);
let obj = {
key: e.key,
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;
resolve(data);
})
.catch(() => {
reject(false);
});
});
},
// 根据对象的属性排序 v2-v1为顺序，v1-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: 460px;
margin-top: 16px;
.bcm-inner {
width: 100%;
height: calc(100% - 48px);
display: flex;
justify-content: flex-start;
.bcm-item {
width: 282px;
margin-left: 27px;
.ss1 {
display: block;
font-size: 18px;
color: #fff;
font-weight: 500;
padding-top: 14px;
}
}
height: calc(100% - 48px);
display: flex;
justify-content: flex-start;
.bcm-item {
width: 282px;
margin-left: 27px;
.ss1 {
display: block;
font-size: 18px;
color: #fff;
font-weight: 500;
padding-top: 14px;
}
}
}
}
</style>

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

@ -7,70 +7,125 @@
* @FilePath: /data-show/src/views/BrandComparison/weiboTuneComparison/index.vue
-->
<template>
<div class="wtc-outter">
<v-label-div title="微博调性对比" :showLine="false" :eStyle="{'border-style': 'none'}">
</v-label-div>
<div class="wtc-d1">
<div class="dd1" style="margin-left: 16px"><span class="s1"></span><span class="s2">正面</span></div>
<div class="dd1" style="margin-left: 24px;"><span class="s1" :style="{background: '#54BF93'}"></span><span class="s2">中性</span></div>
<div class="dd1" style="margin-left: 24px;"><span class="s1" :style="{background: '#CC9D12'}"></span><span class="s2">负面</span></div>
</div>
<div class="wtc-inner">
<wbRoundata title="奥迪" color="#3373CC" style="margin-left: 46px"></wbRoundata>
<wbRoundata title="宝马" color="#63AECC" style="margin-left: 110px"></wbRoundata>
<wbRoundata title="奔驰" color="#54BF93" style="margin-left: 110px"></wbRoundata>
<wbRoundata title="吉利" color="#CC9D12" style="margin-left: 110px"></wbRoundata>
<wbRoundata title="大众" color="#CC7733" style="margin-left: 110px"></wbRoundata>
<wbRoundata title="别克" color="#CC5B41" style="margin-left: 110px"></wbRoundata>
</div>
<div class="wtc-outter">
<v-label-div
title="微博调性对比"
:showLine="false"
:eStyle="{ 'border-style': 'none' }"
>
</v-label-div>
<div class="wtc-d1">
<div class="dd1" style="margin-left: 16px">
<span class="s1"></span><span class="s2">正面</span>
</div>
<div class="dd1" style="margin-left: 24px">
<span class="s1" :style="{ background: '#54BF93' }"></span
><span class="s2">中性</span>
</div>
<div class="dd1" style="margin-left: 24px">
<span class="s1" :style="{ background: '#CC9D12' }"></span
><span class="s2">负面</span>
</div>
</div>
<div class="wtc-inner">
<wbRoundata
v-for="(item,index) in dataSource"
:key="index"
:title="item.Name"
:color="colors[index]"
:style="index === 0 ? 'margin-left: 46px': 'margin-left: 110px'"
:data="item.Data"
></wbRoundata>
</div>
</div>
</template>
<script>
import { getAffectionsC } from "@/api/BrandComparison/BrandWeibo.js";
import wbRoundata from "./wbRoundata";
export default {
name: "weiboTuneComparison",
components: {
wbRoundata
}
}
name: "weiboTuneComparison",
data() {
return {
form: {
token: "",
sBrand: "",
},
colors: ["#3373CC","#63AECC","#54BF93","#CC9D12","#CC7733","#CC5B41"],
dataSource: []
};
},
components: {
wbRoundata,
},
created() {
this.initData();
},
methods: {
initData() {
this.form.token = this.getToken;
let arr = this.getBComparison;
let brands = [];
arr.forEach((ele) => {
brands.push(ele.name);
});
this.form.sBrand = brands.toString();
this.getData();
},
getData() {
return new Promise((resolve, reject) => {
let obj = Object.assign({}, this.getCtime2, this.form);
getAffectionsC(obj)
.then((res) => {
let data = res.data || [];
this.dataSource = data;
resolve(data);
})
.catch(() => {
reject(false);
});
});
},
},
};
</script>
<style lang="less" scoped>
.wtc-outter {
width: 100%;
height: 460px;
margin-top: 16px;
.wtc-d1 {
width: 100%;
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;
}
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;
}
.wtc-inner {
width: 100%;
height: calc(100% - 48px);
display: flex;
justify-content: flex-start;
align-items: center;
.s2 {
display: inline-block;
font-size: 12px;
color: #fff;
margin-left: 10px;
}
}
.wtc-inner {
width: 100%;
height: calc(100% - 48px);
display: flex;
justify-content: flex-start;
align-items: center;
}
}
</style>

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

@ -27,10 +27,22 @@ export default {
type: String,
default: "",
},
data: {
type: Object,
default: () => {}
}
},
watch: {
data: {
handler(val) {
this.opt = createOpt(val)
},
immediate: true
}
},
data() {
return {
opt: createOpt(),
//opt: createOpt(),
};
},
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
*/
import * as echarts from "echarts";
export default function createOpt() {
return {
series: [
{
name: 'Access From0',
type: 'pie',
radius: ['70%', '92%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center',
lineHeight: 40
},
emphasis: {
label: {
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: '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,
fontSize: '20',
fontSize: '18',
color: "#ffff",
fontWeight: 'bold',
formatter: function(p) {
return `${p.data.name}\n25%\n${p.data.value}`
formatter: function (p) {
return `${p.data.name}\n${p.percent}%\n${p.data.value}`
}
}
},
labelLine: {
show: false
},
data: [
{ value: 2000, name: '正面', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
//给第一个设置0，第四个设置1，就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: '#3373CC'
}])} },
{ value: 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'
}])} },
],
}
},
labelLine: {
show: false
},
data: data
},
{
name: 'Access From1',
type: 'pie',
radius: ['96%', '100%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
labelLine: {
show: false
},
{
name: 'Access From1',
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'
}])} },
],
}
]
}
center: ['50%', '50%'],//边框位置
data: data
}
]
}
}

Write Preview
Loading…
Cancel
Save