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

张雄-WeiboDetails-(微博洞察详情，微博人物画像，微博用户活跃地区，微博内容top声量)

Browse Source
prod
张雄 3 years ago
parent 7f62db0125
commit 09a0e61a86
17 changed files with 25113 additions and 9116 deletions
Show Stats Download Patch File Download Diff File

16401
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

74
src/api/WeiboDetails/index.js
Unescape View File

@ -0,0 +1,74 @@
import httpService from "@/request"
export function getBrandWeiBoCount0528(params) {
let obj = Object.assign({action: 'getBrandWeiBoCount0528', sType: 'BrandWeiBo'}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}
export function getAffections(params) {
let obj = Object.assign({action: 'getAffections', sType: 'BrandWeiBo'}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}
export function getCountTime0528(params) {
let obj = Object.assign({action: 'getCountTime0528', sType: 'BrandWeiBo'}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}
export function getDirectWeiBo0528(params) {
let obj = Object.assign({action: 'getDirectWeiBo0528', sType: 'BrandWeiBo'}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}
//微博人物画像-男女比例-认证与非认证
export function getSexMergeWeiBo(params) {
let obj = Object.assign({action: 'getSexMergeWeiBo', sType: 'BrandWeiBo'}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}
//微博活跃用户地区
export function getRegionWeiBo(params) {
let obj = Object.assign({action: 'getRegionWeiBo', sType: 'BrandWeiBo'}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}

12
src/api/getEchars/index.js
Unescape View File

@ -6,10 +6,14 @@
* @Description: In User Settings Edit
* @FilePath: /data-show/src/api/getEchars/index.js
*/
import httpService from "@/request"
import axios from 'axios';
export function getGraphData() {
return httpService({
url: `/echarsData/npmdepgraph.min10.json`,
method: 'get'
return new Promise((resolve, reject) => {
let url = `/echarsData/npmdepgraph.min10.json`;
axios.get(url).then(res => {
resolve(res)
}).catch(() => {
reject(false)
})
})
}

13
src/api/getMap/index.js
Unescape View File

@ -6,11 +6,16 @@
* @Description: In User Settings Edit
* @FilePath: /data-show/src/api/getMap/index.js
*/
import httpService from "@/request"
import axios from 'axios';
export function createMap(name) {
return httpService({
url: `/map/${name}.json`,
method: 'get'
return new Promise((resolve, reject) => {
let url = `/map/${name}.json`;
axios.get(url).then(res => {
resolve(res)
}).catch(() => {
reject(false)
})
})
}

118
src/utils/gol/dataTool.js
Unescape View File

@ -10,63 +10,71 @@
* 大数字转换，将大额数字转换为万、千万、亿等
* @param value 数字值
*/
export function bigNumberTransform (value) {
const newValue = ['', '', '']
let fr = 1000
let num = 3
let text1 = ''
let fm = 1
while (value / fr >= 1) {
fr *= 10
num += 1
// console.log('数字', value / fr, 'num:', num)
export function bigNumberTransform(value) {
const newValue = ['', '', '']
let fr = 1000
let num = 3
let text1 = ''
let fm = 1
while (value / fr >= 1) {
fr *= 10
num += 1
// console.log('数字', value / fr, 'num:', num)
}
if (num <= 4) { // 千
newValue[0] = parseInt(value / 1000) + ''
newValue[1] = '千'
} else if (num <= 8) { // 万
text1 = parseInt(num - 4) / 3 > 1 ? '千万' : '万'
// tslint:disable-next-line:no-shadowed-variable
fm = text1 === '万' ? 10000 : 10000000
if (value % fm === 0) {
newValue[0] = parseInt(value / fm) + ''
} else {
newValue[0] = parseFloat(value / fm).toFixed(2) + ''
}
if (num <= 4) { // 千
newValue[0] = parseInt(value / 1000) + ''
newValue[1] = '千'
} else if (num <= 8) { // 万
text1 = parseInt(num - 4) / 3 > 1 ? '千万' : '万'
// tslint:disable-next-line:no-shadowed-variable
fm = text1 === '万' ? 10000 : 10000000
if (value % fm === 0) {
newValue[0] = parseInt(value / fm) + ''
} else {
newValue[0] = parseFloat(value / fm).toFixed(2) + ''
}
newValue[1] = text1
} else if (num <= 16) { // 亿
text1 = (num - 8) / 3 > 1 ? '千亿' : '亿'
text1 = (num - 8) / 4 > 1 ? '万亿' : text1
text1 = (num - 8) / 7 > 1 ? '千万亿' : text1
// tslint:disable-next-line:no-shadowed-variable
fm = 1
if (text1 === '亿') {
fm = 100000000
} else if (text1 === '千亿') {
fm = 100000000000
} else if (text1 === '万亿') {
fm = 1000000000000
} else if (text1 === '千万亿') {
fm = 1000000000000000
}
if (value % fm === 0) {
newValue[0] = parseInt(value / fm) + ''
} else {
newValue[0] = parseFloat(value / fm).toFixed(2) + ''
}
newValue[1] = text1
newValue[1] = text1
} else if (num <= 16) { // 亿
text1 = (num - 8) / 3 > 1 ? '千亿' : '亿'
text1 = (num - 8) / 4 > 1 ? '万亿' : text1
text1 = (num - 8) / 7 > 1 ? '千万亿' : text1
// tslint:disable-next-line:no-shadowed-variable
fm = 1
if (text1 === '亿') {
fm = 100000000
} else if (text1 === '千亿') {
fm = 100000000000
} else if (text1 === '万亿') {
fm = 1000000000000
} else if (text1 === '千万亿') {
fm = 1000000000000000
}
if (value < 1000) {
newValue[0] = value + ''
newValue[1] = ''
if (value % fm === 0) {
newValue[0] = parseInt(value / fm) + ''
} else {
newValue[0] = parseFloat(value / fm).toFixed(2) + ''
}
return newValue.join('')
newValue[1] = text1
}
if (value < 1000) {
newValue[0] = value + ''
newValue[1] = ''
}
return newValue.join('')
}
// 对数组中某个对象值由小到大进行排序
export function compare(property) {
return function (a, b) {
let value1 = a[property];
let value2 = b[property];
return value1 - value2;
}
}
// 对数组中某个对象值由大到小进行排序
export function comparePig(property) {
return function (a, b) {
let value1 = a[property];
let value2 = b[property];
return value2 - value1;
}
// 对数组中某个对象值进行排序
export function compare(property){
return function(a,b){
let value1 = a[property];
let value2 = b[property];
return value1 - value2;
}
}

2
src/views/BrandComparison/index.vue
Unescape View File

@ -155,7 +155,7 @@ export default {
name: "别克",
},
],
};
};
},
methods: {
goback() {

387
src/views/WeiboDetails/index.vue
Unescape View File

@ -7,68 +7,105 @@
* @FilePath: /data-show/src/views/WeiboDetails/index.vue
-->
<template>
<div class="d-container">
<div class="wd-outter">
<div class="wd-d1">
<v-label-div title="微博洞察详情">
<v-btn @click="goback">返回洞察详情</v-btn>
</v-label-div>
<div class="wd-d1-bd">
<div class="d1">
奥迪
</div>
<div class="d2" style="margin-left: 114px">
<img class="dd1" src="../../assets/images/BrandInsight/ic_xxzl.png" />
<div class="dd2">
<span class="s1">74,073,195</span>
<span class="s2">信息总量</span>
</div>
</div>
<div class="d2">
<img class="dd1" src="../../assets/images/BrandInsight/ic_dvsl.png" />
<div class="dd2">
<span class="s1">16578</span>
<span class="s2">参与大V数量</span>
</div>
</div>
<div class="d2">
<img class="dd1" src="../../assets/images/BrandInsight/ic_yhs.png" />
<div class="dd2">
<span class="s1">13200</span>
<span class="s2">参与用户数</span>
</div>
</div>
<div class="d2">
<img class="dd1" src="../../assets/images/BrandInsight/ic_yqdx.png" />
<div class="dd3">
<span class="s3" style="background: #3373CC"></span>
<span class="s3" style="background: #54BF93;width: 69px"></span>
<span class="s3" style="background: #CC9D12;width: 96px"></span>
</div>
</div>
</div>
<div class="d-container">
<div class="wd-outter">
<div class="wd-d1">
<v-label-div title="微博洞察详情">
<v-btn @click="goback">返回洞察详情</v-btn>
</v-label-div>
<div class="wd-d1-bd">
<div class="d1">
{{ form.sBrand }}
</div>
<div class="d2" style="margin-left: 114px">
<img
class="dd1"
src="../../assets/images/BrandInsight/ic_xxzl.png"
/>
<div class="dd2">
<span class="s1">{{ countObj.count }}</span>
<span class="s2">信息总量</span>
</div>
<div class="wd-d2">
<weibo-communication-trend></weibo-communication-trend>
<weiboContentType></weiboContentType>
<weiboCharacters></weiboCharacters>
</div>
<div class="d2">
<img
class="dd1"
src="../../assets/images/BrandInsight/ic_dvsl.png"
/>
<div class="dd2">
<span class="s1">{{ countObj.vCount }}</span>
<span class="s2">参与大V数量</span>
</div>
<div class="wd-d3">
<weiboUserActiveArea></weiboUserActiveArea>
<weiboContentTOPVolume></weiboContentTOPVolume>
</div>
<div class="wd-d4">
<modelPopularity></modelPopularity>
<weiboWordCloud></weiboWordCloud>
<weiboSpreadFission></weiboSpreadFission>
<weiboTonalDistribution></weiboTonalDistribution>
</div>
<div class="wd-d5">
<positiveViewKOL></positiveViewKOL>
<negativeOpinionKOL></negativeOpinionKOL>
</div>
<div class="d2">
<img
class="dd1"
src="../../assets/images/BrandInsight/ic_yhs.png"
/>
<div class="dd2">
<span class="s1">{{ countObj.userCount }}</span>
<span class="s2">参与用户数</span>
</div>
</div>
<div class="d2">
<img
class="dd1"
src="../../assets/images/BrandInsight/ic_yqdx.png"
/>
<a-popover title="舆情调性">
<template slot="content">
<template v-for="(item, key) in countObj2">
<div class="pd-item" :key="key">
<span >{{key}}</span>
<span>{{item}}</span>
</div>
</template>
</template>
<div class="dd3">
<span
class="s3"
:style="{ width: (countObj2['正面'] / total) * width + 'px' }"
></span>
<span
class="s3"
:style="{
width: (countObj2['中性'] / total) * width + 'px',
background: '#54BF93',
}"
></span>
<span
class="s3"
:style="{
width: (countObj2['负面'] / total) * width + 'px',
background: '#CC9D12',
}"
></span>
</div>
</a-popover>
</div>
</div>
</div>
<div class="wd-d2">
<weibo-communication-trend></weibo-communication-trend>
<weiboContentType></weiboContentType>
<weiboCharacters></weiboCharacters>
</div>
<div class="wd-d3">
<weiboUserActiveArea></weiboUserActiveArea>
<weiboContentTOPVolume></weiboContentTOPVolume>
</div>
<div class="wd-d4">
<modelPopularity></modelPopularity>
<weiboWordCloud></weiboWordCloud>
<weiboSpreadFission></weiboSpreadFission>
<weiboTonalDistribution></weiboTonalDistribution>
</div>
<div class="wd-d5">
<positiveViewKOL></positiveViewKOL>
<negativeOpinionKOL></negativeOpinionKOL>
</div>
</div>
</div>
</template>
<script>
@ -82,122 +119,174 @@ import weiboWordCloud from "./weiboWordCloud";
import weiboSpreadFission from "./weiboSpreadFission";
import weiboTonalDistribution from "./weiboTonalDistribution";
import positiveViewKOL from "./positiveViewKOL";
import negativeOpinionKOL from "./negativeOpinionKOL"
import negativeOpinionKOL from "./negativeOpinionKOL";
import { getBrandWeiBoCount0528 } from "@/api/WeiboDetails/index.js";
import { getAffections } from "@/api/WeiboDetails/index.js";
export default {
name: "WeiboDetails",
components: {
weiboCommunicationTrend, // 微博传播趋势
weiboContentType, // 微博内容类型
weiboCharacters, // 微博人物画像
weiboUserActiveArea, // 微博用户活跃地区
weiboContentTOPVolume, // 微博内容TOP声量
modelPopularity, // 车型热度
weiboWordCloud, // 词云分布
weiboSpreadFission, // 微博传播裂变
weiboTonalDistribution, // 调性分布
positiveViewKOL, // 正面观点KOL
negativeOpinionKOL // 负面观点KOL
name: "WeiboDetails",
components: {
weiboCommunicationTrend, // 微博传播趋势
weiboContentType, // 微博内容类型
weiboCharacters, // 微博人物画像
weiboUserActiveArea, // 微博用户活跃地区
weiboContentTOPVolume, // 微博内容TOP声量
modelPopularity, // 车型热度
weiboWordCloud, // 词云分布
weiboSpreadFission, // 微博传播裂变
weiboTonalDistribution, // 调性分布
positiveViewKOL, // 正面观点KOL
negativeOpinionKOL, // 负面观点KOL
},
data() {
return {
width: 200,
form: {
token: "",
sBrand: "",
},
countObj: {
carseriesCount: 0,
count: 0,
userCount: 0,
vCount: 0,
},
countObj2: {
正面: 0,
中性: 0,
负面: 0,
},
total: 0,
};
},
created() {
this.form.token = this.getToken;
this.form.sBrand = this.getBrand.brandname || "奥迪";
this.getData();
},
methods: {
goback() {
this.$router.go(-1);
},
methods: {
goback() {
this.$router.go(-1);
},
getData() {
let obj = Object.assign({}, this.getCtime2, this.form);
getBrandWeiBoCount0528(obj).then((res) => {
let data = res.data;
this.countObj = Object.assign(this.countObj, data);
});
getAffections(obj).then((res) => {
let data = res.data || {};
let total = 0;
for (let key in data) {
total += data[key] * 1;
}
this.countObj2 = Object.assign(this.countObj2, data);
this.total = total;
});
},
},
};
</script>
<style lang="less" scoped>
.wd-outter {
padding: 0px 16px 16px 16px;
padding: 0px 16px 16px 16px;
}
.wd-d1 {
width: 100%;
height: 222px;
border: 2px solid #0f2a4d;
.wd-d1-bd {
width: 100%;
height: 222px;
border: 2px solid #0f2a4d;
.wd-d1-bd {
width: 100%;
height: calc(100% - 48px);
height: calc(100% - 48px);
display: flex;
justify-content: flex-start;
align-items: center;
.d1 {
width: 150px;
height: 150px;
background-image: url("../../assets/images/BrandInsight/img_lq.png");
background-repeat: no-repeat;
background-size: cover;
margin-left: 114px;
text-align: center;
line-height: 150px;
font-size: 24px;
color: #b2daf7;
}
.d2 {
width: 378px;
height: 82px;
display: flex;
justify-content: flex-start;
.dd1 {
width: 80px;
height: 80px;
}
.dd2 {
margin-left: 20px;
height: 100%;
.s1 {
display: block;
font-size: 34px;
font-family: Bebas;
color: #ffffff;
}
.s2 {
display: block;
font-size: 20px;
color: #8f969c;
}
}
.dd3 {
margin-left: 20px;
height: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
.d1 {
width: 150px;
height: 150px;
background-image: url("../../assets/images/BrandInsight/img_lq.png");
background-repeat: no-repeat;
background-size: cover;
margin-left: 114px;
text-align: center;
line-height: 150px;
font-size: 24px;
color: #b2daf7;
}
.d2 {
width: 378px;
height: 82px;
display: flex;
justify-content: flex-start;
.dd1 {
width: 80px;
height: 80px;
}
.dd2 {
margin-left: 20px;
height: 100%;
.s1 {
display: block;
font-size: 34px;
font-family: Bebas;
color: #ffffff;
}
.s2 {
display: block;
font-size: 20px;
color: #8f969c;
}
}
.dd3 {
margin-left: 20px;
height: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
.s3 {
width: 87px;
height: 33px;
display: inline-block;
margin-right: 2px;
}
}
.s3 {
width: 87px;
height: 33px;
display: inline-block;
margin-right: 2px;
background: #3373cc;
}
}
}
}
}
.wd-d2 {
width: 100%;
height: auto;
display: flex;
justify-content: flex-start;
margin-top: 16px;
width: 100%;
height: auto;
display: flex;
justify-content: flex-start;
margin-top: 16px;
}
.wd-d3 {
width: 100%;
height: auto;
display: flex;
justify-content: flex-start;
margin-top: 16px;
width: 100%;
height: auto;
display: flex;
justify-content: flex-start;
margin-top: 16px;
}
.wd-d4 {
width: 100%;
height: auto;
display: flex;
justify-content: flex-start;
margin-top: 16px;
width: 100%;
height: auto;
display: flex;
justify-content: flex-start;
margin-top: 16px;
}
.wd-d5 {
width: 100%;
height: auto;
width: 100%;
height: auto;
display: flex;
justify-content: flex-start;
margin-top: 16px;
}
.pd-item {
display: flex;
justify-content: flex-start;
margin-top: 16px;
justify-content: space-between;
color: #fff;
border-bottom: 1px solid #173b6d;
padding: 10px;
}
</style>

189
src/views/WeiboDetails/weiboCharacters/index.vue
Unescape View File

@ -8,57 +8,162 @@
-->
<template>
<div class="wc-outter">
<v-label-div title="微博人物画像">
<div>
<v-tab-group :btns="['性别', '认证', '分类']"></v-tab-group>
</div>
</v-label-div>
<div class="wc-inner">
<div class="d1">
<v-echarts :opt="opt"></v-echarts>
</div>
<div class="d2">
<v-label-ctx label="男性" cont="2200" percentage="25%" color="#3373CC" :eStyle="{ height: '137px' }"></v-label-ctx>
<v-label-ctx label="女性" cont="2200" percentage="25%" color="#a58115" :eStyle="{ height: '137px' }"></v-label-ctx>
<v-label-ctx label="未知" cont="2200" percentage="25%" color="#54BF93 " :eStyle="{ height: '137px' }"></v-label-ctx>
</div>
</div>
</div>
<v-label-div title="微博人物画像">
<div>
<v-tab-group
:btns="['性别', '认证', '分类']"
@change="handlerTab"
></v-tab-group>
</div>
</v-label-div>
<div class="wc-inner">
<div class="d1">
<v-echarts :opt="opt"></v-echarts>
</div>
<div class="d2">
<vue-scroll>
<v-label-ctx
v-for="(item, index) in labelArr"
:key="index"
:label="item.key"
:cont="item.value"
:percentage="((item.value / total) * 100).toFixed(2) + '%'"
:color="colors[index]"
:eStyle="{ height: '8.54rem' }"
></v-label-ctx>
</vue-scroll>
</div>
</div>
</div>
</template>
<script>
import createOpt from "./opt"
import { getSexMergeWeiBo } from "@/api/WeiboDetails";
import createOpt from "./opt";
export default {
name: "weiboCharacters",
data() {
return {
opt: createOpt()
}
}
}
name: "weiboCharacters",
data() {
return {
load: false,
form: {
sBrand: "",
token: "",
},
RegionWeiBo: [],
attestation: [],
sex: [],
total: 0,
labelArr: [],
opt: createOpt(),
colors: [
"#54BF93",
"#3373CC",
"#CC9D12",
"#f15c80",
"#e4d354",
"#8085e8",
"#8d4653",
"#91e8e1",
"#f7a35c",
"#90ed7d",
"#54BF93",
"#3373CC",
"#CC9D12",
"#f15c80",
"#e4d354",
"#8085e8",
"#8d4653",
"#91e8e1",
"#f7a35c",
"#90ed7d",
],
};
},
created() {
this.form.token = this.getToken;
this.form.sBrand = this.getBrand.brandname || this.brand;
this.getData();
},
methods: {
// 获取后台数据
getData() {
let obj = Object.assign({}, this.getCtime2, this.form);
getSexMergeWeiBo(obj).then((res) => {
let data = res.data || {};
let RegionWeiBo = data.RegionWeiBo;
let attestation = data.attestation;
let sex = data.sex;
this.RegionWeiBo = this.toArr(RegionWeiBo);
this.attestation = this.toArr(attestation);
this.sex = this.toArr(sex);
this.doVal(this.sex);
});
},
// 将对象变成数组
toArr(obj) {
let arr = [];
for (let key in obj) {
let o = {
key: key,
value: obj[key],
};
arr.push(o);
}
return arr;
},
// 给页面变化值赋值
doVal(arr = []) {
let total = 0;
arr.forEach((ele) => {
total += ele.value * 1;
});
this.total = total;
this.labelArr = arr;
this.opt = createOpt(this.labelArr, this.colors);
},
// 切换数据
handlerTab(n) {
switch (n) {
case 0:
this.doVal(this.sex);
break;
case 1:
this.doVal(this.attestation);
break;
case 2:
this.doVal(this.RegionWeiBo);
break;
default:
this.doVal(this.sex);
break;
}
},
},
};
</script>
<style lang="less" scoped>
.wc-outter {
width: 618px;
height: 460px;
border: 2px solid #0f2a4d;
margin-left: 16px;
overflow: hidden;
.wc-inner {
width: 100%;
height: calc(100% - 48px);
display: flex;
justify-content: flex-start;
.d1 {
width: 280px;
height: 100%;
}
.d2 {
width: 300px;
margin-left: 16px;
}
width: 618px;
height: 460px;
border: 2px solid #0f2a4d;
margin-left: 16px;
overflow: hidden;
.wc-inner {
width: 100%;
height: calc(100% - 48px);
display: flex;
justify-content: flex-start;
.d1 {
width: 280px;
height: 100%;
}
.d2 {
width: 300px;
margin-left: 16px;
}
}
}
</style>

178
src/views/WeiboDetails/weiboCharacters/opt.js
Unescape View File

@ -1,114 +1,80 @@
/*
* @Author: your name
* @Date: 2021-10-12 15:14:58
* @LastEditTime: 2021-10-14 10:43:47
* @Date: 2021-10-09 09:49:50
* @LastEditTime: 2021-10-28 13:07:24
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandInsight/weiboPortraits/opt.js
* @FilePath: /data-show/src/views/Index/userPortrait/opt.js
*/
import * as echarts from "echarts";
export default function createOpt() {
return {
series: [
{
name: 'Access From0',
type: 'pie',
radius: ['63%', '77%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center',
fontSize: '40',
color: "#ffff",
},
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'
}])} },
],
},
{
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'
}])} },
],
}
]
// let colors = ['#3373CC', '#CC9D12', '#54BF93','#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1','#f7a35c','#90ed7d']
function createData(ds = [], colors) {
let arr = [];
ds.map((ele, index) => {
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: colors[index]
}])
}
}
arr.push(obj)
})
return arr;
}
export default function createOpt(ds = [], color = []) {
const data = createData(ds, color);
return {
series: [
{
name: 'Access From0',
type: 'pie',
radius: ['65%', '80%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center',
lineHeight: 30
},
emphasis: {
label: {
show: true,
fontSize: '16',
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: ['86%', '94%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
labelLine: {
show: false
},
center: ['50%', '50%'],//边框位置
data: data
}
]
}
}

30
src/views/WeiboDetails/weiboCommunicationTrend/index.vue
Unescape View File

@ -17,13 +17,43 @@
</template>
<script>
import {getCountTime0528} from "@/api/WeiboDetails"
import createOpt from "./opt"
export default {
name: "weibo-communication-trend",
data() {
return {
load: false,
form: {
sBrand: "",
token: "",
},
opt: createOpt()
}
},
created() {
this.form.token = this.getToken;
this.form.sBrand = this.getBrand.brandname || this.brand;
this.getData();
},
methods: {
getData() {
this.load = true;
let obj = Object.assign({}, this.getCtime2, this.form);
getCountTime0528(obj).then(res => {
let data = res.data || [];
let dx = []; //time
let ds = []; //value
data.forEach(ele => {
let key = ele.Time;
let value = ele.value;
dx.push(key);
ds.push(value);
})
this.opt = createOpt(dx, ds)
this.load = false
});
}
}
};
</script>

27
src/views/WeiboDetails/weiboCommunicationTrend/opt.js
Unescape View File

@ -7,13 +7,14 @@
* @FilePath: /data-show/src/views/BrandInsight/weiboVolumeTrend/opt.js
*/
import * as echarts from "echarts";
export default function createOpt() {
import { bigNumberTransform } from "@/utils/gol/dataTool"
export default function createOpt(dx = [], ds = []) {
return {
grid: {
top: "16px",
left: "16px",
right: "16px",
bottom: "16px",
top: 16,
left: 16,
right: "5%",
bottom: 10,
containLabel: true,
},
tooltip: {
@ -32,13 +33,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', '00:40', '00:80', '12:00', '16:00', '20:00', '24:00']
data: dx
},
yAxis: {
type: 'value',
@ -48,6 +55,12 @@ export default function createOpt() {
color: "#FFF",
},
},
axisLabel: {
formatter: (value) => {
let str = bigNumberTransform(value);
return str;
}
},
splitLine: {
lineStyle: {
type: "dashed", // y轴分割线类型
@ -57,7 +70,7 @@ export default function createOpt() {
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
data: ds,
type: 'line',
color: '#546fc5',
areaStyle: {normal: {

224
src/views/WeiboDetails/weiboContentTOPVolume/index.vue
Unescape View File

@ -7,84 +7,110 @@
* @FilePath: /data-show/src/views/WeiboDetails/weiboContentTOPVolume/index.vue
-->
<template>
<div class="wct-outter">
<v-label-div title="微博内容TOP声量">
</v-label-div>
<div class="wct-inner">
<div class="wct-d1">
<v-echarts :opt="opt1"></v-echarts>
<div class="wct-d1-dd1">
<span>排名：<span class="ss1">01</span></span>
<span>声量：<span class="ss1">600</span></span>
</div>
</div>
<div class="wct-d1">
<v-echarts :opt="opt2"></v-echarts>
<div class="wct-d1-dd1">
<span>排名：<span class="ss1">02</span></span>
<span>声量：<span class="ss1">500</span></span>
</div>
</div>
<div class="wct-d1">
<v-echarts :opt="opt3"></v-echarts>
<div class="wct-d1-dd1">
<span>排名：<span class="ss1">03</span></span>
<span>声量：<span class="ss1">450</span></span>
</div>
</div>
<div class="wct-d1">
<v-echarts :opt="opt4"></v-echarts>
<div class="wct-d1-dd1">
<span>排名：<span class="ss1">04</span></span>
<span>声量：<span class="ss1">400</span></span>
</div>
</div>
<div class="wct-d1">
<v-echarts :opt="opt5"></v-echarts>
<div class="wct-d1-dd1">
<span>排名：<span class="ss1">05</span></span>
<span>声量：<span class="ss1">350</span></span>
</div>
</div>
<div class="wct-d1">
<v-echarts :opt="opt6"></v-echarts>
<div class="wct-d1-dd1">
<span>排名：<span class="ss1">06</span></span>
<span>声量：<span class="ss1">300</span></span>
</div>
</div>
<div class="wct-d1">
<v-echarts :opt="opt7"></v-echarts>
<div class="wct-d1-dd1">
<span>排名：<span class="ss1">07</span></span>
<span>声量：<span class="ss1">250</span></span>
</div>
</div>
<div class="wct-d1">
<v-echarts :opt="opt8"></v-echarts>
<div class="wct-d1-dd1">
<span>排名：<span class="ss1">08</span></span>
<span>声量：<span class="ss1">200</span></span>
</div>
</div>
<div class="wct-outter" v-loading="load">
<v-label-div title="微博内容TOP声量"> </v-label-div>
<div class="wct-inner">
<div class="wct-d1" v-for="(item,index) in list" :key="index">
<v-echarts :opt="item.opt"></v-echarts>
<div class="wct-d1-dd1">
<span>排名：<span class="ss1">0{{index+1}}</span></span>
<span>声量：<span class="ss1">{{item.value}}</span></span>
</div>
</div>
<div class="wct-d1">
<v-echarts :opt="opt2"></v-echarts>
<div class="wct-d1-dd1">
<span>排名：<span class="ss1">02</span></span>
<span>声量：<span class="ss1">500</span></span>
</div>
</div>
<div class="wct-d1">
<v-echarts :opt="opt3"></v-echarts>
<div class="wct-d1-dd1">
<span>排名：<span class="ss1">03</span></span>
<span>声量：<span class="ss1">450</span></span>
</div>
</div>
<div class="wct-d1">
<v-echarts :opt="opt4"></v-echarts>
<div class="wct-d1-dd1">
<span>排名：<span class="ss1">04</span></span>
<span>声量：<span class="ss1">400</span></span>
</div>
</div>
<div class="wct-d1">
<v-echarts :opt="opt5"></v-echarts>
<div class="wct-d1-dd1">
<span>排名：<span class="ss1">05</span></span>
<span>声量：<span class="ss1">350</span></span>
</div>
</div>
<div class="wct-d1">
<v-echarts :opt="opt6"></v-echarts>
<div class="wct-d1-dd1">
<span>排名：<span class="ss1">06</span></span>
<span>声量：<span class="ss1">300</span></span>
</div>
</div>
<div class="wct-d1">
<v-echarts :opt="opt7"></v-echarts>
<div class="wct-d1-dd1">
<span>排名：<span class="ss1">07</span></span>
<span>声量：<span class="ss1">250</span></span>
</div>
</div>
<div class="wct-d1">
<v-echarts :opt="opt8"></v-echarts>
<div class="wct-d1-dd1">
<span>排名：<span class="ss1">08</span></span>
<span>声量：<span class="ss1">200</span></span>
</div>
</div>
</div>
</div>
</template>
<script>
import {getDirectWeiBo0528} from "@/api/WeiboDetails"
import {comparePig} from "@/utils/gol/dataTool"
import createOpt from "./opt"
export default {
name: "weiboContentTOPVolume",
data() {
return {
opt1: createOpt('内饰', '#306cc0', 600),
opt2: createOpt('空间', '#5ea3c2', 500),
opt3: createOpt('操控', '#49aa82', 450),
opt4: createOpt('舒适', '#c79911', 400),
opt5: createOpt('动力', '#316dc3', 350),
opt6: createOpt('配置', '#5ea3c2', 300),
opt7: createOpt('外观', '#49aa82', 250),
opt8: createOpt('油耗', '#c79911', 200),
load: false,
form: {
sBrand: "",
token: "",
},
list: [],
colors: ['#3373CC', '#63AECC', '#54BF93', '#CC9D12', '#3373CC', '#63AECC', '#54BF93', '#CC9D12']
};
},
created() {
this.form.token = this.getToken;
this.form.sBrand = this.getBrand.brandname || this.brand;
this.getData();
},
methods: {
getData() {
this.load = true;
let obj = Object.assign({}, this.getCtime2, this.form);
getDirectWeiBo0528(obj).then(res => {
let data = res.data || [];
let arr = [];
data.sort(comparePig('value'));
data.forEach((ele,index) => {
let obj = {
value: ele.value,
opt: createOpt(ele.key,this.colors[index],ele.value)
}
arr.push(obj)
})
this.list = arr;
// this.opt1 = createOpt(data[0].key,'#306cc0',data[0].value);
this.load = false;
});
}
}
}
@ -92,38 +118,40 @@ export default {
<style lang="less" scoped>
.wct-outter {
width: 936px;
height: 460px;
border: 2px solid #0f2a4d;
margin-left: 16px;
width: 936px;
height: 460px;
border: 2px solid #0f2a4d;
margin-left: 16px;
overflow: hidden;
}
.wct-inner {
width: 100%;
height: calc(100% - 48px);
.wct-d1 {
position: relative;
width: 233px;
height: 206px;
display: inline-block;
.wct-d1-dd1 {
position:absolute;
padding: 0px 16px;
width: 100%;
height: auto;
display: flex;
justify-content: space-between;
top: 140px;
left: 0px;
span {
color: #d8d8d8;
font-size: 12px;
.ss1 {
font-family: Bebas;
font-size: 16px;
color: #FFFFFF;
}
}
}
width: 100%;
margin-top: 16px;
height: calc(100% - 48px);
.wct-d1 {
position: relative;
width: 233px;
height: 206px;
display: inline-block;
.wct-d1-dd1 {
position: absolute;
padding: 0px 16px;
width: 100%;
height: auto;
display: flex;
justify-content: space-between;
top: 140px;
left: 0px;
span {
color: #d8d8d8;
font-size: 12px;
.ss1 {
font-family: Bebas;
font-size: 16px;
color: #ffffff;
}
}
}
}
}
</style>

2
src/views/WeiboDetails/weiboContentTOPVolume/opt.js
Unescape View File

@ -8,7 +8,7 @@
* startAngle: 180,
*/
import * as echarts from "echarts";
export default function createOpt(name='内饰', color='#306cc0', num=500) {
export default function createOpt(name, color, num) {
return {
tooltip: {
backgroundColor: "#08182F",

21
src/views/WeiboDetails/weiboContentType/index.vue
Unescape View File

@ -24,14 +24,33 @@
</template>
<script>
import {getDirectWeiBo0528} from "@/api/WeiboDetails"
import createOpt from "./opt";
export default {
name: "weiboContentType",
data() {
return {
opt: createOpt(),
load: false,
form: {
sBrand: "",
token: "",
},
opt: createOpt()
};
},
created() {
this.form.token = this.getToken;
this.form.sBrand = this.getBrand.brandname || this.brand;
this.getData();
},
methods: {
getData() {
this.load = true;
let obj = Object.assign({}, this.getCtime2, this.form);
getDirectWeiBo0528(obj);
console.log();
}
}
};
</script>
<style lang="less" scoped>

116
src/views/WeiboDetails/weiboUserActiveArea/index.vue
Unescape View File

@ -7,53 +7,95 @@
* @FilePath: /data-show/src/views/WeiboDetails/weiboUserActiveArea/index.vue
-->
<template>
<div class="wua-outter">
<v-label-div title="微博用户活跃地区">
</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="微博用户活跃地区"> </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 { getRegionWeiBo } from "@/api/WeiboDetails";
import createOptD1 from "./opt1";
import createOptD2 from "./opt2";
export default {
name: "weiboUserActiveArea",
data() {
return {
opt1: createOptD1(),
opt2: createOptD2()
}
}
}
name: "weiboUserActiveArea",
data() {
return {
form: {
sBrand: "",
token: "",
},
arr: [],
opt1: createOptD1(),
opt2: createOptD2(),
};
},
created() {
this.form.token = this.getToken;
this.form.sBrand = this.getBrand.brandname || this.brand;
this.getData();
},
methods: {
getData() {
this.load = true;
let obj = Object.assign({}, this.getCtime2, this.form);
getRegionWeiBo(obj).then((res) => {
let data = res.data || {};
this.arr = this.toArr(data);
let dx = []; //省份
let ds = []; //数据
this.arr.forEach((ele) => {
let key = ele.key;
let value = ele.value;
dx.push(key);
ds.push(value);
});
this.opt1 = createOptD1(dx, ds);
});
console.log();
},
// 将对象变成数组
toArr(obj) {
let arr = [];
for (let key in obj) {
let o = {
key: key,
value: obj[key],
};
arr.push(o);
}
return arr;
},
},
};
</script>
<style lang="less" scoped>
.wua-outter {
width: 936px;
height: 460px;
border: 2px solid #0f2a4d;
.wua-inner {
width: 100%;
height: calc(100% - 48px);
display: flex;
justify-content: flex-start;
.d1 {
width: 479px;
height: 100%;
}
.d2 {
width: 420px;
height: 100%;
margin-left: 16px;
}
width: 936px;
height: 460px;
border: 2px solid #0f2a4d;
.wua-inner {
width: 100%;
height: calc(100% - 48px);
display: flex;
justify-content: flex-start;
.d1 {
width: 479px;
height: 100%;
}
.d2 {
width: 420px;
height: 100%;
margin-left: 16px;
}
}
}
</style>

6
src/views/WeiboDetails/weiboUserActiveArea/opt1.js
Unescape View File

@ -9,7 +9,7 @@
* @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%',
@ -45,7 +45,7 @@ export default function createOptD1() {
},
yAxis: {
type: 'category',
data: ['山西省', '浙江省', '北京市', '江西省', '江苏省', '福建省', '山东省', '天津市'],
data: dx,
axisTick: {
show: false,
},
@ -61,7 +61,7 @@ export default function createOptD1() {
name: '2011',
type: 'bar',
barWidth: 24,
data: [500, 1000, 2220, 3000, 4000, 3000,2200, 2600],
data: ds,
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: '#010B19'

16429
yarn.lock
View File

File diff suppressed because it is too large Load Diff
Write Preview
Loading…
Cancel
Save