张雄 3 years ago
parent d9f565ec30
commit 2f53e57543

@ -13,6 +13,19 @@ export function getSummarizeMerge(params) {
})
}
// 主题分析-事件传播历程
export function getList(params) {
let obj = Object.assign({action: 'getList', sType: ''}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}
// 主题分析-总声量趋势
export function getVolumeTime(params) {
let obj = Object.assign({action: 'getVolumeTime', sType: ''}, params)
@ -169,3 +182,28 @@ export function getVAnalyze(params) {
})
}
// 主题分析-核心传播网民
export function getDiffuseZhuTi(params) {
let obj = Object.assign({action: 'getDiffuseZhuTi', sType: ''}, 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: ''}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}

@ -12,21 +12,29 @@
<span class="s1" :style="{background: color}"></span>
<span class="s2">{{label}}</span>
</div>
<div class="d3">
<span class="s1">粉丝数>1000W</span>
<span class="s2">{{cont[0]}}</span>
</div>
<div class="d2">
<span class="s1">>1千万粉</span>
<span class="s2">{{cont}}</span>
<span class="s1">粉丝数>500W</span>
<span class="s2">{{cont[1]}}</span>
</div>
<div class="d2">
<span class="s1">>5百万粉</span>
<span class="s2">{{cont}}</span>
<span class="s1">粉丝数>100W</span>
<span class="s2">{{cont[2]}}</span>
</div>
<div class="d2">
<span class="s1">>1百万粉</span>
<span class="s2">{{cont}}</span>
<span class="s1">粉丝数>50W</span>
<span class="s2">{{cont[3]}}</span>
</div>
<div class="d3">
<span class="s1">数量</span>
<span class="s2">{{percentage}}</span>
<div class="d2">
<span class="s1">粉丝数>20W</span>
<span class="s2">{{cont[4]}}</span>
</div>
<div class="d2">
<span class="s1">粉丝数>10W</span>
<span class="s2">{{cont[5]}}</span>
</div>
</div>
</template>
@ -44,8 +52,8 @@ export default {
default: "数量"
},
cont: {
type: [String, Number],
default: 0
type: Array,
default: []
},
percentage: {
type: String,
@ -75,7 +83,7 @@ export default {
border-bottom: 1px solid #0F2A4D;
.d1 {
display: block;
width: 12%;
width: 14%;
.s1 {
display: block;
width: 66%;
@ -90,7 +98,7 @@ export default {
}
}
.d2 {
width: 13%;
width: 12%;
.s1 {
display: block;
font-size: 12px;
@ -104,7 +112,7 @@ export default {
}
}
.d3 {
width: 12%;
width: 14%;
.s1 {
display: block;
font-size: 12px;

@ -230,8 +230,8 @@ export default {
}
}
/deep/ .__view {
display: flex !important;
justify-content: flex-start !important;
align-items: center !important;
display: flex;
justify-content: flex-start;
align-items: center;
}
</style>

@ -116,7 +116,6 @@ export default {
getDiffuseZhuTi(obj).then((res) => {
this.load = true;
let data = res.data;
console.log(data)
this.countObj.sum = data.sum;
this.countObj.volume = data.volume;
this.countObj.total = data.total;

@ -1,18 +1,17 @@
<template>
<div class="bv-container">
<div class="bv-container" v-loading="load">
<v-label-div title="大V分析" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div>
<div class="bv-inner">
<div class="bv-d1">
<v-echarts :opt="opt"></v-echarts>
</div>
<div class="bv-d2">
<vue-scroll>
<v-label-table v-for="(item,index) in labelData"
:key="index" :label="item.key"
<v-label-table v-for="(item,index) in tableList"
:key="index" :label="item.key"
:cont="item.value"
:percentage="(item.value/total*100).toFixed(2) +'%'"
:color="colors[index]" contLabel="数量"
:eStyle="{ height: '5rem' }">
:color="colors[index-1]"
:eStyle="{ height: '6.6rem' }">
</v-label-table>
</vue-scroll>
</div>
@ -21,15 +20,19 @@
</template>
<script>
import {getVAnalyze} from "@/api/ThemeAnalizeDec"
import createOpt from "./opt"
export default {
name: "BigvAnalize",
data() {
return {
opt: {},
load: false,
labelData: [
{key: '微博', value: 1250},
{key: '微信', value: 2400}
],
tableList: [],
total: 14000,
colors: [
"#54BF93",
@ -54,23 +57,70 @@ export default {
"#90ed7d",
],
}
},
created() {
this.form = this.$route.query;
this.getData();
},
methods: {
getData() {
let obj = Object.assign({}, this.form);
getVAnalyze(obj).then(res => {
let data = res.data;
let tableData = data.getVAnalyze;
//--//
let tableList = [];
for(let i = 1; i<tableData.Columns.length;i++){
let val = [];
let isEmpty = true;
tableData.Rows.forEach(ele => {
val.push(ele[i]);
if(ele[i] != 0) {
isEmpty = false
}
})
let obj = {
key: tableData.Columns[i],
value: val,
isEmpty: isEmpty
}
tableList.push(obj);
}
this.tableList = tableList
//--//
let pieData = data.pie;
let labelData = [];
for(let key in pieData) {
let obj = {
key: key,
value: pieData[key]
};
labelData.push(obj);
};
this.opt = createOpt(labelData, this.colors);
this.load = false
})
}
}
}
</script>
<style lang="less">
.bv-container {
width: 100%;
width: 936px;
height: 460px;
.bv-inner {
display: flex;
justify-content: flex-start;
width: 100%;
height: 100%;
.bv-d1 {
width: 430px;
width: 370px;
height: calc(100% - 48px);
}
.bv-d2 {
width: 430px;
height: auto;
width: 490px;
height: calc(100% - 48px);
margin-left: 16px;
}
}

@ -0,0 +1,80 @@
/*
* @Author: your name
* @Date: 2021-10-12 14:33:51
* @LastEditTime: 2021-10-29 19:20:12
* @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(ds=[], colors=[]) {
let arr = [];
for(let i = 0; i < ds.length; i++) {
let ele = ds[i];
if(true) {
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: [
{
name: 'Access From0',
type: 'pie',
radius: ['62%', '74%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center',
lineHeight: 30
},
emphasis: {
label: {
show: true,
fontSize: '20',
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: ['79%', '86%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
labelLine: {
show: false
},
center: ['50%', '50%'],//边框位置
data: data,
}
]
}
}

@ -1,5 +1,5 @@
<template>
<div class="ba-container">
<div class="ba-container" v-loading="load">
<v-label-div title="博主区域分布" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div>
<div class="ba-inner">
<div class="ba-d1">
@ -13,20 +13,65 @@
</template>
<script>
import {getRegionWeiBo} from "@/api/ThemeAnalizeDec"
import createOptD1 from "./opt1";
import createOptD2 from "./opt2";
export default {
name: "BloggerArea",
data() {
return {
load: false,
form: {
token: ''
},
opt1: {},
opt2: {}
}
},
created() {
this.form = this.$route.query;
this.getData();
},
methods: {
getData() {
let obj = Object.assign({}, this.form);
getRegionWeiBo(obj).then(res => {
let data = res.data || {};
let arr = this.toArr(data);
let dx = []; //
let ds = []; //
arr.forEach((ele) => {
ele.name = ele.name.replace('省','')
let value = ele.value;
dx.push(ele.name);
ds.push(value);
});
let dm = arr //
this.opt1 = createOptD1(dx, ds);
this.opt2 = createOptD2(dm);
this.load = false;
})
},
//
toArr(obj) {
let arr = [];
for (let key in obj) {
let o = {
name: key,
value: obj[key] * 1,
};
arr.push(o);
}
return arr;
},
}
}
</script>
<style lang="less">
.ba-container {
width: 100%;
width: 936px;
height: 460px;
.ba-inner {
display: flex;
justify-content: flex-start;

@ -0,0 +1,83 @@
/*
* @Author: your name
* @Date: 2021-10-09 12:38:34
* @LastEditTime: 2021-10-14 11:48:19
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/Index/tailInsight/opt.js
*/
import * as echarts from "echarts";
import { bigNumberTransform } from "@/utils/gol/dataTool"
export default function createOptD1(dx=[],ds=[]) {
return {
grid: {
left: 16,
right: '5%',
bottom: 10,
top: "1%",
containLabel: true
},
tooltip: {
trigger: "axis",
backgroundColor: "#08182F",
color: "#fff",
borderColor: "#3373CC",
textStyle: {
color: "#fff", //设置文字颜色
},
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
},
xAxis: {
type: 'value',
axisLine: {
show: false,
lineStyle: {
color: "#fff",
},
},
axisLabel: {
formatter: (value) => {
let str = bigNumberTransform(value);
return str;
}
},
splitLine: {
lineStyle: {
type: "dashed", // y轴分割线类型
color: "#012b4b",
},
},
},
yAxis: {
type: 'category',
data: dx,
axisTick: {
show: false,
},
axisLine: {
show: false,
lineStyle: {
color: "#fff",
},
},
inverse: true
},
series: [
{
name: '2011',
type: 'bar',
barWidth: 20,
data: ds,
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: '#010B19'
}, {
offset: 1,
color: '#2f68b4'
}]),
}
]
}
}

@ -0,0 +1,94 @@
/*
* @Author: your name
* @Date: 2021-10-14 11:53:16
* @LastEditTime: 2021-11-04 17:17:02
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/WeiboDetails/weiboUserActiveArea/opt2.js
*/
export default function createOptD2(dm) {
return {
tooltip: {
trigger: "item",
backgroundColor: "#08182F",
color: "#fff",
borderColor: "#3373CC",
textStyle: {
color: "#fff", //设置文字颜色
},
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
},
// geo: {
// show: true,
// map: 'china',
// roam: false,//地图设置不可拖拽,固定的
// itemStyle: {
// normal: {
// borderWidth: 0,
// shadowColor: 'rgba(0,54,255, 1)',
// shadowBlur: 100
// }
// }
// },
visualMap: {
type: 'continuous',
show: false,
min: 0,
max: 2000,
text: ['高', '低'],
orient: 'horizontal',
itemWidth: 15,
itemHeight: 200,
right: 0,
bottom: 30,
inRange: {
color: ['#0393d2', '#75ddff']
},
textStyle: {
color: 'white'
}
},
series: [
{
name: "微博区域",
type: "map",
mapType: "china",
roam: false,
zoom: 1,//默认地图在容器中显示zoom:1,可根据需求放大缩小地图
left: 16,
top: 20,
right: 10,
bottom: 10,
selectedMode:'multiple',
colorBy: 'data',
itemStyle: {
areaColor: '#001f5b',//地图区域背景颜色
borderColor: '#005cf9',//地图边界颜色
shadowColor: '#005cf9',
emphasis: {
areaColor: '#3066ba',//鼠标滑过区域颜色
label: {
color: '#fff'
}
}
},
label: {
normal: {
show: false
},
},
// select: {
// label: {
// show: false
// },
// itemStyle: {
// areaColor: '#3edffe'
// }
// },
data: dm
}
]
}
}

@ -1,100 +1,108 @@
<template>
<div class="ctu-container">
<v-label-div title="核心传播网民" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div>
<div class="d1-inner">
<div class="pv-item" v-for="(item,index) in list" :key="index">
<div class="dm">
<img class="mm1" :src="item._source.profileimgurl" width="100%" height="100%">
</div>
<div class="d-f">
<div class="d1">{{item._source.user_author}}</div>
<div class="d2">粉丝数<span class="d2-s1">{{bigNumberTransform(item._source.weibofans)}}</span></div>
</div>
</div>
<div class="ctu-outter" v-loading="load">
<v-label-div title="情感分布" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div>
<div class="ctu-inner">
<div class="ctu-d1">
<v-echarts :opt="opt"></v-echarts>
</div>
<div class="ctu-d2">
<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: '7.95rem' }">
</v-label-ctx>
</vue-scroll>
</div>
</div>
</div>
</template>
<script>
import {bigNumberTransform} from "@/utils/gol/dataTool"
import {getVAnalyze} from "@/api/ThemeAnalizeDec"
import createOpt from "./opt"
export default {
name: "CoreTransformUser",
name: "SourceDivide",
data() {
return {
bigNumberTransform: bigNumberTransform,
list: [
{ _source:
{profileimgurl: '', user_author: '1111', weibofans: '1223'}
},
{ _source:
{profileimgurl: '', user_author: '2222', weibofans: '321214'}
},
]
load: false,
opt: {},
labelData: [],
total: 0,
colors: [
'#546fc5',
'#91cb74',
'#f9c857',
'#ed6565',
'#72bfde',
'#3aa272',
'#fb8351',
'rgb(135,71,165)',
"#54BF93",
"#3373CC",
"#CC9D12",
"#f15c80",
"#e4d354",
"#8085e8",
"#8d4653",
"#91e8e1",
"#f7a35c",
],
form: {
token: ''
}
}
},
created() {
this.form = this.$route.query;
this.getData()
},
methods: {
getData() {
let obj = Object.assign({}, this.form);
this.load = true;
getVAnalyze(obj).then(res => {
let data = res.data.getAffectionsWeiBo;
let labelData = [];
let totalVal = 0;
for(let key in data) {
let obj = {
key: key,
value: data[key]
};
totalVal = totalVal + data[key] * 1.0;
labelData.push(obj);
};
this.labelData = labelData;
this.total = totalVal
this.opt = createOpt(labelData, this.colors);
this.load = false
})
}
}
}
</script>
<style lang="less">
.ctu-container {
width: 100%;
.d1-inner {
width: 100%;
height: calc(100% - 48px);
margin-left: 16px;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
.pv-item {
width: 285px;
height: 64px;
display: flex;
justify-content: flex-start;
align-items: center;
position: relative;
margin-right: 24px;
margin-top: 12px;
.dm {
position: absolute;
width: 68px;
height: 68px;
border-radius: 68px;
border: 1px solid #ccc;
left: 0px;
top: 0px;
background-color: #fff;
z-index: 10;
.mm1 {
width: 100%;
height: 100%;
border-radius: 74px;
}
}
.d-f {
position: absolute;
width: 249px;
height: 64px;
left: 36px;
padding-left: 65px;
background-image: url("../../../assets/images/BrandInsight/img_yhtx.png");
.d1 {
font-size: 14px;
color: #fff;
font-weight: 500;
margin-top: 10px;
height: 20px;
}
.d2 {
color: #70869a;
font-size: 12px;
.d2-s1 {
font-size: 12px;
font-family: Bebas;
color: #f49847;
}
}
}
}
.ctu-outter {
width: 936px;
height: 460px;
.ctu-inner {
display: flex;
justify-content: flex-start;
width: 100%;
height: 100%;
.ctu-d1 {
width: 430px;
height: calc(100% - 48px);
}
.ctu-d2 {
width: 460px;
height: calc(100% - 48px);
margin-left: 16px;
}
}
}
</style>

@ -0,0 +1,80 @@
/*
* @Author: your name
* @Date: 2021-10-12 14:33:51
* @LastEditTime: 2021-10-29 19:20:12
* @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(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: [
{
name: 'Access From0',
type: 'pie',
radius: ['62%', '74%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center',
lineHeight: 30
},
emphasis: {
label: {
show: true,
fontSize: '20',
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: ['79%', '86%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
labelLine: {
show: false
},
center: ['50%', '50%'],//边框位置
data: data,
}
]
}
}

@ -1,21 +1,229 @@
<template>
<div class="container1">
<div class="et-container1" v-loading="load">
<v-label-div title="事件传播历程"></v-label-div>
<div class="et-ts">
<div class="et-ts-d1" @click="goL"><img src="../../../assets/images/EventInsight/img_zuo.png" /></div>
<div class="et-ts-d2">
<!-- <vue-scroll ref="vs"> -->
<div class="dd1-label">
<div class="d1x">新车上市</div>
<div class="d2">状态事件发生</div>
<div class="d3">2021-06-01 11:26</div>
</div>
<template v-for="(item,index) in list">
<div class="dd1-item" :key="index">
<img class="m1" :src="index % 2 === 0 ? m2 : m1" :style="index % 2 === 0 ? 'margin-top: 8.2rem' : ''" />
<div class="dd1-fen"></div>
<div class="dt-d1" :style="index % 2 === 0 ? 'margin-top: 8.6rem' : ''">
<div class="d1" :style="index % 2 === 0 ? 'color: #3373CC' : 'color:#CC7733'" @click="openUrl(item._source.url)">{{item._source.title|doStr(30)}}</div>
<div class="d2">{{item._source.source}}</div>
<div class="d3">{{item._source.sourcetime}}</div>
</div>
</div>
</template>
<!-- </vue-scroll> -->
</div>
<div class="et-ts-d1" @click="goR"><img src="../../../assets/images/EventInsight/img_xan.png" /></div>
</div>
</div>
</template>
<script>
import {getList} from "@/api/ThemeAnalizeDec"
export default {
name: "EventTransform"
name: "EventTransform",
data() {
return {
load: false,
form: {
token: '',
sTimeType: '',
sQuDao: '',
sQingGan: '',
sTitle: '',
iPageIndex: 1, //
iPageSize: 20, //
sType: 'ZhuTiFenXiBl',
sGuid: '',
website: '',
iTimeType: 0 //
},
list: [],
x: 0,
m1: require("../../../assets/images/EventInsight/img_ct.png"),
m2: require("../../../assets/images/EventInsight/img_lt.png"),
}
},
created() {
this.form = this.$route.query;
this.getData();
},
methods: {
getData() {
let o = {
iPageIndex: 1,
iPageSize: 20,
iTimeType: 0
};
let obj = Object.assign({}, this.form, o);
getList(obj).then(res => {
this.load = true;
let data = res.data || [];
this.list = data;
this.load = false;
})
},
goback() {
this.$router.go(-1);
},
openUrl(url) {
window.open(url);
},
goL() {
const {h} = this.$refs.vs.getScrollProcess();
if(h === 0) return;
const { scrollLeft } = this.$refs.vs.getPosition();
this.x = scrollLeft;
this.x -= 150;
this.$refs.vs.scrollTo(
{
x: this.x,
},
300
);
},
goR() {
const {h} = this.$refs.vs.getScrollProcess();
if(h === 1) return;
const { scrollLeft } = this.$refs.vs.getPosition();
this.x = scrollLeft;
this.x += 150;
this.$refs.vs.scrollTo(
{
x: this.x,
},
300
);
}
}
}
</script>
<style lang="less">
.container1 {
.et-container1 {
width: 100%;
height: 460px;
border: 2px solid #0f2a4d;
margin-top: 16px;
overflow: hidden;
.et-ts {
position: relative;
width: 100%;
padding: 0px 16px;
height: calc(100% - 48px);
display: flex;
justify-content: space-between;
align-items: center;
.et-ts-s1 {
position: absolute;
color: #fff;
top: 16px;
left: 16px;
font-size: 16px;
color: #3373cc;
}
.et-ts-d2 {
width: 1726px;
height: 400px;
display: flex;
justify-content: flex-start;
align-items: center;
position: relative;
.dd1-label {
.d1x {
width: 120px;
height: 120px;
background-image: url("../../../assets/images/EventInsight/img_xlvq.png");
background-repeat: no-repeat;
background-size: cover;
font-size: 14px;
color: #b0deff;
text-align: center;
line-height: 120px;
}
.d1 {
width: 120px;
height: 120px;
background-image: url("../../../assets/images/EventInsight/img_xlq.png");
background-repeat: no-repeat;
background-size: cover;
font-size: 14px;
color: #b0deff;
text-align: center;
line-height: 120px;
}
.d2 {
font-size: 16px;
color: #fff;
text-align: center;
}
.d3 {
font-size: 14px;
font-family: Bebas;
color: #616974;
text-align: center;
}
}
.dd1-fen {
position: absolute;
width: 100%;
height: 2px;
background: #004877;
left: 0px;
top: 136px;
}
.dd1-item {
position: relative;
width: 260px;
height: 320px;
display: flex;
flex-shrink: 0;
padding-left: 84px;
justify-content: flex-start;
.m1 {
height: 148px;
}
.dt-d1 {
margin-left: 18px;
.d1 {
width: 120px;
padding-top: 16px;
height: 88px;
font-size: 16px;
cursor: pointer;
}
.d2 {
font-size: 14px;
color: #fff;
}
.d3 {
font-size: 13px;
font-family: Bebas;
color: #616974;
}
}
}
}
.et-ts-d1 {
width: 32px;
height: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
img {
cursor: pointer;
}
}
}
}
</style>

@ -1,6 +1,6 @@
<template>
<div class="ts-outter" v-loading="load">
<v-label-div title="主题调性分布/男女比例认证非认证">
<v-label-div title="主题调性分布">
<v-tab-group :btns="['性别', '认证']" @change="handlerTab"></v-tab-group>
</v-label-div>
<div class="ts-inner">

@ -37,7 +37,7 @@ export default function createOpt(ds = [], color = []) {
{
name: 'Access From0',
type: 'pie',
radius: ['65%', '80%'],
radius: ['62%', '74%'],
avoidLabelOverlap: false,
label: {
show: false,
@ -63,7 +63,7 @@ export default function createOpt(ds = [], color = []) {
{
name: 'Access From1',
type: 'pie',
radius: ['86%', '94%'],
radius: ['79%', '86%'],
avoidLabelOverlap: false,
label: {
show: false,

@ -1,5 +1,5 @@
<template>
<div class="tf-container">
<div class="tf-container" v-loading="load">
<v-label-div title="传播途径" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div>
<div class="tf-inner">
<div class="tf-d1">
@ -10,21 +10,21 @@
<img class="m1" src="../../../assets/images/EventInsight/ic_cbl.png" />
<div class="d1">
<span class="ss1">最大层级</span>
<span class="ss2">111</span>
<span class="ss2">{{ countObj.sum }}</span>
</div>
</div>
<div class="d-r-item">
<img class="m1" src="../../../assets/images/EventInsight/ic_wbfg.png" />
<div class="d1">
<span class="ss1">微博覆盖人数</span>
<span class="ss2">222</span>
<span class="ss2">{{ countObj.volume|formatMoney(0,'',',') }}</span>
</div>
</div>
<div class="d-r-item">
<img class="m1" src="../../../assets/images/EventInsight/img_ljgj.png" />
<div class="d1">
<span class="ss1">总转发人数</span>
<span class="ss2">333</span>
<span class="ss2">{{ countObj.total }}</span>
</div>
</div>
</div>
@ -33,11 +33,80 @@
</template>
<script>
import createOpt from "./opt";
import {getDiffuseZhuTi} from "@/api/ThemeAnalizeDec"
export default {
name: "TransformMethod",
data() {
return {
opt:{}
opt:{},
load: false,
total: 0,
sum: 0,
volume: 0,
form: {
token: "",
sRele: "",
},
countObj: {
volume: 0,
total: 0,
sum: 0,
},
colors: [
"#FFB600",
"#886CFF",
"#0084FF",
"#4CB690",
"#58B458",
"#6C6C6C",
"#F56161",
"#FC754C",
"#5F5EEC",
],
}
},
created() {
this.form = this.$route.query;
this.getData();
},
methods: {
getData() {
let obj = Object.assign({}, this.form);
getDiffuseZhuTi(obj).then(res => {
this.load = true;
let data = res.data;
this.countObj.sum = data.sum;
this.countObj.volume = data.volume;
this.countObj.total = data.total;
let getCoreDiffuseWeiBo = data.getCoreDiffuseWeiBo || [];
this.list = getCoreDiffuseWeiBo;
let listIdName = data.listIdName || [];
let listPid = data.listPid || [];
let nodes = listIdName;
let edges = listPid;
getCoreDiffuseWeiBo.forEach((ele) => {
let _source = ele._source;
let xgmid = _source.xgmid || "";
nodes.forEach(e => {
if(e.id === xgmid) {
e.value = _source.volume
} else {
e.value = 0
}
})
});
nodes.forEach((ele) => {
let colorSet = new Set(this.colors);
let curIndex = Math.round(
Math.random() * (colorSet.size - 1)
);
ele.color = this.colors[curIndex];
});
let o = { nodes, edges };
this.opt = createOpt(o);
this.load = false;
})
}
}
}
@ -45,7 +114,8 @@ export default {
<style lang="less">
.tf-container {
width: 100%;
width: 936px;
height: 460px;
.tf-inner {
width: 100%;
height: calc(100% - 48px);
@ -58,7 +128,7 @@ export default {
.tf-d2 {
.d-r-item {
width: 264px;
height: 109px;
height: 134px;
display: flex;
justify-content: flex-start;
align-items: center;

@ -0,0 +1,82 @@
/*
* @Author: your name
* @Date: 2021-10-14 19:32:39
* @LastEditTime: 2021-11-11 09:46:12
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/WeiboDetails/weiboSpreadFission/opt.js
*/
export default function createOpt(data) {
return {
tooltip: {
trigger: "item",
backgroundColor: "#08182F",
color: "#fff",
borderColor: "#3373CC",
textStyle: {
color: "#fff", //设置文字颜色
},
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
},
title: {
show: false,
text: 'NPM Dependencies'
},
animationDurationUpdate: 1500,
animationEasingUpdate: 'quinticInOut',
series: [
{
type: 'graph',
layout: 'none',
// progressiveThreshold: 700,
data: data.nodes.map(function (node) {
return {
x: node.x,
y: node.y,
id: node.id,
name: node.name,
value: node.value,
symbolSize: node.symbolSize,
itemStyle: {
color: node.color
}
};
}),
links: data.edges.map(function (edge) {
return {
source: edge.source,
target: edge.target
};
}),
emphasis: {
focus: 'adjacency',
label: {
position: 'right',
show: true
}
},
label: {
show: true,
color: '#fff',
position: 'right',
formatter: '{b}'
},
labelLayout: {
hideOverlap: true
},
scaleLimit: {
min: 0.4,
max: 2
},
roam: true,
lineStyle: {
color: 'source',
width: 0.5,
curveness: 0.3,
opacity: 0.7
}
}
]
}
}

@ -42,7 +42,7 @@ export default {
<style lang="less">
.wa-container1 {
width: 100%;
height: 920px;
height: 970px;
border: 2px solid #0f2a4d;
margin-top: 16px;
overflow: hidden;

Loading…
Cancel
Save