prod
lily.zhang 3 years ago
parent d9ed2349bf
commit 2093726dba

@ -1,7 +1,7 @@
/*
* @Author: your name
* @Date: 2021-11-11 15:12:31
* @LastEditTime: 2021-11-11 16:42:55
* @LastEditTime: 2021-11-12 13:46:55
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /data-show/src/api/ModelComparison/index.js
@ -19,4 +19,64 @@ export function getEventsSeriesNameC(params) {
'content-type': 'application/x-www-form-urlencoded'
}
})
}
// 事件-整体调性对比
export function getEventAffectionsC(params) {
let obj = Object.assign({action: 'getEventAffectionsC',sType: 'HotEvent0528'}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}
// 微博-人群画像
export function getSexMergeWeiBoC(params) {
let obj = Object.assign({action: 'getSexMergeWeiBoC',sType: 'BrandWeiBo'}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}
// 论坛-论坛信息概括对比
export function getCount0528C(params) {
let obj = Object.assign({action: 'getCount0528C',sType: 'BbsBrand', iBBsType: 1}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}
// 论坛-论坛发帖趋势对比
export function getCountTime0528C(params) {
let obj = Object.assign({action: 'getCountTime0528C',sType: 'BbsBrand', iBBsType: 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: 'BbsBrand', iBBsType: 2}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}

@ -1,7 +1,7 @@
<!--
* @Author: your name
* @Date: 2021-10-08 19:12:07
* @LastEditTime: 2021-10-29 11:21:48
* @LastEditTime: 2021-11-12 11:53:26
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edi
* @FilePath: /data-show/src/components/v-echars/index.vue
@ -31,6 +31,7 @@ export default {
if (!this.myChart) {
this.drawFun(val);
} else {
this.myChart.clear();
this.myChart.setOption(val);
}
this.myChart.off("click");

@ -1,7 +1,7 @@
<!--
* @Author: your name
* @Date: 2021-11-05 13:49:05
* @LastEditTime: 2021-11-11 14:55:29
* @LastEditTime: 2021-11-12 13:10:56
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandComparison/BrandComparison.vue
@ -32,7 +32,7 @@
<overallWordCloudComparison></overallWordCloudComparison>
<brandEventComparison></brandEventComparison>
<div class="bc-d4">
<v-label-div title="品牌微博对比"></v-label-div>
<v-label-div title="车型微博对比"></v-label-div>
<div class="bc-d4-d1">
<comparisonOfWeiboInformation></comparisonOfWeiboInformation>
<comparisonOfTheNumberOfWeiboInteractions></comparisonOfTheNumberOfWeiboInteractions>
@ -46,7 +46,7 @@
</div>
</div>
<div class="bc-d5">
<v-label-div title="品牌论坛对比"></v-label-div>
<v-label-div title="车型论坛对比"></v-label-div>
<div class="bc-d5-dd1">
<summaryAndComparisonOfForumInformation></summaryAndComparisonOfForumInformation>
<comparisonOfForumPostingTrends></comparisonOfForumPostingTrends>

@ -1,13 +1,13 @@
<!--
* @Author: your name
* @Date: 2021-10-15 17:33:28
* @LastEditTime: 2021-11-11 15:59:58
* @LastEditTime: 2021-11-12 10:02:53
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandComparison/brandEventComparison/index.vue
-->
<template>
<div class="bec-outter">
<div class="bec-outter" v-loading="load">
<v-label-div title="车型事件对比"> </v-label-div>
<div class="bec-inner">
<v-label-div title="渠道声量对比" :showLine="false" :eStyle="{ 'border-style': 'none' }">
@ -21,17 +21,24 @@
<div class="bec-one">
<v-echarts :opt="opt2"></v-echarts>
</div>
<eventBrandTonalDistribution></eventBrandTonalDistribution>
</div>
</template>
<script>
import { getSourcetypeC } from "@/api/BrandComparison/HotEvent.js";
import { getEventsSourceType0528 } from "@/api/ModelComparison";
import { getEventsSeriesNameC } from "@/api/ModelComparison";
import eventBrandTonalDistribution from "../eventBrandTonalDistribution"
import createOpt from "./opt";
import createOpt1 from "./opt1"
export default {
name: "brandEventComparison",
components: {
eventBrandTonalDistribution
},
data() {
return {
load: false,
opt1: {},
opt2: {},
form: {
@ -66,8 +73,10 @@ export default {
});
this.form.sBrand = brands.toString();
this.form.sSeriesName = models.toString();
this.getData();
this.getTypeData();
this.load = true;
Promise.all([this.getData(),this.getTypeData()]).then(() => {
this.load = false;
})
},
getData() {
return new Promise((resolve, reject) => {
@ -95,7 +104,7 @@ export default {
getTypeData() {
return new Promise((resolve, reject) => {
let obj = Object.assign({}, this.getCtime2, this.form);
getEventsSourceType0528(obj)
getEventsSeriesNameC(obj)
.then((res) => {
let data = res.data || [];
let brandList = [];
@ -103,7 +112,7 @@ export default {
e.Name = e.key;
brandList.push(e.key);
});
this.opt2 = createOpt(data, brandList);
this.opt2 = createOpt1(data, brandList);
resolve(data);
})
.catch(() => {

@ -1,7 +1,7 @@
/*
* @Author: your name
* @Date: 2021-10-15 15:15:27
* @LastEditTime: 2021-11-11 16:05:44
* @LastEditTime: 2021-11-11 17:17:31
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandComparison/channelDistribution/opt.js

@ -1,7 +1,7 @@
/*
* @Author: your name
* @Date: 2021-11-11 15:26:24
* @LastEditTime: 2021-11-11 15:27:33
* @LastEditTime: 2021-11-11 17:31:51
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /data-show/src/views/ModelComparison/brandEventComparison/opt1.js
@ -72,35 +72,36 @@ let colors = [new echarts.graphic.LinearGradient(0, 0, 0, 1, [
}
], false)]
function createData(dataList = []) {
/*series: [
{
name: '奥迪',
type: 'bar',
barGap: 0,
barWidth: 16,
emphasis: {
focus: 'series'
},
data: [320, 332, 301, 334, 390, 400]
},*/
let arr = [];
dataList.forEach(e => {
let o = {
name: e.key,
let o = {};
dataList.forEach(ele => {
let value = ele.value || [];
value.forEach(e => {
let a = []
if(o[e.key]) {
a = [...o[e.key]];
}
a.push(e.value);
o[e.key] = a;
})
})
for(let key in o) {
let o1 = {
name: key,
type: 'bar',
barWidth: 16,
barGap: '9%',
emphasis: {
focus: 'series'
},
data: e.value
data: o[key]
};
arr.push(o)
})
arr.push(o1)
}
return arr;
}
export default function createOpt(dataList = [],brandList = []) {
let info = createData(dataList);
let info = createData(dataList,brandList);
return {
grid: {
top: 56,
@ -111,7 +112,6 @@ export default function createOpt(dataList = [],brandList = []) {
},
color: colors,
legend: {
data: brandList,
textStyle: { //图例文字的样式
color: '#fff',
fontSize: 10
@ -143,7 +143,7 @@ export default function createOpt(dataList = [],brandList = []) {
color: "#fff",
},
},
data: ['新闻', '论坛', '微信', 'APP', '微博', "其他"]
data: brandList
}
],
yAxis: [

@ -1,30 +1,70 @@
<!--
* @Author: your name
* @Date: 2021-10-16 13:45:18
* @LastEditTime: 2021-10-16 13:49:34
* @LastEditTime: 2021-11-12 13:44:13
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandComparison/comparisonOfForumPostingTrends/index.vue
-->
<template>
<div class="cop-outter">
<v-label-div title="论坛发帖趋势对比" :showLine="false" :eStyle="{'border-style': 'none'}"/>
<v-label-div title="论坛发帖趋势对比" :showLine="false" :eStyle="{'border-style': 'none'}" />
<div class="cop-inner">
<v-echarts :opt="opt"></v-echarts>
<v-echarts :opt="opt"></v-echarts>
</div>
</div>
</template>
<script>
import createOpt from "./opt"
import { getCountTime0528C } from "@/api/ModelComparison";
import createOpt from "./opt";
export default {
name: "comparisonOfForumPostingTrends",
data() {
return {
opt: createOpt()
}
}
}
form: {
token: "",
sBrand: "",
sSeriesName: "",
iContrastType: 2,
},
opt: createOpt(),
};
},
created() {
this.initData();
},
methods: {
initData() {
this.form.token = this.getToken;
let arr = this.getMComparison;
let brands = [];
let models = [];
arr.forEach((ele) => {
brands.push(ele.brand);
models.push(ele.model);
});
this.form.sBrand = brands.toString();
this.form.sSeriesName = models.toString();
this.getData();
},
getData() {
let obj = Object.assign({}, this.getCtime2, this.form);
getCountTime0528C(obj).then((res) => {
let data = res.data || [];
let dx = [];
let ds = [];
data.forEach((ele) => {
let key = ele.key;
let value = ele.value;
dx.push(key);
ds.push(value);
});
this.opt = createOpt(dx, ds);
});
},
},
};
</script>
<style lang="less" scoped>

@ -1,17 +1,47 @@
/*
* @Author: your name
* @Date: 2021-10-12 10:11:24
* @LastEditTime: 2021-10-15 11:56:55
* @LastEditTime: 2021-11-12 13:43:39
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandInsight/titsopo/opt.js
*/
export default function createOpt() {
import { bigNumberTransform } from "@/utils/gol/dataTool"
function createData(ds = []) {
let testData = {}
ds.forEach(item => {
item.forEach(val => {
if (testData[val.key] === undefined) {
testData[val.key] = {
name: val.key,
type: 'line',
symbol: 'none',
areaStyle: {
opacity: 0.2
},
emphasis: {
focus: 'series'
},
data: [val.value]
}
} else {
testData[val.key].data.push(val.value)
}
})
})
let arr = [];
for(let key in testData) {
arr.push(testData[key])
}
return arr
}
export default function createOpt(dx = [], ds = []) {
let data = createData(ds);
return {
grid: {
left: 16,
right: 26,
bottom: 16,
left: 10,
right: '5%',
bottom: 10,
top: 52,
containLabel: true
},
@ -28,10 +58,13 @@ export default function createOpt() {
legend: {
icon: 'roundRect',
textStyle: { //图例文字的样式
color: '#fff'
color: '#fff',
fontSize: 10
},
y: 12,
x: 16
x: 16,
itemWidth: 12,
itemHeight: 12
},
xAxis: {
type: 'category',
@ -39,13 +72,19 @@ export default function createOpt() {
axisTick: {
show: false,
},
axisLabel: {
formatter: (value) => {
let str = value.substring(10, 16)
return str;
}
},
axisLine: {
show: false,
lineStyle: {
color: "#fff",
},
},
data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00']
data: dx
},
yAxis: {
type: 'value',
@ -55,6 +94,12 @@ export default function createOpt() {
color: "#fff",
},
},
axisLabel: {
formatter: (value) => {
let str = bigNumberTransform(value);
return str;
}
},
splitLine: {
lineStyle: {
type: "dashed", // y轴分割线类型
@ -62,86 +107,6 @@ export default function createOpt() {
},
},
},
series: [
{
name: '奥迪',
type: 'line',
stack: 'Total',
symbol: 'none',
areaStyle: {
opacity: 0.4
},
emphasis: {
focus: 'series'
},
data: [2000, 1600, 1000, 2200, 2300, 2100, 1900]
},
{
name: '宝马',
type: 'line',
stack: 'Total',
symbol: 'none',
areaStyle: {
opacity: 0.4
},
emphasis: {
focus: 'series'
},
data: [1000, 1100, 1300, 2000, 1800, 2100, 1600]
},
{
name: '奔驰',
type: 'line',
stack: 'Total',
symbol: 'none',
areaStyle: {
opacity: 0.4
},
emphasis: {
focus: 'series'
},
data: [1200, 1200, 1400, 2100, 1400, 1900, 2000]
},
{
name: '吉利',
type: 'line',
stack: 'Total',
symbol: 'none',
areaStyle: {
opacity: 0.4
},
emphasis: {
focus: 'series'
},
data: [1200, 1200, 1350, 1550, 1750, 1900, 2000]
},
{
name: '大众',
type: 'line',
stack: 'Total',
symbol: 'none',
areaStyle: {
opacity: 0.4
},
emphasis: {
focus: 'series'
},
data: [1260, 1280, 1390, 1570, 1790, 1950, 2020]
},
{
name: '别克',
type: 'line',
stack: 'Total',
symbol: 'none',
areaStyle: {
opacity: 0.4
},
emphasis: {
focus: 'series'
},
data: [1260, 1280, 1390, 1570, 1790, 1950, 2020]
},
]
series: data
}
}

@ -1,13 +1,13 @@
<!--
* @Author: your name
* @Date: 2021-10-16 10:22:21
* @LastEditTime: 2021-10-16 10:28:27
* @LastEditTime: 2021-11-12 10:06:29
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandComparison/comparisonOfTheNumberOfWeiboInteractions/index.vue
-->
<template>
<div class="cotn-outter">
<div class="cotn-outter" v-loading="load">
<v-label-div
title="微博互动人数对比"
:showLine="false"
@ -26,9 +26,12 @@ export default {
name: "comparisonOfTheNumberOfWeiboInteractions",
data() {
return {
load: false,
form: {
token: "",
sBrand: "",
sSeriesName: "",
iContrastType: 2
},
opt: {}
};
@ -39,17 +42,21 @@ export default {
methods: {
initData() {
this.form.token = this.getToken;
let arr = this.getBComparison;
let arr = this.getMComparison;
let brands = [];
let models = [];
arr.forEach((ele) => {
brands.push(ele.name);
brands.push(ele.brand);
models.push(ele.model);
});
this.form.sBrand = brands.toString();
this.form.sSeriesName = models.toString();
this.getData();
},
getData() {
return new Promise((resolve, reject) => {
let obj = Object.assign({}, this.getCtime2, this.form);
this.load = true;
getInteractCount0528C(obj)
.then((res) => {
let data = res.data || [];
@ -59,7 +66,8 @@ export default {
dx.push(ele.key);
ds.push(ele.value);
});
this.opt = createSingleColumnar(dx, ds);
this.opt = createSingleColumnar(dx, ds, '#54BF93');
this.load = false;
resolve(data);
})
.catch(() => {

@ -1,13 +1,13 @@
<!--
* @Author: your name
* @Date: 2021-10-16 10:01:52
* @LastEditTime: 2021-10-16 10:20:07
* @LastEditTime: 2021-11-12 10:05:17
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandComparison/comparisonOfWeiboInformation/index.vue
-->
<template>
<div class="cowi-outter">
<div class="cowi-outter" v-loading="load">
<v-label-div
title="微博信息量对比"
:showLine="false"
@ -26,9 +26,12 @@ export default {
name: "comparisonOfWeiboInformation",
data() {
return {
load: false,
form: {
token: "",
sBrand: "",
sSeriesName: "",
iContrastType: 2
},
opt: {}
};
@ -39,16 +42,20 @@ export default {
methods: {
initData() {
this.form.token = this.getToken;
let arr = this.getBComparison;
let arr = this.getMComparison;
let brands = [];
let models = [];
arr.forEach((ele) => {
brands.push(ele.name);
brands.push(ele.brand);
models.push(ele.model);
});
this.form.sBrand = brands.toString();
this.form.sSeriesName = models.toString();
this.getData();
},
getData() {
return new Promise((resolve, reject) => {
this.load = true;
let obj = Object.assign({}, this.getCtime2, this.form);
getContrastCount0528C(obj)
.then((res) => {
@ -60,6 +67,7 @@ export default {
ds.push(ele.value)
})
this.opt = createSingleColumnar(dx,ds);
this.load = false;
resolve(data);
})
.catch(() => {

@ -0,0 +1,133 @@
<!--
* @Author: your name
* @Date: 2021-10-15 13:27:50
* @LastEditTime: 2021-11-11 17:49:37
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandComparison/brandTonalDistribution/index.vue
-->
<template>
<div class="bd-outter" v-loading="load">
<v-label-div title="整体调性对比" :showLine="false" :eStyle="{ 'border-style': 'none' }"> </v-label-div>
<div class="bd-d1">
<div class="dd1" style="margin-left: 16px">
<span class="s1"></span><span class="s2">正面</span>
</div>
<div class="dd1" style="margin-left: 24px">
<span class="s1" :style="{ background: '#54BF93' }"></span
><span class="s2">中性</span>
</div>
<div class="dd1" style="margin-left: 24px">
<span class="s1" :style="{ background: '#CC9D12' }"></span
><span class="s2">负面</span>
</div>
</div>
<div class="bd-inner">
<roundata
v-for="(item,index) in list"
:key="index"
:title="item.key"
:color="colors[index]"
:style="index === 0 ? 'margin-left: 4rem': 'margin-left: 7.5rem'"
:data="item.value"
></roundata>
</div>
</div>
</template>
<script>
import { getEventAffectionsC } from "@/api/ModelComparison";
import roundata from "./roundata";
export default {
name: "eventBrandTonalDistribution",
components: {
roundata,
},
data() {
return {
load: false,
form: {
token: "",
sBrand: "",
sSeriesName: "",
iContrastType: 2
},
colors: ['#3373CC', '#63AECC', '#54BF93', '#CC9D12', '#CC7733', '#CC5B41'],
list: [
]
};
},
created() {
this.initData();
},
methods: {
initData() {
this.form.token = this.getToken;
let arr = this.getMComparison;
let brands = [];
let models = [];
arr.forEach(ele => {
brands.push(ele.brand);
models.push(ele.model);
});
this.form.sBrand = brands.toString();
this.form.sSeriesName = models.toString();
this.getData();
},
//
getData() {
return new Promise((resolve, reject) => {
this.load = true;
let obj = Object.assign({}, this.getCtime2, this.form);
getEventAffectionsC(obj).then((res) => {
let data = res.data || [];
this.list = data;
this.load = false;
resolve(data)
}).catch(() => {
reject(false)
});
});
},
},
};
</script>
<style lang="less" scoped>
.bd-outter {
width: 100%;
height: 460px;
margin-top: 16px;
.bd-d1 {
width: 100%;
display: flex;
height: 36px;
justify-content: flex-start;
align-items: center;
.dd1 {
display: flex;
justify-content: flex-start;
align-items: center;
}
.s1 {
display: inline-block;
width: 12px;
height: 12px;
background: #3373cc;
}
.s2 {
display: inline-block;
font-size: 12px;
color: #fff;
margin-left: 10px;
}
}
.bd-inner {
width: 100%;
height: calc(100% - 48px);
display: flex;
justify-content: flex-start;
align-items: center;
}
}
</style>

@ -0,0 +1,70 @@
<!--
* @Author: your name
* @Date: 2021-10-15 13:41:17
* @LastEditTime: 2021-11-11 17:45:37
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandComparison/brandTonalDistribution/roundata/index.vue
-->
<template>
<div class="bd-item-round">
<div class="bd-item-r-cav">
<v-echarts :opt="opt"></v-echarts>
</div>
<span class="bd-item-r-c-s1" :style="{color: color}">{{title}}</span>
</div>
</template>
<script>
import createOpt from "./opt";
export default {
name: "roundata",
props: {
title: {
type: String,
default: "",
},
color: {
type: String,
default: "",
},
data: {
type: Array,
default: () => {
return []
}
}
},
watch: {
data: {
handler(val) {
this.opt = createOpt(val)
},
immediate: true
}
},
data() {
return {
};
},
methods: {
},
};
</script>
<style lang="less" scoped>
.bd-item-round {
display: inline-block;
.bd-item-r-cav {
width: 193px;
height: 206px;
}
.bd-item-r-c-s1 {
display: block;
text-align: center;
color: #fff;
font-size: 18px;
margin-top: 30px;
}
}
</style>

@ -0,0 +1,87 @@
/*
* @Author: your name
* @Date: 2021-10-12 14:33:51
* @LastEditTime: 2021-11-11 17:47:44
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandInsight/weiboKol/opt.js
*/
import * as echarts from "echarts";
function createData(obj = []) {
let arr = [];
obj.forEach(ele => {
let color = "";
if(ele.key === '正面') {
color = "#3373CC"
} else if(ele.key === '负面') {
color = "#b38b14"
} else {
color = "#54BF93"
}
let o = {
value: ele.value,
name: ele.key,
itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数给第一个设置1第四个设置0 ,就是水平渐变
//给第一个设置0第四个设置1就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: color
}])}
}
arr.push(o)
})
return arr
}
export default function createOpt(obj = {}) {
let data = createData(obj)
return {
series: [
{
name: 'Access From0',
type: 'pie',
radius: ['70%', '92%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center',
lineHeight: 28
},
emphasis: {
label: {
show: true,
fontSize: '18',
color: "#ffff",
fontWeight: 'bold',
formatter: function(p) {
return `${p.data.name}\n${p.percent}%\n${p.data.value}`
}
}
},
labelLine: {
show: false
},
data: data
},
{
name: 'Access From1',
type: 'pie',
radius: ['96%', '100%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
labelLine: {
show: false
},
center: ['50%', '50%'],//边框位置
data: data
}
]
}
}

@ -1,39 +1,82 @@
<!--
* @Author: your name
* @Date: 2021-10-16 10:49:09
* @LastEditTime: 2021-10-16 13:55:52
* @LastEditTime: 2021-11-12 13:59:50
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandComparison/weiboTuneComparison/index.vue
-->
<template>
<div class="wtc-outter">
<v-label-div title="论坛调性对比" :showLine="false" :eStyle="{'border-style': 'none'}">
</v-label-div>
<div class="wtc-d1">
<div class="wtc-outter" v-loading="load">
<v-label-div title="论坛调性对比" :showLine="false" :eStyle="{'border-style': 'none'}">
</v-label-div>
<div class="wtc-d1">
<div class="dd1" style="margin-left: 16px"><span class="s1"></span><span class="s2">正面</span></div>
<div class="dd1" style="margin-left: 24px;"><span class="s1" :style="{background: '#54BF93'}"></span><span class="s2">中性</span></div>
<div class="dd1" style="margin-left: 24px;"><span class="s1" :style="{background: '#CC9D12'}"></span><span class="s2">负面</span></div>
</div>
<div class="wtc-inner">
<roundata title="奥迪" color="#3373CC" style="margin-left: 46px"></roundata>
<roundata title="宝马" color="#63AECC" style="margin-left: 110px"></roundata>
<roundata title="奔驰" color="#54BF93" style="margin-left: 110px"></roundata>
<roundata title="吉利" color="#CC9D12" style="margin-left: 110px"></roundata>
<roundata title="大众" color="#CC7733" style="margin-left: 110px"></roundata>
<roundata title="别克" color="#CC5B41" style="margin-left: 110px"></roundata>
<roundata v-for="(item,index) in list" :key="index" :title="item.Name" :color="colors[index]" :style="index === 0 ? 'margin-left: 4rem': 'margin-left: 7.5rem'" :data="item.Data"></roundata>
</div>
</div>
</template>
<script>
import { getAffectionsC } from "@/api/ModelComparison";
import roundata from "./roundata";
export default {
name: "forumTonalComparison",
components: {
roundata
}
}
roundata,
},
data() {
return {
load: false,
form: {
token: "",
sBrand: "",
sSeriesName: "",
iContrastType: 2,
},
colors: [
"#3373CC",
"#63AECC",
"#54BF93",
"#CC9D12",
"#CC7733",
"#CC5B41",
],
list: [],
};
},
created() {
this.initData();
},
methods: {
initData() {
this.form.token = this.getToken;
let arr = this.getMComparison;
let brands = [];
let models = [];
arr.forEach((ele) => {
brands.push(ele.brand);
models.push(ele.model);
});
this.form.sBrand = brands.toString();
this.form.sSeriesName = models.toString();
this.getData();
},
getData() {
let obj = Object.assign({}, this.getCtime2, this.form);
this.load = true;
getAffectionsC(obj).then((res) => {
let data = res.data || [];
this.list = data;
this.load = false;
});
},
},
};
</script>
<style lang="less" scoped>

@ -1,7 +1,7 @@
<!--
* @Author: your name
* @Date: 2021-10-15 13:41:17
* @LastEditTime: 2021-11-05 13:31:48
* @LastEditTime: 2021-11-12 13:54:48
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandComparison/brandTonalDistribution/roundata/index.vue
@ -27,14 +27,26 @@ export default {
type: String,
default: "",
},
data: {
type: Object,
default: () => {}
}
},
watch: {
data: {
handler(val) {
this.opt = createOpt(val)
},
immediate: true
}
},
data() {
return {
opt: createOpt(),
};
},
methods: {
},
};
</script>

@ -1,13 +1,46 @@
/*
* @Author: your name
* @Date: 2021-10-12 14:33:51
* @LastEditTime: 2021-10-15 14:49:19
* @LastEditTime: 2021-11-12 13:55:00
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandInsight/weiboKol/opt.js
*/
import * as echarts from "echarts";
export default function createOpt() {
function createData(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: [
{
@ -18,52 +51,23 @@ export default function createOpt() {
label: {
show: false,
position: 'center',
lineHeight: 40
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}`
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'
}])} },
],
data: data
},
{
name: 'Access From1',
@ -78,37 +82,7 @@ export default function createOpt() {
show: false
},
center: ['50%', '50%'],//边框位置
data: [
{ value: 2000, name: '正面', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数给第一个设置1第四个设置0 ,就是水平渐变
//给第一个设置0第四个设置1就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: '#3373CC'
}])} },
{ value: 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'
}])} },
],
data: data
}
]
}

@ -1,7 +1,7 @@
/*
* @Author: your name
* @Date: 2021-10-15 15:15:27
* @LastEditTime: 2021-10-15 17:44:34
* @LastEditTime: 2021-11-12 09:59:54
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandComparison/channelDistribution/opt.js
@ -10,9 +10,9 @@ export default function createOpt() {
return {
grid: {
top: "56px",
left: "16px",
right: "28px",
bottom: "16px",
left: 10,
right: "5%",
bottom: 10,
containLabel: true,
},
legend: {

@ -1,7 +1,7 @@
/*
* @Author: your name
* @Date: 2021-10-09 11:01:19
* @LastEditTime: 2021-11-11 16:41:48
* @LastEditTime: 2021-11-11 16:55:43
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/Index/spreadTheSound/opt.js
@ -103,7 +103,6 @@ function createData(dataList = [], dx=[]) {
}
export default function createOpt(dx = [], ds = []) {
const data = createData(ds,dx);
console.log(data)
return {
grid: {
left: 10,

@ -1,42 +1,42 @@
<!--
* @Author: your name
* @Date: 2021-10-16 13:14:28
* @LastEditTime: 2021-10-16 13:44:02
* @LastEditTime: 2021-11-12 13:24:10
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandComparison/summaryAndComparisonOfForumInformation/index.vue
-->
<template>
<div class="saco-outter">
<div class="saco-outter" v-loading="load">
<v-label-div title="论坛信息概括对比" :showLine="false" :eStyle="{'border-style': 'none'}"/>
<div class="saco-item" v-for="(item,index) in list" :key="index">
<span class="s1">{{item.name}}</span>
<span class="s1">{{item.key}}</span>
<div class="d1">
<img class="d1-m1" src="../../../assets/images/BrandInsight/ic_lt.png">
<div class="d1-d1">
<span class="ss1">论坛信息量</span>
<span class="ss2">{{item.a}}</span>
<span class="ss2">{{item.Count}}</span>
</div>
</div>
<div class="d1">
<img class="d1-m1" src="../../../assets/images/BrandInsight/ic_hdrs.png">
<div class="d1-d1">
<span class="ss1">互动人数</span>
<span class="ss2">{{item.b}}</span>
<span class="ss2">{{item.interactCount}}</span>
</div>
</div>
<div class="d1">
<img class="d1-m1" src="../../../assets/images/BrandInsight/ic_ztl.png">
<div class="d1-d1">
<span class="ss1">论坛主贴量</span>
<span class="ss2">{{item.c}}</span>
<span class="ss2">{{item.zhutieCount}}</span>
</div>
</div>
<div class="d1">
<img class="d1-m1" src="../../../assets/images/BrandInsight/ic_pll.png">
<div class="d1-d1">
<span class="ss1">论坛评论量</span>
<span class="ss2">{{item.d}}</span>
<span class="ss2">{{item.commentsSum}}</span>
</div>
</div>
</div>
@ -44,55 +44,49 @@
</template>
<script>
import {getCount0528C} from "@/api/ModelComparison"
export default {
name: "summaryAndComparisonOfForumInformation",
data() {
return {
load: false,
form: {
token: "",
sBrand: "",
sSeriesName: "",
iContrastType: 2,
},
list: [
{
name: '奥迪',
a: 5869,
b: 2345,
c: 45678,
d: 12345
},
{
name: '宝马',
a: 5869,
b: 2345,
c: 45678,
d: 12345
},
{
name: '奔驰',
a: 5869,
b: 2345,
c: 45678,
d: 12345
},
{
name: '吉利',
a: 5869,
b: 2345,
c: 45678,
d: 12345
},
{
name: '大众',
a: 5869,
b: 2345,
c: 45678,
d: 12345
},
{
name: '别克',
a: 5869,
b: 2345,
c: 45678,
d: 12345
}
]
}
},
created() {
this.initData()
},
methods: {
initData() {
this.form.token = this.getToken;
let arr = this.getMComparison || [];
let brands = [];
let models = [];
arr.forEach((ele) => {
brands.push(ele.brand);
models.push(ele.model);
});
this.form.sBrand = brands.toString();
this.form.sSeriesName = models.toString();
this.getData();
},
getData() {
let obj = Object.assign({}, this.getCtime2, this.form);
this.load = true;
getCount0528C(obj).then(res => {
let data = res.data;
this.list = data;
this.load = false;
})
}
}
}
</script>

@ -1,31 +1,25 @@
<!--
* @Author: your name
* @Date: 2021-10-14 11:25:20
* @LastEditTime: 2021-10-16 11:31:16
* @LastEditTime: 2021-11-12 11:06:40
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/WeiboDetails/weiboUserActiveArea/index.vue
-->
<template>
<div class="wua-outter">
<v-label-div
title="用户区域分布"
:showLine="false"
:eStyle="{ 'border-style': 'none' }"
>
<v-tab-group
:btns="['奥迪', '宝马', '奔驰', '吉利', '大众', '别克']"
></v-tab-group>
</v-label-div>
<div class="wua-inner">
<div class="d1">
<v-echarts :opt="opt1"></v-echarts>
</div>
<div class="d2">
<v-echars-map :opt="opt2"></v-echars-map>
</div>
<div class="wua-outter" v-loading="load">
<v-label-div title="用户区域分布" :showLine="false" :eStyle="{ 'border-style': 'none' }">
<v-tab-group :btns="tabs" @change="handlerTab"></v-tab-group>
</v-label-div>
<div class="wua-inner">
<div class="d1">
<v-echarts :opt="opt1"></v-echarts>
</div>
<div class="d2">
<v-echars-map :opt="opt2"></v-echars-map>
</div>
</div>
</div>
</div>
</template>
<script>
@ -33,66 +27,103 @@ import { getRegionWeiBoC } from "@/api/BrandComparison/BrandWeibo.js";
import createOptD1 from "./opt1";
import createOptD2 from "./opt2";
export default {
name: "userAreaDistribution",
data() {
return {
opt1: createOptD1(),
opt2: createOptD2(),
form: {
token: "",
sBrand: "",
},
};
},
created() {
this.initData();
},
methods: {
initData() {
this.form.token = this.getToken;
let arr = this.getBComparison;
let brands = [];
arr.forEach((ele) => {
brands.push(ele.name);
});
this.form.sBrand = brands.toString();
this.getData();
name: "userAreaDistribution",
data() {
return {
load: false,
opt1: createOptD1(),
opt2: createOptD2(),
tabs: [],
form: {
token: "",
sBrand: "",
sSeriesName: "",
iContrastType: 2,
},
list: []
};
},
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);
});
});
created() {
this.initData();
},
methods: {
initData() {
this.form.token = this.getToken;
let arr = this.getMComparison || [];
let a = [];
arr.forEach((ele) => {
a.push(ele.model);
});
this.tabs = a;
let brands = [];
let models = [];
arr.forEach((ele) => {
brands.push(ele.brand);
models.push(ele.model);
});
this.form.sBrand = brands.toString();
this.form.sSeriesName = models.toString();
this.getData();
},
getData() {
return new Promise((resolve, reject) => {
let obj = Object.assign({}, this.getCtime2, this.form);
this.load = true;
getRegionWeiBoC(obj)
.then((res) => {
let data = res.data || [];
this.list = data;
this.handlerTab(0);
this.load = false;
resolve(data);
})
.catch(() => {
reject(false);
});
});
},
handlerTab(n) {
let model = this.tabs[n];
let row = this.list.find(ele => ele.Name === model);
let obj = row.Data || [];
let dx = [];
let ds = [];
let provArr = [];
for(let key in obj) {
dx.push(key);
ds.push(obj[key]);
let o = {
name: key.replace('省', ''),
value: obj[key]
}
provArr.push(o)
}
this.opt1 = createOptD1(dx, ds);
this.opt2 = createOptD2(provArr);
}
},
},
};
</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>

@ -3,18 +3,18 @@
/*
* @Author: your name
* @Date: 2021-10-09 12:38:34
* @LastEditTime: 2021-10-14 11:48:19
* @LastEditTime: 2021-11-12 11:05:53
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/Index/tailInsight/opt.js
*/
import * as echarts from "echarts";
export default function createOptD1() {
export default function createOptD1(dx = [], ds = []) {
return {
grid: {
left: '4%',
right: '4%',
bottom: '4%',
left: 10,
right: '5%',
bottom: 10,
top: "1%",
containLabel: true
},
@ -45,7 +45,7 @@ export default function createOptD1() {
},
yAxis: {
type: 'category',
data: ['山西省', '浙江省', '北京市', '江西省', '江苏省', '福建省', '山东省', '天津市'],
data: dx,
axisTick: {
show: false,
},
@ -55,13 +55,14 @@ export default function createOptD1() {
color: "#fff",
},
},
inverse: true
},
series: [
{
name: '2011',
name: '用户区域分布',
type: 'bar',
barWidth: 24,
data: [500, 1000, 2220, 3000, 4000, 3000,2200, 2600],
barWidth: 16,
data: ds,
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: '#010B19'

@ -1,21 +1,12 @@
/*
* @Author: your name
* @Date: 2021-10-14 11:53:16
* @LastEditTime: 2021-10-14 15:51:30
* @LastEditTime: 2021-11-12 11:04:19
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/WeiboDetails/weiboUserActiveArea/opt2.js
*/
const ini_data = [];//初始化省份数组
const provArr = ['河北', '河南', '云南', '辽宁', '黑龙江', '湖南', '安徽', '山东'];
//正则省份,将省与市的字眼去掉,框架不识别
for (var i = 0; i < provArr.length; i++) {
var str = provArr[i];
var re = /省|市/g; //全局匹配
var str2 = { name: str.replace(re, ''), value: 5 };//拼接对象数组
ini_data.push(str2);
}
export default function createOptD2() {
export default function createOptD2(provArr = []) {
return {
tooltip: {
trigger: "item",
@ -59,7 +50,7 @@ export default function createOptD2() {
},
series: [
{
name: "微博区域",
name: "用户区域分布",
type: "map",
mapType: "china",
roam: false,
@ -95,38 +86,7 @@ export default function createOptD2() {
// areaColor: '#3edffe'
// }
// },
data: [
{
name: "河北省",
value: 1000,
// selected: true,
},
{
name: "浙江省",
value: 1100,
// selected: true
},
{
name: "山东省",
value: 1200,
// selected: true
},
{
name: "山西省",
value: 1300,
// selected: true
},
{
name: "上海市",
value: 1400,
// selected: true
},
{
name: "江苏省",
value: 1500,
// selected: true
}
]
data: provArr
}
]

@ -1,13 +1,13 @@
<!--
* @Author: your name
* @Date: 2021-10-16 10:30:29
* @LastEditTime: 2021-10-16 10:41:39
* @LastEditTime: 2021-11-12 10:27:57
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandComparison/weiboBigVComparison/index.vue
-->
<template>
<div class="wbc-outter">
<div class="wbc-outter" v-loading="load">
<v-label-div
title="微博大V对比"
:showLine="false"
@ -26,9 +26,12 @@ export default {
name: "weiboBigVComparison",
data() {
return {
load: false,
form: {
token: "",
sBrand: "",
sSeriesName: "",
iContrastType: 2
},
opt: {}
};
@ -39,21 +42,26 @@ export default {
methods: {
initData() {
this.form.token = this.getToken;
let arr = this.getBComparison;
let arr = this.getMComparison;
let brands = [];
let models = [];
arr.forEach((ele) => {
brands.push(ele.name);
brands.push(ele.brand);
models.push(ele.model);
});
this.form.sBrand = brands.toString();
this.form.sSeriesName = models.toString();
this.getData();
},
getData() {
return new Promise((resolve, reject) => {
let obj = Object.assign({}, this.getCtime2, this.form);
this.load = true;
getBoauthen0528C(obj)
.then((res) => {
let data = res.data || [];
this.opt = createOpt(data);
this.load = false;
resolve(data);
})
.catch(() => {

@ -1,24 +1,67 @@
/*
* @Author: your name
* @Date: 2021-10-09 11:01:19
* @LastEditTime: 2021-10-16 10:42:52
* @LastEditTime: 2021-11-12 09:41:34
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/Index/spreadTheSound/opt.js
*/
/*
series: [
{
name: '奥迪',
type: 'bar',
stack: 'total',
barWidth: 24,
emphasis: {
focus: 'series'
},
data: [320, 302, 301, 334, 390]
},
*/
import * as echarts from "echarts";
let colors = [new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#3373CC'
},
{
offset: 1,
color: '#071a32'
}
], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#63AECC'
},
{
offset: 1,
color: '#071a32'
}
], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#54BF93'
},
{
offset: 1,
color: '#071a32'
}
], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#CC9D12'
},
{
offset: 1,
color: '#071a32'
}
], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#CC7733'
},
{
offset: 1,
color: '#071a32'
}
], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#CC5B41'
},
{
offset: 1,
color: '#071a32'
}
], false)]
function createData(dataList = []) {
let arr = [];
dataList.forEach(ele => {
@ -42,12 +85,13 @@ export default function createOpt(dataList = []) {
let info = createData(dataList);
return {
grid: {
left: 16,
right: 16,
bottom: 16,
left: 10,
right: '5%',
bottom: 10,
top: 56,
containLabel: true
},
color: colors,
tooltip: {
trigger: "axis",
backgroundColor: "#08182F",
@ -60,10 +104,13 @@ export default function createOpt(dataList = []) {
},
legend: {
textStyle: { //图例文字的样式
color: '#fff'
color: '#fff',
fontSize: 10
},
y: 10,
x: 16
x: 16,
itemWidth: 12,
itemHeight: 12
},
xAxis: {
type: 'category',

@ -1,13 +1,13 @@
<!--
* @Author: your name
* @Date: 2021-10-15 15:58:57
* @LastEditTime: 2021-10-16 11:25:20
* @LastEditTime: 2021-11-12 10:34:55
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandComparison/brandCommunicationTOPMedia/index.vue
-->
<template>
<div class="bcm-outter">
<div class="bcm-outter" v-loading="load">
<v-label-div
title="微博内容方向对比"
:showLine="false"
@ -40,6 +40,7 @@ export default {
},
data() {
return {
load: false,
colors: [
"#3373CC",
"#63AECC",
@ -51,6 +52,8 @@ export default {
form: {
token: "",
sBrand: "",
sSeriesName: "",
iContrastType: 2
},
sourceData: [],
};
@ -61,17 +64,21 @@ export default {
methods: {
initData() {
this.form.token = this.getToken;
let arr = this.getBComparison;
let arr = this.getMComparison;
let brands = [];
let models = [];
arr.forEach((ele) => {
brands.push(ele.name);
brands.push(ele.brand);
models.push(ele.model);
});
this.form.sBrand = brands.toString();
this.form.sSeriesName = models.toString();
this.getData();
},
getData() {
return new Promise((resolve, reject) => {
let obj = Object.assign({}, this.getCtime2, this.form);
this.load = true;
getDirect0528C(obj)
.then((res) => {
let data = res.data || [];
@ -92,6 +99,7 @@ export default {
}
});
this.sourceData = showData;
this.load = false;
resolve(data);
})
.catch(() => {

@ -1,7 +1,7 @@
<!--
* @Author: your name
* @Date: 2021-10-08 16:44:08
* @LastEditTime: 2021-10-15 16:51:59
* @LastEditTime: 2021-11-12 10:37:19
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/components/v-ranking/index.vue
@ -136,7 +136,7 @@ export default {
text-align: center;
line-height: 40px;
.s1 {
color: #ffffff;
color: #9ba4af;
font-size: 16px;
line-height: 40px;
font-family: Bebas;

@ -1,13 +1,13 @@
<!--
* @Author: your name
* @Date: 2021-10-16 10:49:09
* @LastEditTime: 2021-11-05 13:45:20
* @LastEditTime: 2021-11-12 10:31:20
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandComparison/weiboTuneComparison/index.vue
-->
<template>
<div class="wtc-outter">
<div class="wtc-outter" v-loading="load">
<v-label-div
title="微博调性对比"
:showLine="false"
@ -47,9 +47,12 @@ export default {
name: "weiboTuneComparison",
data() {
return {
load: false,
form: {
token: "",
sBrand: "",
sSeriesName: "",
iContrastType: 2
},
colors: ["#3373CC","#63AECC","#54BF93","#CC9D12","#CC7733","#CC5B41"],
dataSource: []
@ -65,21 +68,26 @@ export default {
methods: {
initData() {
this.form.token = this.getToken;
let arr = this.getBComparison;
let arr = this.getMComparison;
let brands = [];
let models = [];
arr.forEach((ele) => {
brands.push(ele.name);
brands.push(ele.brand);
models.push(ele.model);
});
this.form.sBrand = brands.toString();
this.form.sSeriesName = models.toString();
this.getData();
},
getData() {
return new Promise((resolve, reject) => {
let obj = Object.assign({}, this.getCtime2, this.form);
this.load = true;
getAffectionsC(obj)
.then((res) => {
let data = res.data || [];
this.dataSource = data;
this.load = false;
resolve(data);
})
.catch(() => {

@ -1,15 +1,15 @@
<!--
* @Author: your name
* @Date: 2021-10-16 11:36:20
* @LastEditTime: 2021-10-16 12:01:38
* @LastEditTime: 2021-11-12 13:24:39
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandComparison/weiboUserPortrait/index.vue
-->
<template>
<div class="wup-outter">
<div class="wup-outter" v-loading="load">
<v-label-div title="微博用户画像" :showLine="false" :eStyle="{'border-style': 'none'}">
<v-tab-group :btns="['奥迪','宝马','奔驰','吉利','大众','别克']"></v-tab-group>
<v-tab-group :btns="tabs" @change="handlerTab"></v-tab-group>
</v-label-div>
<div class="wup-inner">
<div class="d1">
@ -17,9 +17,7 @@
<v-echarts :opt="opt1"></v-echarts>
</div>
<div class="dd2">
<v-label-ctx label="男性" cont="2200" percentage="25%" color="#3373CC" :eStyle="{ height: '122px' }"></v-label-ctx>
<v-label-ctx label="女性" cont="2200" percentage="25%" color="#63AECC" :eStyle="{ height: '122px' }"></v-label-ctx>
<v-label-ctx label="未知" cont="2200" percentage="25%" color="#54BF93 " :eStyle="{ height: '122px' }"></v-label-ctx>
<v-label-ctx v-for="(item,index) in sexArr" :key="index" :label="item.key" :color="item.color" :cont="item.value" :percentage="(item.value / total1 * 100).toFixed(2) +'%'" :eStyle="{ height: '7.7rem' }"></v-label-ctx>
</div>
</div>
<div class="d1">
@ -29,9 +27,7 @@
</v-echarts>
</div>
<div class="dd2" style="margin-right: 16px">
<v-label-ctx label="已认证" cont="2200" percentage="25%" color="#3373CC" :eStyle="{ height: '122px' }"></v-label-ctx>
<v-label-ctx label="未认证" cont="2200" percentage="25%" color="#63AECC" :eStyle="{ height: '122px' }"></v-label-ctx>
<v-label-ctx label="未知" cont="2200" percentage="25%" color="#54BF93 " :eStyle="{ height: '122px' }"></v-label-ctx>
<v-label-ctx v-for="(item,index) in attArr" :key="index" :label="item.key" :color="item.color" :cont="item.value" :percentage="(item.value / total1 * 100).toFixed(2) +'%'" :eStyle="{ height: '7.7rem' }"></v-label-ctx>
</div>
</div>
</div>
@ -41,14 +37,119 @@
<script>
import createOpt1 from "./opt1";
import createOpt2 from "./opt2";
import { getSexMergeWeiBoC } from "@/api/ModelComparison";
export default {
name: "weiboUserPortrait",
data() {
return {
load: false,
form: {
token: "",
sBrand: "",
sSeriesName: "",
iContrastType: 2,
},
tabs: [],
list: [],
total1: 0,
total2: 0,
sexArr: [],
attArr: [],
opt1: createOpt1(),
opt2: createOpt2(),
};
},
created() {
this.initData();
},
methods: {
initData() {
this.form.token = this.getToken;
let arr = this.getMComparison || [];
let a = [];
arr.forEach((ele) => {
a.push(ele.model);
});
this.tabs = a;
let brands = [];
let models = [];
arr.forEach((ele) => {
brands.push(ele.brand);
models.push(ele.model);
});
this.form.sBrand = brands.toString();
this.form.sSeriesName = models.toString();
this.getData();
},
getData() {
return new Promise((resolve, reject) => {
let obj = Object.assign({}, this.getCtime2, this.form);
this.load = true;
getSexMergeWeiBoC(obj)
.then((res) => {
let data = res.data;
this.list = data;
this.handlerTab(0);
this.load = false;
resolve(data);
})
.catch(() => {
reject(false);
});
});
},
handlerTab(n) {
let name = this.tabs[n];
let row = this.list.find((ele) => ele.Name === name);
let Data = row.Data;
let sex = Data.sex || {};
let attestation = Data.attestation || {};
let sexArr = [];
let attArr = [];
let total1 = 0;
let total2 = 0;
for (let key in sex) {
let color = "";
if (key === "男") {
color = "#3373CC";
} else if (key === "未设性别") {
color = "#54BF93";
} else {
color = "#CC9D12";
}
let obj = {
key: key,
value: sex[key],
color: color,
};
total1 += sex[key] * 1;
sexArr.push(obj);
}
for (let key in attestation) {
let color = "";
if (key === "普通认证") {
color = "#3373CC";
} else if (key === "机构认证") {
color = "#CC9D12";
} else {
color = "#54BF93";
}
let obj = {
key: key,
value: attestation[key],
color: color,
};
total2 += attestation[key] * 1;
attArr.push(obj);
}
this.total1 = total1;
this.total2 = total2;
this.sexArr = sexArr;
this.attArr = attArr;
this.opt1 = createOpt1(sexArr);
this.opt2 = createOpt2(attArr);
},
},
};
</script>

@ -1,114 +1,89 @@
/*
* @Author: your name
* @Date: 2021-10-12 15:14:58
* @LastEditTime: 2021-10-14 10:43:47
* @LastEditTime: 2021-11-12 12:04:00
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandInsight/weiboPortraits/opt.js
*/
import * as echarts from "echarts";
export default function createOpt1() {
return {
series: [
{
name: 'Access From0',
type: 'pie',
radius: ['63%', '77%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center',
fontSize: '40',
color: "#ffff",
function dataVal(ds = []) {
let arr = []
ds.forEach(ele => {
let color = "";
if(ele.key === '男') {
color = '#3373CC'
} else if(ele.key === '未设性别') {
color = '#54BF93'
} else {
color = '#CC9D12'
}
let obj = {
value: ele.value,
name: ele.key,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数给第一个设置1第四个设置0 ,就是水平渐变
//给第一个设置0第四个设置1就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: color
}])
}
}
arr.push(obj);
})
return arr;
}
export default function createOpt1(ds = []) {
let data = dataVal(ds);
return {
series: [
{
name: 'Access From0',
type: 'pie',
radius: ['63%', '77%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center',
color: "#ffff",
lineHeight: 28
},
emphasis: {
label: {
show: true,
fontSize: '18',
color: "#ffff",
formatter: (p) => {
return `${p.data.name}\n${p.percent}%\n${p.data.value}`
},
emphasis: {
label: {
show: true,
fontSize: '40',
color: "#ffff",
formatter: (p)=>{
return p.data.name + '\n' + p.data.value;
},
}
},
labelLine: {
show: false
},
data: [
{ value: 2200, 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: 2200, name: '女性', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数给第一个设置1第四个设置0 ,就是水平渐变
//给第一个设置0第四个设置1就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: '#CC9D12'
}])} },
{ value: 2200, name: '未知', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数给第一个设置1第四个设置0 ,就是水平渐变
//给第一个设置0第四个设置1就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: '#54BF93'
}])} },
],
}
},
labelLine: {
show: false
},
data: data,
},
{
name: 'Access From1',
type: 'pie',
radius: ['80%', '84%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
labelLine: {
show: false
},
center: ['50%', '50%'],//边框位置
data: [
{ value: 2200, 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: 2200, name: '女性', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数给第一个设置1第四个设置0 ,就是水平渐变
//给第一个设置0第四个设置1就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: '#CC9D12'
}])} },
{ value: 2200, name: '未知', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数给第一个设置1第四个设置0 ,就是水平渐变
//给第一个设置0第四个设置1就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: '#54BF93'
}])} },
],
}
]
}
},
{
name: 'Access From1',
type: 'pie',
radius: ['80%', '84%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
labelLine: {
show: false
},
center: ['50%', '50%'],//边框位置
data: data,
}
]
}
}

@ -1,114 +1,89 @@
/*
* @Author: your name
* @Date: 2021-10-12 15:14:58
* @LastEditTime: 2021-10-16 11:53:25
* @LastEditTime: 2021-11-12 12:04:49
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandInsight/weiboPortraits/opt.js
*/
import * as echarts from "echarts";
export default function createOpt2() {
return {
series: [
{
name: 'Access From0',
type: 'pie',
radius: ['63%', '77%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center',
fontSize: '40',
color: "#ffff",
function dataVal(ds = []) {
let arr = []
ds.forEach(ele => {
let color = "";
if (ele.key === '普通认证') {
color = '#3373CC'
} else if (ele.key === '机构认证') {
color = '#CC9D12'
} else {
color = '#54BF93'
}
let obj = {
value: ele.value,
name: ele.key,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数给第一个设置1第四个设置0 ,就是水平渐变
//给第一个设置0第四个设置1就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: color
}])
}
}
arr.push(obj);
})
return arr;
}
export default function createOpt1(ds = []) {
let data = dataVal(ds);
return {
series: [
{
name: 'Access From0',
type: 'pie',
radius: ['63%', '77%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center',
color: "#ffff",
lineHeight: 28
},
emphasis: {
label: {
show: true,
fontSize: 18,
color: "#ffff",
formatter: (p) => {
return `${p.data.name}\n${p.percent}%\n${p.data.value}`
},
emphasis: {
label: {
show: true,
fontSize: '40',
color: "#ffff",
formatter: (p)=>{
return p.data.name + '\n' + p.data.value;
},
}
},
labelLine: {
show: false
},
data: [
{ value: 2200, 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: 2200, name: '未认证', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数给第一个设置1第四个设置0 ,就是水平渐变
//给第一个设置0第四个设置1就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: '#CC9D12'
}])} },
{ value: 2200, name: '未知', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数给第一个设置1第四个设置0 ,就是水平渐变
//给第一个设置0第四个设置1就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: '#54BF93'
}])} },
],
}
},
labelLine: {
show: false
},
data: data,
},
{
name: 'Access From1',
type: 'pie',
radius: ['80%', '84%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
labelLine: {
show: false
},
center: ['50%', '50%'],//边框位置
data: [
{ value: 2200, 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: 2200, name: '女性', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数给第一个设置1第四个设置0 ,就是水平渐变
//给第一个设置0第四个设置1就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: '#CC9D12'
}])} },
{ value: 2200, name: '未知', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数给第一个设置1第四个设置0 ,就是水平渐变
//给第一个设置0第四个设置1就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: '#54BF93'
}])} },
],
}
]
}
},
{
name: 'Access From1',
type: 'pie',
radius: ['80%', '84%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
labelLine: {
show: false
},
center: ['50%', '50%'],//边框位置
data: data,
}
]
}
}

Loading…
Cancel
Save