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

cxw-010203

Browse Source
prod
lily.zhang 4 years ago
parent cb896e5a07
commit e6bb46be28
12 changed files with 571 additions and 419 deletions
Show Stats Download Patch File Download Diff File

64
src/api/ModelInsight/index.js
Unescape View File

@ -1,7 +1,7 @@
/*
* @Author: your name
* @Date: 2021-10-28 16:40:48
* @LastEditTime: 2021-11-01 14:15:10
* @LastEditTime: 2021-11-01 15:49:49
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/api/ModelInsight/index.js
@ -47,3 +47,65 @@ export function getSourcetypeTime(params) {
}
})
}
// 车型热门事件列表
export function getHotEventsList0528(params) {
let obj = Object.assign({action: 'getHotEventsList0528', sType: 'HotEvent'}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}
// 车型热点事件
export function getHotEventsType(params) {
let obj = Object.assign({action: 'getHotEventsType', sType: 'HotEvent'}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}
// 车型-微博KOL
export function getBoauthenCount0528(params) {
let obj = Object.assign({action: 'getBoauthenCount0528', 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 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'
}
})
}

3
src/views/BrandInsight/popularEvents/index.vue
Unescape View File

@ -1,7 +1,7 @@
<!--
* @Author: xw
* @Date: 2021-10-12 11:06:58
* @LastEditTime: 2021-11-01 09:58:44
* @LastEditTime: 2021-11-01 15:13:45
* @LastEditors: Please set LastEditors
* @Description: 热门事件
* @FilePath: /data-show/src/views/BrandInsight/popularEvents/index.vue
@ -66,7 +66,6 @@ export default {
];
obj[ele.events_type].push(a);
});
console.log(obj)
this.opt = createOpt(obj);
this.load = false;
});

14
src/views/ModelInsight/index.vue
Unescape View File

@ -1,7 +1,7 @@
<!--
* @Author: your name
* @Date: 2021-10-25 13:12:20
* @LastEditTime: 2021-11-01 14:00:36
* @LastEditTime: 2021-11-01 15:55:24
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/ModelInsight/index.vue
@ -25,8 +25,8 @@
<v-btn @click="goRouter('/eventDetails')">事件详情</v-btn>
</v-label-div>
<div class="bdl-d2-bd">
<ml-popular-events-list></ml-popular-events-list>
<ml-popular-events></ml-popular-events>
<ml-popular-events-list :brand="brand" :model="model"></ml-popular-events-list>
<ml-popular-events :brand="brand" :model="model"></ml-popular-events>
</div>
</div>
<div class="bdl-d3">
@ -34,9 +34,9 @@
<v-btn @click="goRouter('/weiboDetails')">微博详情</v-btn>
</v-label-div>
<div class="bdl-d3-bd">
<ml-weibo-Kol></ml-weibo-Kol>
<ml-weibo-portraits></ml-weibo-portraits>
<ml-weibo-volume-trend></ml-weibo-volume-trend>
<ml-weibo-Kol :brand="brand" :model="model"></ml-weibo-Kol>
<ml-weibo-portraits :brand="brand" :model="model"></ml-weibo-portraits>
<ml-weibo-volume-trend :brand="brand" :model="model"></ml-weibo-volume-trend>
</div>
</div>
<div class="bdl-d4">
@ -44,7 +44,7 @@
<v-btn @click="goRouter('/forumDetails')">论坛详情</v-btn>
</v-label-div>
<div class="bdl-d4-bd">
<mlForumCommunicationTrend></mlForumCommunicationTrend>
<mlForumCommunicationTrend :brand="brand" :model="model"></mlForumCommunicationTrend>
<mlForumHotTopicDirection></mlForumHotTopicDirection>
<mlSpreadTOPmodels></mlSpreadTOPmodels>
</div>

56
src/views/ModelInsight/mlPopularEvents/index.vue
Unescape View File

@ -1,7 +1,7 @@
<!--
* @Author: xw
* @Date: 2021-10-12 11:06:58
* @LastEditTime: 2021-10-25 14:51:32
* @LastEditTime: 2021-11-01 15:15:10
* @LastEditors: Please set LastEditors
* @Description: 热门事件
* @FilePath: /data-show/src/views/BrandInsight/popularEvents/index.vue
@ -16,12 +16,64 @@
</template>
<script>
import {getHotEventsType} from "@/api/ModelInsight"
import createOpt from "./opt"
export default {
name: "mlPopularEvents",
props: ["brand", "model"],
data() {
return {
opt: createOpt()
form: {
sBrand: "",
sSeriesName: "",
token: "",
},
opt: {}
}
},
watch: {
model: {
handler(val) {
if (val) {
this.form.token = this.getToken;
this.form.sBrand = this.brand;
this.form.sSeriesName = this.model;
this.getData();
}
},
immediate: true,
},
},
methods: {
getData() {
let obj = Object.assign({}, this.getCtime2, this.form);
getHotEventsType(obj).then(res => {
let data = res.data;
let arr = data.Data || [];
let type = data.Type || {};
let obj = {};
Object.keys(type).forEach((ele) => {
obj[ele] = [];
});
arr.forEach((ele) => {
// let m1 = moment(ele.minSourcetime);
// let m2 = moment(ele.maxSourcetime);
// let duration = m2.diff(m1, "hours");
// let str= moment.utc(time).format('HH:mm')
let a = [
ele.maxSourcetime,
ele.events_count * 1,
ele.events_influence,
ele.events_brand,
ele.events_title,
ele.events_type,
ele.maxSourcetime,
ele.summary,
];
obj[ele.events_type].push(a);
});
this.opt = createOpt(obj);
})
}
}
}

232
src/views/ModelInsight/mlPopularEvents/opt.js
Unescape View File

@ -1,25 +1,36 @@
/*
* @Author: your name
* @Date: 2021-10-12 11:16:44
* @LastEditTime: 2021-10-12 13:19:28
* @LastEditTime: 2021-11-01 15:14:39
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandInsight/popularEvents/opt.js
*/
import * as echarts from "echarts";
const data = [
[['10000人以上',37.5,100000000,'A7','无工作经验'],['1000-5000人',11.46,100000000,'A5','无工作经验'],['500-1000人',16,100000000,'A4','无工作经验'],['150-500人',16.92,100000000,'A3','无工作经验'],['50-150人',22.5,100000000,'A2','无工作经验'],['少于50人',11.11,100000000,'A1','无工作经验']],
[['10000人以上',48.21,150000000,'B7','1-3年经验'],['5000-10000人',50,150000000,'B6','1-3年经验'],['1000-5000人',67.7,150000000,'B5','1-3年经验'],['500-1000人',31,150000000,'B4','1-3年经验'],['150-500人',43.85,150000000,'B3','1-3年经验'],['50-150人',39.17,150000000,'B2','1-3年经验'],['少于50人',46.67,150000000,'B1','1-3年经验']],
[['10000人以上',10.71,200000000,'C7','3-5年经验'],['5000-10000人',50,200000000,'C6','3-5年经验'],['1000-5000人',14.58,200000000,'C5','3-5年经验'],['500-1000人',37,200000000,'C4','3-5年经验'],['150-500人',24.62,200000000,'C3','3-5年经验'],['50-150人',28.33,200000000,'C2','3-5年经验'],['少于50人',31.11,200000000,'C1','3-5年经验']],
[['10000人以上',3.57,250000000,'D7','5-7年经验'],['1000-5000人',5.21,250000000,'D5','5-7年经验'],['500-1000人',12,250000000,'D4','5-7年经验'],['150-500人',12.31,250000000,'D3','5-7年经验'],['50-150人',6.67,250000000,'D2','5-7年经验'],['少于50人',11.11,250000000,'D1','5-7年经验']],
[['500-1000人',4,300000000,'E4','7-10年经验'],['150-500人',0.77,300000000,'E3','7-10年经验'],['50-150人',0.83,300000000,'E2','7-10年经验']],
[['1000-5000人',1.04,350000000,'F5','10年以上经验'],['150-500人',1.54,350000000,'F3','10年以上经验'],['50-150人',2.5,350000000,'F2','10年以上经验']],
];
export default function createOpt() {
// import * as echarts from "echarts";
// import moment from "moment";
import { bigNumberTransform } from "@/utils/gol/dataTool"
function createData(obj = {}) {
let arr = [];
for (let key in obj) {
let o = {
name: key,
data: obj[key],
type: 'scatter',
symbolSize: function (data) {
return data[2]
}
}
arr.push(o)
}
return arr
}
export default function createOpt(ds = {}) {
const data = createData(ds)
return {
title: {
show: false,
text: '湘西自治州不同规模企业对岗位工作经验要求情况'
text: '12345'
},
legend: {
y: 'top',
@ -27,14 +38,13 @@ export default function createOpt() {
icon: 'roundRect',
textStyle: { //图例文字的样式
color: '#fff'
},
data: ['无工作经验', '1-3年经验','3-5年经验','5-7年经验','7-10年经验','10年以上经验']
}
},
grid: {
left: '3%',
right: '2%',
bottom: '4%',
top: '15%',
left: 16,
right: '5%',
bottom: 10,
top: 42,
containLabel: true
},
tooltip: {
@ -45,15 +55,15 @@ export default function createOpt() {
textStyle: {
color: "#fff", //设置文字颜色
},
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
formatter: (p) => {
let data = p.data;
return `<span>${data[5]}-${data[3]}</span><br><span>${data[4]}</span><br><span>${data[0]}</span><br><span>影响力：${data[2]}</span>`;
}
},
xAxis: {
data:['少于50人','50-150人','150-500人','500-1000人','1000-5000人','5000-10000人','10000人以上'],
splitLine: {
lineStyle: {
type: 'dashed'
}
},
type: 'time',
boundaryGap: false,
axisTick: {
show: false,
},
@ -63,168 +73,44 @@ export default function createOpt() {
color: "#fff",
},
},
splitLine: {
show: false
},
// data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'],
axisLabel : {
// formatter: (value) => {
// var str= moment.utc(value).format('HH:mm');
// // let str = value.substring(10,16)
// return str;
// }
},
},
yAxis: {
type: 'value',
axisLine: {
show: false,
lineStyle: {
color: "#fff",
},
},
axisLabel: {
formatter: (value) => {
let str = bigNumberTransform(value);
return str;
}
},
splitLine: {
lineStyle: {
type: 'dashed',
type: "dashed", // y轴分割线类型
color: "#012b4b",
}
},
scale: true,
axisLabel : {
formatter: '{value} %'
},
},
series: [
{
name: '无工作经验',
data: data[0],
type: 'scatter',
symbolSize: function (data) {
return Math.sqrt(data[2]) / 5e2;
},
itemStyle: {
normal: {
shadowBlur: 10,
shadowColor: 'rgba(251, 118, 123, 0.5)',
shadowOffsetY: 5,
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
offset: 0,
color: 'rgb(251, 118, 123)'
}, {
offset: 1,
color: 'rgb(251, 118, 123)'
}])
}
}
},
{
name: '1-3年经验',
data: data[1],
type: 'scatter',
symbolSize: function (data) {
return Math.sqrt(data[2]) / 5e2;
},
itemStyle: {
normal: {
shadowBlur: 10,
shadowColor: 'rgba(237, 125, 49, 0.5)',
shadowOffsetY: 5,
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
offset: 0,
color: 'rgb(237, 125, 49)'
}, {
offset: 1,
color: 'rgb(237, 125, 49)'
}])
}
}
},
{
name: '3-5年经验',
data: data[2],
type: 'scatter',
symbolSize: function (data) {
return Math.sqrt(data[2]) / 5e2;
},
itemStyle: {
normal: {
shadowBlur: 10,
shadowColor: 'rgba(255, 192, 0, 0.5)',
shadowOffsetY: 5,
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
offset: 0,
color: 'rgb(255, 192, 0)'
}, {
offset: 1,
color: 'rgb(255, 192, 0)'
}])
}
}
},
{
name: '5-7年经验',
data: data[3],
type: 'scatter',
symbolSize: function (data) {
return Math.sqrt(data[2]) / 5e2;
},
itemStyle: {
normal: {
shadowBlur: 10,
shadowColor: 'rgba(91, 155, 213, 0.)',
shadowOffsetY: 5,
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
offset: 0,
color: 'rgb(91, 155, 213)'
}, {
offset: 1,
color: 'rgb(91, 155, 213)'
}])
}
}
},
{
name: '7-10年经验',
data: data[4],
type: 'scatter',
symbolSize: function (data) {
return Math.sqrt(data[2]) / 5e2;
},
itemStyle: {
normal: {
shadowBlur: 10,
shadowColor: 'rgba(112, 173, 71, 0.5)',
shadowOffsetY: 5,
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
offset: 0,
color: 'rgb(112, 173, 71)'
}, {
offset: 1,
color: 'rgb(112, 173, 71)'
}])
}
}
},
{
name: '10年以上经验',
data: data[5],
type: 'scatter',
symbolSize: function (data) {
return Math.sqrt(data[2]) / 5e2;
},
itemStyle: {
normal: {
shadowBlur: 10,
shadowColor: 'rgba(129, 227, 238, 0.5)',
shadowOffsetY: 5,
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
offset: 0,
color: 'rgb(129, 227, 238)'
}, {
offset: 1,
color: 'rgb(25, 183, 207)'
}])
}
}
},
]
series: data
};

106
src/views/ModelInsight/mlPopularEventsList/index.vue
Unescape View File

@ -1,60 +1,88 @@
<!--
* @Author: xw
* @Date: 2021-10-12 10:50:44
* @LastEditTime: 2021-10-25 14:52:13
* @LastEditTime: 2021-11-01 15:07:45
* @LastEditors: Please set LastEditors
* @Description: 热门事件列表
* @FilePath: /data-show/src/views/BrandInsight/popularEventsList/index.vue
-->
<template>
<div class="pe-ouuter">
<v-label-div title="热门事件列表" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div>
<div class="pe-inner">
<dv-scroll-board
:config="config"
:style="{ width: '100%', height: '346px' }"
/>
<div class="pe-ouuter">
<v-label-div title="热门事件列表" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div>
<div class="pe-inner">
<dv-scroll-board :config="config" :style="{ width: '100%', height: '20rem' }" />
</div>
</div>
</div>
</template>
<script>
import { getHotEventsList0528 } from "@/api/ModelInsight";
export default {
name: "mlPopularEventsList",
data() {
return {
config: {
headerBGC: "#0F2A4D",
oddRowBGC: "rgba(69, 149, 244, 0);",
evenRowBGC: "#0F2A4D;",
columnWidth: [400],
header: ["事件列表", "影响力", "时间", "关联车型"],
data: [
["2021广州车展，现场更多你没…", "40.90", "2021-08-17 12:00:00", "A3"],
["丰田威兰达高性能版配置曝光...", "39.90", "2021-08-17 12:00:00","Q3"],
["广州车展，15分钟抢空的限定…", "38.20", "2021-08-17 12:00:00","A4"],
["2021广州车展，现场更多你没…", "37.50", "2021-08-17 12:00:00","Q4"],
["全新本田思域发布动力提升内…", "36.50", "2021-08-17 12:00:00","A5"],
["全新本田思域发布动力提升内…", "36.50", "2021-08-17 12:00:00","Q5"],
["全新本田思域发布动力提升内…", "36.50", "2021-08-17 12:00:00","A6"],
["全新本田思域发布动力提升内…", "36.50", "2021-08-17 12:00:00","Q6"],
["全新本田思域发布动力提升内…", "36.50", "2021-08-17 12:00:00","Q7"],
["全新本田思域发布动力提升内…", "36.50", "2021-08-17 12:00:00","A7"],
],
},
};
},
name: "mlPopularEventsList",
props: ["brand", "model"],
data() {
return {
form: {
sBrand: "",
sSeriesName: "",
token: "",
},
config: {
},
};
},
watch: {
model: {
handler(val) {
if (val) {
this.form.token = this.getToken;
this.form.sBrand = this.brand;
this.form.sSeriesName = this.model;
this.getData();
}
},
immediate: true,
},
},
methods: {
getData() {
let obj = Object.assign({}, this.getCtime2, this.form);
getHotEventsList0528(obj).then((res) => {
let data = res.data || [];
let arr = [];
data.forEach((ele) => {
let a = [
ele.events_title,
ele.count,
ele.ctime,
ele.events_series,
];
arr.push(a);
});
this.config = {
headerBGC: "#1b4062",
oddRowBGC: "#173b6d",
evenRowBGC: "rgba(69, 149, 244, 0)",
columnWidth: [400],
rowNum: 6,
header: ["事件列表", "影响力", "时间", "关联车型"],
data: arr,
};
});
},
},
};
</script>
<style lang="less" scoped>
.pe-ouuter {
width: 912px;
height: 412px;
.pe-inner {
width: 100%;
height: calc(100% - 50px);
}
width: 912px;
height: 412px;
.pe-inner {
width: 100%;
height: calc(100% - 50px);
}
}
</style>

71
src/views/ModelInsight/mlWeiboKol/index.vue
Unescape View File

@ -1,7 +1,7 @@
<!--
* @Author: your name
* @Date: 2021-10-12 14:19:53
* @LastEditTime: 2021-10-25 14:57:49
* @LastEditTime: 2021-11-01 15:30:06
* @LastEditors: Please set LastEditors
* @Description: 微博KOL
* @FilePath: /data-show/src/views/BrandInsight/weiboKol/index.vue
@ -17,25 +17,82 @@
</div>
</div>
<div class="wk-in-d2">
<v-label-ctx label="名人" cont="2000" percentage="25%" color="#3373CC" contLabel="数量" :eStyle="{ height: '82px' }"></v-label-ctx>
<v-label-ctx label="政府" cont="2000" percentage="25%" color="#518ea9" contLabel="数量" :eStyle="{ height: '82px' }"></v-label-ctx>
<v-label-ctx label="大V" cont="1000" percentage="25%" color="#54BF93" contLabel="数量" :eStyle="{ height: '82px' }"></v-label-ctx>
<v-label-ctx label="企业" cont="1000" percentage="25%" color="#b38b14" contLabel="数量" :eStyle="{ height: '82px' }"></v-label-ctx>
<v-label-ctx label="其他" cont="2000" percentage="25%" color="#b56a2f" contLabel="数量" :eStyle="{ height: '82px' }"></v-label-ctx>
<vue-scroll>
<v-label-ctx v-for="(item,index) in labelData" :key="index" :label="item.key" :cont="item.value" :percentage="(item.value/total*100).toFixed(2) +'%'" :color="colors[index]" contLabel="数量" :eStyle="{ height: '5rem' }"></v-label-ctx>
</vue-scroll>
</div>
</div>
</div>
</template>
<script>
import { getBoauthenCount0528 } from "@/api/ModelInsight";
import createOpt from "./opt";
export default {
name: "mlWeiboKol",
props: ["brand", "model"],
data() {
return {
opt: createOpt(),
total: 0,
labelData: [],
form: {
sBrand: "",
sSeriesName: "",
token: "",
},
opt: {},
colors: [
"#54BF93",
"#3373CC",
"#CC9D12",
"#f15c80",
"#e4d354",
"#8085e8",
"#8d4653",
"#91e8e1",
"#f7a35c",
"#90ed7d",
"#54BF93",
"#3373CC",
"#CC9D12",
"#f15c80",
"#e4d354",
"#8085e8",
"#8d4653",
"#91e8e1",
"#f7a35c",
"#90ed7d",
],
};
},
watch: {
model: {
handler(val) {
if (val) {
this.form.token = this.getToken;
this.form.sBrand = this.brand;
this.form.sSeriesName = this.model;
this.getData();
}
},
immediate: true,
},
},
methods: {
getData() {
let obj = Object.assign({}, this.getCtime2, this.form);
getBoauthenCount0528(obj).then((res) => {
let data = res.data || [];
let total = 0;
data.forEach((ele) => {
total += ele.value * 1;
});
this.total = total;
this.labelData = data;
this.opt = createOpt(data, this.colors);
});
},
},
};
</script>

132
src/views/ModelInsight/mlWeiboKol/opt.js
Unescape View File

@ -1,13 +1,35 @@
/*
* @Author: your name
* @Date: 2021-10-12 14:33:51
* @LastEditTime: 2021-10-12 14:39:58
* @LastEditTime: 2021-11-01 15:30:48
* @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(ds=[], colors=[]) {
let arr = [];
for(let i = 0; i < ds.length; i++) {
let ele = ds[i];
if(ele.value*1 > 0) {
let obj = { value: ele.value*1, 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[i]
}])
}};
arr.push(obj)
}
}
return arr;
}
export default function createOpt(ds = [], colors= []) {
const data = createData(ds, colors)
return {
series: [
{
@ -17,66 +39,24 @@ export default function createOpt() {
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
position: 'center',
lineHeight: 30
},
emphasis: {
label: {
show: true,
fontSize: '40',
fontSize: '20',
color: "#ffff",
fontWeight: 'bold'
fontWeight: 'bold',
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: 2000, name: '政府', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
//给第一个设置0，第四个设置1，就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: '#518ea9'
}])} },
{ value: 1000, name: '大V', 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'
}])} },
{ 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: '#b56a2f'
}])} },
],
data: data,
},
{
@ -92,53 +72,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: 2000, name: '政府', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
//给第一个设置0，第四个设置1，就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: '#518ea9'
}])} },
{ value: 1000, name: '大V', 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'
}])} },
{ 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: '#b56a2f'
}])} },
],
data: data,
}
]

149
src/views/ModelInsight/mlWeiboPortraits/index.vue
Unescape View File

@ -1,7 +1,7 @@
<!--
* @Author: your name
* @Date: 2021-10-12 15:06:47
* @LastEditTime: 2021-10-25 14:58:03
* @LastEditTime: 2021-11-01 15:39:09
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandInsight/weiboPortraits/index.vue
@ -9,31 +9,158 @@
<template>
<div class="wp-outter">
<v-label-div title="微博人物画像" :showLine="false" :eStyle="{ 'border-style': 'none' }">
<v-tab-group :btns="['性别', '认证', '地区']"></v-tab-group>
<v-tab-group :btns="['性别', '认证', '地区']" @change="handlerTab"></v-tab-group>
</v-label-div>
<div class="wp-inner">
<div class="wp-in-d1">
<v-echarts :opt="opt"></v-echarts>
<v-echarts :opt="opt"></v-echarts>
</div>
<div class="wp-in-d2">
<v-label-ctx label="男性" cont="2200" percentage="25%" color="#3373CC" :eStyle="{ height: '121px' }"></v-label-ctx>
<v-label-ctx label="女性" cont="2200" percentage="25%" color="#CC9D12" :eStyle="{ height: '121px' }"></v-label-ctx>
<v-label-ctx label="未知" cont="2200" percentage="25%" color="#54BF93" :eStyle="{ height: '121px' }"></v-label-ctx>
<vue-scroll>
<v-label-ctx v-for="(item,index) in labelData" :key="index" :label="item.key" :cont="item.value" :percentage="(item.value/totalData*100).toFixed(2) +'%'" :color="colors[index]" :eStyle="{ height: '7.6rem' }"></v-label-ctx>
</vue-scroll>
</div>
</div>
</div>
</template>
<script>
import createOpt from "./opt"
import { getSexMergeWeiBo } from "@/api/ModelInsight";
import createOpt from "./opt";
export default {
name: "mlWeiboPortraits",
props: ["brand", "model"],
data() {
return {
opt: createOpt()
}
}
}
form: {
sBrand: "",
sSeriesName: "",
token: "",
},
attestation: [], // 认证
sex: [], // 性别
region: [], // 地区
opt: {},
labelData: [],
totalData: 0,
colors: [
"#54BF93",
"#3373CC",
"#CC9D12",
"#f15c80",
"#e4d354",
"#8085e8",
"#8d4653",
"#91e8e1",
"#f7a35c",
"#90ed7d",
"#54BF93",
"#3373CC",
"#CC9D12",
"#f15c80",
"#e4d354",
"#8085e8",
"#8d4653",
"#91e8e1",
"#f7a35c",
"#90ed7d",
],
};
},
watch: {
model: {
handler(val) {
if (val) {
this.form.token = this.getToken;
this.form.sBrand = this.brand;
this.form.sSeriesName = this.model;
this.getData();
}
},
immediate: true,
},
},
methods: {
// 切换数据
handlerTab(n) {
if (n === 0) {
this.labelData = this.sex;
let total = 0;
this.sex.forEach((ele) => {
total += ele.value * 1;
});
this.totalData = total;
this.opt = createOpt(this.sex, [
"#54BF93",
"#3373CC",
"#CC9D12",
]);
} else if (n === 1) {
this.labelData = this.attestation;
let total = 0;
this.attestation.forEach((ele) => {
total += ele.value * 1;
});
this.totalData = total;
this.opt = createOpt(this.attestation, this.colors);
} else {
this.labelData = this.region;
let total = 0;
this.region.forEach((ele) => {
total += ele.value * 1;
});
this.totalData = total;
this.opt = createOpt(this.region, this.colors);
}
},
// 获取后台数据
getData() {
let obj = Object.assign({}, this.getCtime2, this.form);
getSexMergeWeiBo(obj).then((res) => {
let data = res.data;
let attestation = data.attestation || {};
let sex = data.sex || {};
let region = data.RegionWeiBo || {};
let total = 0;
let wSex = [];
for (let key in sex) {
let obj = {
key: key,
value: sex[key],
};
total += sex[key] * 1;
wSex.push(obj);
}
let wAttestation = [];
for (let key in attestation) {
let obj = {
key: key,
value: attestation[key],
};
wAttestation.push(obj);
}
let wRegion = [];
for (let key in region) {
let obj = {
key: key,
value: region[key],
};
wRegion.push(obj);
}
this.sex = wSex;
this.attestation = wAttestation;
this.region = wRegion;
this.totalData = total;
this.labelData = this.sex;
this.opt = createOpt(this.sex, [
"#54BF93",
"#3373CC",
"#CC9D12",
]);
});
},
},
};
</script>
<style lang="less" scoped>

98
src/views/ModelInsight/mlWeiboPortraits/opt.js
Unescape View File

@ -1,13 +1,35 @@
/*
* @Author: your name
* @Date: 2021-10-12 15:14:58
* @LastEditTime: 2021-10-12 16:03:56
* @LastEditTime: 2021-11-01 15:36:27
* @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 createOpt() {
function createData(ds=[], colors=[]) {
let arr = [];
for(let i = 0; i < ds.length; i++) {
let ele = ds[i];
if(ele.value*1 > 0) {
let obj = { value: ele.value*1, 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[i]
}])
}};
arr.push(obj)
}
}
return arr;
}
export default function createOpt(ds=[], colors=[]) {
const data = createData(ds,colors)
return {
series: [
{
@ -18,52 +40,23 @@ export default function createOpt() {
label: {
show: false,
position: 'center',
fontSize: '40',
color: "#ffff",
lineHeight: 30
},
emphasis: {
label: {
show: true,
fontSize: '40',
fontSize: '20',
color: "#ffff",
formatter: (p)=>{
return p.data.name + '\n' + p.data.value;
},
formatter: function (p) {
return `${p.data.name}\n${p.percent}%\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'
}])} },
],
data: data
},
{
name: 'Access From1',
@ -78,36 +71,7 @@ export default function createOpt() {
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'
}])} },
],
data: data
}
]
}

51
src/views/ModelInsight/mlWeiboVolumeTrend/index.vue
Unescape View File

@ -1,7 +1,7 @@
<!--
* @Author: your name
* @Date: 2021-10-12 15:24:48
* @LastEditTime: 2021-10-25 14:58:22
* @LastEditTime: 2021-11-01 15:52:11
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandInsight/weiboVolumeTrend/index.vue
@ -11,21 +11,58 @@
<v-label-div title="微博声量趋势" :showLine="false" :eStyle="{ 'border-style': 'none' }">
</v-label-div>
<div class="wvt-inner">
<v-echarts :opt="opt"></v-echarts>
<v-echarts :opt="opt"></v-echarts>
</div>
</div>
</template>
<script>
import createOpt from "./opt"
import { getCountTime0528 } from "@/api/ModelInsight";
import createOpt from "./opt";
export default {
name: "ml-weibo-volume-trend",
props: ["brand", "model"],
data() {
return {
opt: createOpt()
}
}
}
form: {
sBrand: "",
sSeriesName: "",
token: "",
},
opt: {},
};
},
watch: {
model: {
handler(val) {
if (val) {
this.form.token = this.getToken;
this.form.sBrand = this.brand;
this.form.sSeriesName = this.model;
this.getData();
}
},
immediate: true,
},
},
methods: {
getData() {
let obj = Object.assign({}, this.getCtime2, this.form);
getCountTime0528(obj).then((res) => {
let data = res.data || [];
let dx = [];
let ds = [];
data.forEach((ele) => {
let key = ele.Time;
let value = ele.value;
dx.push(key);
ds.push(value);
});
this.opt = createOpt(dx, ds);
});
},
},
};
</script>
<style lang="less" scoped>

14
src/views/ModelInsight/mlWeiboVolumeTrend/opt.js
Unescape View File

@ -1,13 +1,13 @@
/*
* @Author: your name
* @Date: 2021-10-12 15:32:24
* @LastEditTime: 2021-10-12 16:47:07
* @LastEditTime: 2021-11-01 15:52:36
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandInsight/weiboVolumeTrend/opt.js
*/
import * as echarts from "echarts";
export default function createOpt() {
export default function createOpt(dx = [], ds = []) {
return {
grid: {
top: "16px",
@ -38,7 +38,13 @@ export default function createOpt() {
color: "#fff",
},
},
data: ['00:00', '00:40', '00:80', '12:00', '16:00', '20:00', '24:00']
axisLabel : {
formatter: (value) => {
let str = value.substring(10,16)
return str;
}
},
data: dx
},
yAxis: {
type: 'value',
@ -57,7 +63,7 @@ export default function createOpt() {
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
data: ds,
type: 'line',
color: '#546fc5',
areaStyle: {normal: {

Write Preview
Loading…
Cancel
Save