lyl事件洞察点击事件列表

prod
阿丽 3 years ago
parent 5006eb2d86
commit 28ceafd3aa

@ -0,0 +1,207 @@
import httpService from "@/request"
// 事件详情-信息
export function getEventData(params) {
let obj = Object.assign({action: 'getEventData'}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}
// 单个事件数据-进入数据列表页
export function getList(params) {
let obj = Object.assign({action: 'getList', sType: 'BrandDataHot'}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}
// 单个事件数据列表导出
export function toExcel(params) {
let obj = Object.assign({action: 'toExcel', sType: 'BrandData'}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}
// 事件影响力-事件影响力
export function getCountOrEffectOrHot(params) {
let obj = Object.assign({action: 'getCountOrEffectOrHot', sType: 'HotEvent'}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}
// 传播态势-传播态势
export function getSourcetypeTime(params) {
let obj = Object.assign({action: 'getSourcetypeTime', sType: 'HotEvent'}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}
// 调性分布趋势-调性分布趋势
export function getAffectionsTime(params) {
let obj = Object.assign({action: 'getAffectionsTime', sType: 'HotEvent'}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}
// 事件传播历程-事件传播历程
export function getEventSpreadProcess0528(params) {
let obj = Object.assign({action: 'getEventSpreadProcess0528', sType: 'HotEvent'}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}
// 媒体解读-列表
export function getSource(params) {
let obj = Object.assign({action: 'getSource', sType: 'HotEvent'}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}
// 媒体解读-热门词云
export function getHotWord(params) {
let obj = Object.assign({action: 'getHotWord', sType: 'HotEvent'}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}
//媒体解读-正面词云
export function getPositive(params) {
let obj = Object.assign({action: 'getPositive', sType: 'HotEvent'}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}
// 媒体解读-负面词云
export function getNegative(params) {
let obj = Object.assign({action: 'getNegative', sType: 'HotEvent'}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}
// 传播途径-传播途径
export function getDiffuseZhuTi(params) {
let obj = Object.assign({action: 'getDiffuseZhuTi', 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 getSourcetypeTime1(params) {
let obj = Object.assign({action: 'getSourcetypeTime', sType: 'BrandWeiYi'}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}
// 尾翼分析-重点媒体分布
export function getWebsite(params) {
let obj = Object.assign({action: 'getWebsite', sType: 'BrandWeiYi'}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}
// 尾翼分析-正面词云
// export function getPositive(params) {
// let obj = Object.assign({action: 'getPositive', sType: 'BrandWeiYi'}, params)
// return httpService({
// url: `/api/v6.ashx`,
// method: 'post',
// data: obj,
// headers: {
// 'content-type': 'application/x-www-form-urlencoded'
// }
// })
// }
// 尾翼分析-负面词云
// export function getNegative(params) {
// let obj = Object.assign({action: 'getNegative', sType: 'BrandWeiYi'}, params)
// return httpService({
// url: `/api/v6.ashx`,
// method: 'post',
// data: obj,
// headers: {
// 'content-type': 'application/x-www-form-urlencoded'
// }
// })
// }

@ -10,7 +10,7 @@
<div class="esp-outter">
<v-label-div title="事件传播历程">
</v-label-div>
<div class="coe-ts">
<div class="coe-ts">
<div class="coe-ts-d1"><img src="../../../assets/images/EventInsight/img_zuo.png" /></div>
<div class="coe-ts-d2">
<vue-scroll>
@ -99,14 +99,45 @@
</template>
<script>
import { getEventSpreadProcess0528 } from "@/api/EventdEC";
export default {
name: "esprocess",
data() {
return {
m1: require("../../../assets/images/EventInsight/img_ct.png"),
m2: require("../../../assets/images/EventInsight/img_lt.png"),
}
}
form: {
sBrand: "",
token: "",
},
props: {
id: {
type: String,
default: "",
},
},
m1: require("../../../assets/images/EventInsight/img_ct.png"),
m2: require("../../../assets/images/EventInsight/img_lt.png"),
};
},
created() {
this.form.token = this.getToken;
this.form.sBrand = this.getBrand.brandname || "奥迪";
this.events_id = this.$route.query.events_id || "";
this.getDdta();
},
methods: {
getDdta() {
let obj = Object.assign({}, this.form);
this.load = true;
getEventSpreadProcess0528(obj).then((res) => {
let data = res.data;
this.data = data;
this.load = false;
});
},
goback() {
this.$router.go(-1);
},
},
};
</script>

@ -22,12 +22,20 @@
</template>
<script>
import createOpt from "./opt"
import createOpt from "./opt";
import { getTwoTime } from "@/api/comm";
import { getSourcetypeTime } from "@/api/EventdEC";
export default {
name: "incidentSpreadSituation",
data() {
return {
opt: createOpt(),
props: {
id: {
type: String,
default: "",
},
},
opt: {},
selVal: 1,
selDatas: [
{
@ -46,14 +54,56 @@ export default {
key: 4,
label: "自定义",
},
],
}
],
form: {
sBrand: "",
token: "",
sSeriesName: ""
},
};
},
created() {
this.form.token = this.getToken;
this.brand = this.getBrand.brandname || "奥迪";
this.form.sSeriesName = this.getModel.name;
this.getDdta();
},
methods: {
//
getSelect() {
getTwoTime().then((res) => {
this.selDatas = res.data;
if (!this.form.sTimeType) {
this.form.sTimeType = this.selDatas[0].key;
this.setCtime2(this.form);
}
});
},
getDdta() {
let obj = Object.assign({}, this.getCtime2, this.form);
this.load = true;
getSourcetypeTime(obj).then((res) => {
let data = res.data || [];
let dx = [];
let ds = [];
data.forEach((ele) => {
let key = ele.Time;
let value = ele.Data;
dx.push(key);
ds.push(value);
});
this.opt = createOpt(dx, ds);
this.load = false;
});
},
//
handleChange() {
}
}
this.setCtime2(this.form);
if (this.form.sTimeType != 4) {
this.reload();
}
},
},
};
</script>

@ -1,18 +1,60 @@
/*
* @Author: your name
* @Date: 2021-10-12 10:11:24
* @LastEditTime: 2021-10-19 19:34:14
* @LastEditTime: 2021-11-01 14:25:41
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandInsight/titsopo/opt.js
*/
export default function createOpt() {
import * as echarts from "echarts";
// import { bigNumberTransform } from "@/utils/gol/dataTool"
let colors = ['#546fc5', '#91cb74', '#f9c857', '#ed6565', '#72bfde', '#3aa272', '#fb8351'];
function createData(ds = []) {
let arr = [];
for (let i = 0; i < ds.length; i++) {
let arr1 = ds[i];
for (let j = 0; j < arr1.length; j++) {
let n = arr.findIndex(ele => {
return ele.name === arr1[j].key;
})
if (n === -1) {
let obj =
{
name: arr1[j].key,
type: 'line',
symbol: 'none',
areaStyle: {
normal: {
opacity: 0.4,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, color: colors[j] // 0% 处的颜色
}, {
offset: 1, color: '#000' // 100% 处的颜色
}]
),
}
},
emphasis: {
focus: 'series'
},
data: [arr1[j].value]
}
arr.push(obj)
} else {
arr[n].data.push(arr1[j].value)
}
}
}
return arr;
}
export default function createOpt(dx=[], ds=[]) {
let data = createData(ds)
return {
grid: {
left: 16,
right: 26,
bottom: 16,
top: 52,
left: '3%',
right: '2%',
bottom: '3%',
top: '15%',
containLabel: true
},
tooltip: {
@ -45,7 +87,13 @@ export default function createOpt() {
color: "#fff",
},
},
data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00']
axisLabel: {
formatter: (value) => {
let str = value.substring(10, 16)
return str;
}
},
data: dx
},
yAxis: {
type: 'value',
@ -62,80 +110,6 @@ export default function createOpt() {
},
},
},
series: [
{
name: '新闻',
type: 'line',
symbol: 'none',
areaStyle: {
opacity: 0.4
},
emphasis: {
focus: 'series'
},
data: [2000, 1600, 1000, 2200, 2300, 2100, 1900]
},
{
name: '微信',
type: 'line',
symbol: 'none',
areaStyle: {
opacity: 0.4
},
emphasis: {
focus: 'series'
},
data: [1000, 1100, 1300, 2000, 1800, 2100, 1600]
},
{
name: '论坛',
type: 'line',
symbol: 'none',
areaStyle: {
opacity: 0.4
},
emphasis: {
focus: 'series'
},
data: [1200, 1200, 1400, 2100, 1400, 1900, 2000]
},
{
name: '微博',
type: 'line',
symbol: 'none',
areaStyle: {
opacity: 0.4
},
emphasis: {
focus: 'series'
},
data: [1200, 1200, 1350, 1550, 1750, 1900, 2000]
},
{
name: 'APP',
type: 'line',
symbol: 'none',
areaStyle: {
opacity: 0.4
},
emphasis: {
focus: 'series'
},
data: [1260, 1280, 1390, 1570, 1790, 1950, 2020]
},
{
name: '其他',
type: 'line',
symbol: 'none',
areaStyle: {
opacity: 0.4
},
emphasis: {
focus: 'series'
},
data: [1260, 1280, 1390, 1570, 1790, 1950, 2020]
},
]
series: data
}
}

@ -14,7 +14,7 @@
<v-btn @click="goback"></v-btn>
</v-label-div>
<div class="edec-d1-dd1">
<div class="d1">新车上市</div>
<div class="d1">{{this.form.sBrand}}</div>
<div class="d2">
<div class="s1">延续哈弗H6设计 哈弗H6S内饰官图发布</div>
<div class="s2">此前有报道称广汽丰田赛那SIENNA(参数|询价)将于8月29日亮相2021成都车展不过我们从官方获悉到最新消息新车将于8月28日在成都等多城市联合首发亮相并实车现身成都车展按照规划新车有望在2021年下半年正式上市作为丰田旗下的一款MPV车型由广汽丰田进行国产在官方的释义中赛那的名称中指赛过超越意味着霸气尽显强者姿态一览无余则包含了霎那不负片刻快乐以及致远时刻向幸福出发的美好寓意此前有报道称广汽丰田赛那SIENNA(参数|询价)将于8月29日亮相2021成都车</div>
@ -24,7 +24,8 @@
<div class="d1" style="margin-left: 16px">
<img class="m1" src="../../assets/images/EventInsight/ic_kssj.png" />
<span class="s1">开始时间</span>
<span class="s2">2021-08-01 00:59:18</span>
<span class="s2">{{Time}}</span>
<a-pagination v-model="form.iPageIndex" :Time="Time" show-less-items/>
</div>
<div class="d1">
<img class="m1" src="../../assets/images/EventInsight/ic_yxl.png" />
@ -34,23 +35,24 @@
<div class="d1">
<img class="m1" src="../../assets/images/EventInsight/ic_cbl.png" />
<span class="s1">传播总量</span>
<span class="s2">3467</span>
<span class="s2">{{total}}</span>
<a-pagination v-model="form.iPageIndex" :total="total" show-less-items/>
</div>
</div>
</div>
<incidentSpreadSituation></incidentSpreadSituation>
<tonalCommunicationPosture></tonalCommunicationPosture>
<esprocess></esprocess>
<mediaInterpretationEc></mediaInterpretationEc>
<mediaInterpretationED></mediaInterpretationED>
<wbUserEDE></wbUserEDE>
<incidentSpreadSituation :id="events_id"></incidentSpreadSituation>
<tonalCommunicationPosture :id="events_id"></tonalCommunicationPosture>
<esprocess :id="events_id"></esprocess>
<mediaInterpretationEc :id="events_id"></mediaInterpretationEc>
<mediaInterpretationED :id="events_id"></mediaInterpretationED>
<wbUserEDE :id="events_id"></wbUserEDE>
<div class="edec-d2">
<v-label-div title="尾翼分析">
</v-label-div>
<tailAnalysisED></tailAnalysisED>
<tailAnalysisED :id="events_id"></tailAnalysisED>
<div class="edec-dd1">
<kmdED></kmdED>
<pnwcWord></pnwcWord>
<kmdED :id="events_id"></kmdED>
<pnwcWord :id="events_id"></pnwcWord>
</div>
</div>
</div>
@ -66,6 +68,7 @@ import wbUserEDE from "./wbUserEDE";
import tailAnalysisED from "./tailAnalysisED";
import kmdED from "./kmdED"
import pnwcWord from "./pnwcWord"
import {getEventData,getList,toExcel,getCountOrEffectOrHot} from '@/api/EventdEC'
export default {
name: "eventDEC",
components: {
@ -79,7 +82,66 @@ export default {
kmdED, //
pnwcWord //
},
data() {
return {
gValue: 0,
total: 0,
Time: "",
events_id: "",
form: {
sBrand: "",
token: "",
}
}
},
created() {
this.form.token = this.getToken;
this.form.sBrand = this.getBrand.brandname || '奥迪';
this.events_id = this.$route.query.events_id || "";
this.getDdta();
this.getDdta1();
this.getDdta2();
this.getDdta3();
},
methods: {
getDdta(){
let obj = Object.assign({},this.form);
this.load = true;
getEventData(obj).then(res => {
let data = res.data || [];
this.data = data;
this.load = false;
})
},
getDdta1(){
let obj = Object.assign({},this.form);
this.load = true;
getList(obj).then(res => {
let data = res.data;
let totalNum = res.totalNum || 0;
this.total = totalNum;
this.data = data;
this.load = false;
})
},
getDdta2(){
let obj = Object.assign({},this.form);
this.load = true;
toExcel(obj).then(res => {
let data = res.data;
this.data = data;
this.load = false;
})
},
getDdta3(){
let obj = Object.assign({},this.form);
this.load = true;
getCountOrEffectOrHot(obj).then(res => {
let data = res.data;
this.data = data;
this.load = false;
})
},
goback() {
this.$router.go(-1);
},
@ -170,4 +232,4 @@ export default {
justify-content: flex-start;
}
}
</style>
</style>

@ -9,34 +9,74 @@
<template>
<div class="kmd-outter">
<v-label-div title="重点媒体分布" :showLine="false" :eStyle="{'border-style': 'none'}">
</v-label-div>
<div class="kmd-inner">
<div class="d1" style="margin-left: 16px">
<v-ranking-kmd :num="1" label="辅助" val="594614" :lineShow="false" ></v-ranking-kmd>
<v-ranking-kmd :num="2" label="刹车" val="594614"></v-ranking-kmd>
<v-ranking-kmd :num="3" label="舒适度" val="594614"></v-ranking-kmd>
<v-ranking-kmd :num="4" label="操控" val="594614"></v-ranking-kmd>
<v-ranking-kmd :num="5" label="油耗" val="594614"></v-ranking-kmd>
</v-label-div>
<div class="kmd-inner">
<div class="d1">
<v-ranking v-for="(item,index) in d1" :key="index" :lineShow="index === 0 ? false : true" :num="index + 1" :label="item.label|doStr(8)" :val="item.val"></v-ranking>
</div>
<div class="d2" style="margin-left: 16px">
<v-ranking-kmd :num="6" label="性价比" val="594614" :lineShow="false"></v-ranking-kmd>
<v-ranking-kmd :num="7" label="空间" val="594614"></v-ranking-kmd>
<v-ranking-kmd :num="8" label="动力" val="594614"></v-ranking-kmd>
<v-ranking-kmd :num="9" label="外观" val="594614"></v-ranking-kmd>
<v-ranking-kmd :num="10" label="内饰" val="594614"></v-ranking-kmd>
<div class="d1" style="margin-left: 14px">
<v-ranking v-for="(item,index) in d2" :key="index" :lineShow="index === 0 ? false : true" :num="5+index + 1" :label="item.label|doStr(8)" :val="item.val"></v-ranking>
</div>
</div>
</div>
</div>
</template>
<script>
import vRankingKmd from "./v-ranking-kmd"
import { getWebsite } from "@/api/BrandInsight";
export default {
name: "kmdED",
components: {
vRankingKmd
}
}
data() {
return {
load: false,
props: {
id: {
type: String,
default: "",
},
},
form: {
sBrand: "",
token: "",
sSeriesName: "",
},
d1: [],
d2: [],
};
},
created() {
this.form.token = this.getToken;
this.form.sBrand = this.getBrand.brandname || this.brand;
this.form.sSeriesName = this.getModel.name;
this.getData();
},
methods: {
//
group(array, subGroupLength) {
let index = 0;
let newArray = [];
while (index < array.length) {
newArray.push(array.slice(index, (index += subGroupLength)));
}
return newArray;
},
getData() {
this.load = true;
let obj = Object.assign({}, this.form);
getWebsite(obj).then((res) => {
let data = res.data;
let vals = [];
for (let key in data) {
let obj = { label: key, val: data[key] };
vals.push(obj);
}
let groupedArray = this.group(vals, 5);
this.d1 = groupedArray[0];
this.d2 = groupedArray[1];
this.load = false;
});
},
},
};
</script>
<style lang="less" scoped>

@ -7,7 +7,7 @@
* @FilePath: /data-show/src/views/EventDEC/mediaInterpretationED/index.vue
-->
<template>
<div class="med-outter">
<div class="med-outter" v-loading="load">
<v-label-div title="媒体解读">
</v-label-div>
<div class="med-inner">
@ -23,21 +23,21 @@
<img class="m1" src="../../../assets/images/EventInsight/ic_cbl.png" />
<div class="d1">
<span class="ss1">最大层级</span>
<span class="ss2">4</span>
<span class="ss2">{{ countObj.maxcount }}</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">58769</span>
<span class="ss2">{{ countObj.vCount }}</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">45678974</span>
<span class="ss2">{{ countObj.Count }}</span>
</div>
</div>
</div>
@ -61,60 +61,119 @@
</template>
<script>
import { getGraphData } from "@/api/getEchars";
import { getDiffuseZhuTi } from "@/api/EventdEC";
import createOpt from "./opt";
export default {
name: "mediaInterpretationED",
data() {
return {
opt: {},
list: [
load: false,
sum: "",
form: {
token: "",
sBrand: "",
sSeriesName: ""
},
countObj: {
carseriesCount: 0,
count: 0,
maxcount: 0,
vCount: 0,
},
props: {
id: {
type: String,
default: "",
},
},
colors: [
"#FFB600",
"#886CFF",
"#0084FF",
"#4CB690",
"#58B458",
"#6C6C6C",
"#F56161",
"#FC754C",
"#5F5EEC",
],
list: [
{
title: "新浪汽车",
fans: '1106w'
fans: "1106w",
},
{
title: "易车",
fans: '1326w'
fans: "1326w",
},
{
title: "主编说车",
fans: '1326w'
fans: "1326w",
},
{
title: "我是评车人",
fans: '1326w'
fans: "1326w",
},
{
title: "汽车老手",
fans: '1326w'
fans: "1326w",
},
{
{
title: "艾兰汽车",
fans: '1326w'
fans: "1326w",
},
{
title: "我是评车人",
fans: '1326w'
fans: "1326w",
},
{
title: "汽车老手",
fans: '1326w'
fans: "1326w",
},
{
{
title: "艾兰汽车",
fans: '1326w'
}
]
fans: "1326w",
},
],
};
},
created() {
this.drawGraph();
this.form.token = this.getToken;
this.form.sBrand = this.getBrand.brandname || "奥迪";
this.form.sSeriesName = this.getModel.name;
this.getData();
},
methods: {
drawGraph() {
getGraphData().then((res) => {
this.opt = createOpt(res.data);
getData() {
let obj = Object.assign({}, this.form);
getDiffuseZhuTi(obj).then((res) => {
let data = res.data;
let getCoreDiffuseWeiBo = data.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;
let row = nodes.find((e) => e.id === xgmid);
if (row) {
row.value = _source.volume;
} else {
row.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.countObj = Object.assign(this.countObj, data);
});
},
},

@ -2,13 +2,23 @@
/*
* @Author: your name
* @Date: 2021-10-14 19:32:39
* @LastEditTime: 2021-10-14 19:40:03
* @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 {
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'
@ -25,17 +35,18 @@ export default function createOpt(data) {
x: node.x,
y: node.y,
id: node.id,
name: node.label,
symbolSize: node.size,
name: node.name,
value: node.value,
symbolSize: node.symbolSize,
itemStyle: {
color: node.color
}
};
}),
edges: data.edges.map(function (edge) {
links: data.edges.map(function (edge) {
return {
source: edge.sourceID,
target: edge.targetID
source: edge.source,
target: edge.target
};
}),
emphasis: {
@ -45,8 +56,22 @@ export default function createOpt(data) {
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

@ -7,7 +7,7 @@
* @FilePath: /data-show/src/views/EventDEC/mediaInterpretationEc/index.vue
-->
<template>
<div class="mec-outter">
<div class="mec-outter" v-loading="load" v-highly="0.83">
<v-label-div title="事件传播历程">
</v-label-div>
<div class="mec-inner">
@ -17,7 +17,7 @@
</div>
<div class="dd1">
<v-label-div title="词云" :showLine="false" :eStyle="{'border-style': 'none'}">
<v-tab-group :btns="['热门词云', '正面词云', '负面词云']"></v-tab-group>
<v-tab-group :btns="['热门词云', '正面词云', '负面词云']" @change="handlerChange"></v-tab-group>
</v-label-div>
<div class="dd1-draw">
<v-echarts :opt="opt"></v-echarts>
@ -28,35 +28,103 @@
</template>
<script>
import createOpt from "./opt";
import createWordCloud from "@/utils/gol/bubbleWord";
import { getEventData } from "@/api/EventdEC";
import { getHotWord, getPositive, getNegative } from "@/api/EventdEC";
export default {
name: "mediaInterpretationEc",
props: ["brand", "model"],
data() {
return {
opt: createOpt(),
config: {
headerBGC: "#0c203b",
oddRowBGC: "#173b6d",
evenRowBGC: "rgba(69, 149, 244, 0)",
columnWidth: [230],
rowNum: 10,
header: ["标题", "媒体报道数量"],
data: [
["为“PLUS”正名欧尚X7 PLUS越", "33家媒体报道"],
[
"五菱星辰内饰谍照曝光,预计第三季度正式上",
"33家媒体报道",
],
["吉利博越X将于8月27日正式亮相 外观设", "33家媒体报道"],
[
"吉利汽车上半年财报出炉:营收、净利双双上",
"21家媒体报道",
],
["WEY玛奇朵到店实拍新车将于8月27日", "21家媒体报道"],
],
load: false,
opt: {},
type: 0,
props: {
id: {
type: String,
default: "",
},
},
form: {
token: "",
sBrand: "",
sSeriesName: "",
},
config: {},
};
},
created() {
this.form.token = this.getToken;
this.form.sBrand = this.getBrand.brandname || "奥迪";
this.form.sSeriesName = this.getModel.name;
this.getDdta();
this.getData1();
},
methods: {
handlerChange(n) {
this.type = n;
this.getData1();
},
//
getData1() {
this.load = true;
switch (this.type) {
case 0:
getHotWord(this.form).then((res) => {
let data = res.data;
this.opt = createWordCloud(data);
this.load = false;
});
break;
case 1:
getPositive(this.form).then((res) => {
let data = res.data;
this.opt = createWordCloud(data);
this.load = false;
});
break;
case 2:
getNegative(this.form).then((res) => {
let data = res.data;
this.opt = createWordCloud(data);
this.load = false;
});
break;
default:
break;
}
},
//
getDdta() {
let obj = Object.assign({}, this.form);
this.load = true;
getEventData(obj).then((res) => {
let data = res.data || [];
let totalNum = res.totalNum || 0;
this.total = totalNum;
let arr = [];
data.forEach((ele) => {
let a = [ele.events_title, ele.events_number];
arr.push(a);
});
this.config = {
headerBGC: "#0c203b",
oddRowBGC: "#173b6d",
evenRowBGC: "rgba(69, 149, 244, 0)",
rowNum: 10,
columnWidth: [170, 160],
header: ["标题", "媒体报道数量"],
data: arr,
};
this.load = false;
});
},
//
handlerPagnation(page) {
this.form.iPageIndex = page;
this.getDdta();
},
},
};
</script>

@ -1,136 +1,103 @@
/*
* @Author: your name
* @Date: 2021-10-09 13:35:13
* @LastEditTime: 2021-10-18 20:04:26
* @Date: 2021-10-21 11:36:36
* @LastEditTime: 2021-10-29 21:30:46
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/Index/hotDiscussionGraph/opt.js
* @FilePath: /data-show/src/utils/gol/bubbleWord.js
*/
// import * as echarts from "echarts";
const dataBJ = [
[1, 55, 9, 56, 0.46, 18, 6, '良'],
[2, 25, 11, 21, 0.65, 34, 9, '优'],
[3, 56, 7, 63, 0.3, 14, 5, '良'],
[4, 33, 7, 29, 0.33, 16, 6, '优'],
[5, 42, 24, 44, 0.76, 40, 16, '优'],
[6, 82, 58, 90, 1.77, 68, 33, '良'],
[7, 74, 49, 77, 1.46, 48, 27, '良'],
[8, 78, 55, 80, 1.29, 59, 29, '良'],
[9, 267, 216, 280, 4.8, 108, 64, '重度污染'],
// [10, 185, 127, 216, 2.52, 61, 27, '中度污染'],
// [11, 39, 19, 38, 0.57, 31, 15, '优'],
// [12, 41, 11, 40, 0.43, 21, 7, '优'],
// [13, 64, 38, 74, 1.04, 46, 22, '良'],
// [14, 108, 79, 120, 1.7, 75, 41, '轻度污染'],
// [15, 108, 63, 116, 1.48, 44, 26, '轻度污染'],
// [16, 33, 6, 29, 0.34, 13, 5, '优'],
// [17, 94, 66, 110, 1.54, 62, 31, '良'],
// [18, 186, 142, 192, 3.88, 93, 79, '中度污染'],
// [19, 57, 31, 54, 0.96, 32, 14, '良'],
// [20, 22, 8, 17, 0.48, 23, 10, '优'],
// [21, 39, 15, 36, 0.61, 29, 13, '优'],
// [22, 94, 69, 114, 2.08, 73, 39, '良'],
// [23, 99, 73, 110, 2.43, 76, 48, '良'],
// [24, 31, 12, 30, 0.5, 32, 16, '优'],
// [25, 42, 27, 43, 1, 53, 22, '优'],
// [26, 154, 117, 157, 3.05, 92, 58, '中度污染'],
// [27, 234, 185, 230, 4.09, 123, 69, '重度污染'],
// [28, 160, 120, 186, 2.77, 91, 50, '中度污染'],
// [29, 134, 96, 165, 2.76, 83, 41, '轻度污染'],
// [30, 52, 24, 60, 1.03, 50, 21, '良'],
// [31, 46, 5, 49, 0.28, 10, 6, '优']
];
const dataGZ = [
[1, 26, 37, 27, 1.163, 27, 13, '优'],
[2, 85, 62, 71, 1.195, 60, 8, '良'],
[3, 78, 38, 74, 1.363, 37, 7, '良'],
[4, 21, 21, 36, 0.634, 40, 9, '优'],
[5, 41, 42, 46, 0.915, 81, 13, '优'],
// [6, 56, 52, 69, 1.067, 92, 16, '良'],
// [7, 64, 30, 28, 0.924, 51, 2, '良'],
// [8, 55, 48, 74, 1.236, 75, 26, '良'],
// [9, 76, 85, 113, 1.237, 114, 27, '良'],
// [10, 91, 81, 104, 1.041, 56, 40, '良'],
// [11, 84, 39, 60, 0.964, 25, 11, '良'],
// [12, 64, 51, 101, 0.862, 58, 23, '良'],
// [13, 70, 69, 120, 1.198, 65, 36, '良'],
// [14, 77, 105, 178, 2.549, 64, 16, '良'],
// [15, 109, 68, 87, 0.996, 74, 29, '轻度污染'],
// [16, 73, 68, 97, 0.905, 51, 34, '良'],
// [17, 54, 27, 47, 0.592, 53, 12, '良'],
// [18, 51, 61, 97, 0.811, 65, 19, '良'],
// [19, 91, 71, 121, 1.374, 43, 18, '良'],
// [20, 73, 102, 182, 2.787, 44, 19, '良'],
// [21, 73, 50, 76, 0.717, 31, 20, '良'],
// [22, 84, 94, 140, 2.238, 68, 18, '良'],
// [23, 93, 77, 104, 1.165, 53, 7, '良'],
// [24, 99, 130, 227, 3.97, 55, 15, '良'],
// [25, 146, 84, 139, 1.094, 40, 17, '轻度污染'],
// [26, 113, 108, 137, 1.481, 48, 15, '轻度污染'],
// [27, 81, 48, 62, 1.619, 26, 3, '良'],
// [28, 56, 48, 68, 1.336, 37, 9, '良'],
// [29, 82, 92, 174, 3.29, 0, 13, '良'],
// [30, 106, 116, 188, 3.628, 101, 16, '轻度污染'],
// [31, 118, 50, 0, 1.383, 76, 11, '轻度污染']
];
const dataSH = [
[1, 91, 45, 125, 0.82, 34, 23, '良'],
[2, 65, 27, 78, 0.86, 45, 29, '良'],
[3, 83, 60, 84, 1.09, 73, 27, '良'],
[4, 109, 81, 121, 1.28, 68, 51, '轻度污染'],
[5, 106, 77, 114, 1.07, 55, 51, '轻度污染'],
// [6, 109, 81, 121, 1.28, 68, 51, '轻度污染'],
// [7, 106, 77, 114, 1.07, 55, 51, '轻度污染'],
// [8, 89, 65, 78, 0.86, 51, 26, '良'],
// [9, 53, 33, 47, 0.64, 50, 17, '良'],
// [10, 80, 55, 80, 1.01, 75, 24, '良'],
// [11, 117, 81, 124, 1.03, 45, 24, '轻度污染'],
// [12, 99, 71, 142, 1.1, 62, 42, '良'],
// [13, 95, 69, 130, 1.28, 74, 50, '良'],
// [14, 116, 87, 131, 1.47, 84, 40, '轻度污染'],
// [15, 108, 80, 121, 1.3, 85, 37, '轻度污染'],
// [16, 134, 83, 167, 1.16, 57, 43, '轻度污染'],
// [17, 79, 43, 107, 1.05, 59, 37, '良'],
// [18, 71, 46, 89, 0.86, 64, 25, '良'],
// [19, 97, 71, 113, 1.17, 88, 31, '良'],
// [20, 84, 57, 91, 0.85, 55, 31, '良'],
// [21, 87, 63, 101, 0.9, 56, 41, '良'],
// [22, 104, 77, 119, 1.09, 73, 48, '轻度污染'],
// [23, 87, 62, 100, 1, 72, 28, '良'],
// [24, 168, 128, 172, 1.49, 97, 56, '中度污染'],
// [25, 65, 45, 51, 0.74, 39, 17, '良'],
// [26, 39, 24, 38, 0.61, 47, 17, '优'],
// [27, 39, 24, 39, 0.59, 50, 19, '优'],
// [28, 93, 68, 96, 1.05, 79, 29, '良'],
// [29, 188, 143, 197, 1.66, 99, 51, '中度污染'],
// [30, 174, 131, 174, 1.55, 108, 50, '中度污染'],
// [31, 187, 143, 201, 1.39, 89, 53, '中度污染']
];
// const schema = [
// { name: 'date', index: 0, text: '日' },
// { name: 'AQIindex', index: 1, text: 'AQI指数' },
// { name: 'PM25', index: 2, text: 'PM2.5' },
// { name: 'PM10', index: 3, text: 'PM10' },
// { name: 'CO', index: 4, text: '一氧化碳CO' },
// { name: 'NO2', index: 5, text: '二氧化氮NO2' },
// { name: 'SO2', index: 6, text: '二氧化硫SO2' }
// ];
const itemStyle = {
opacity: 0.8,
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowColor: 'rgba(0,0,0,0.3)'
};
export default function createOpt() {
import {compare} from "./dataTool"
// 将后台数据转成数组
function doWordCloud(data) {
let arr1 = [];
for (let key in data) {
let obj = { name: key, value: data[key] };
arr1.push(obj);
}
return arr1;
}
// 创建词云的对象
function bubbleChart(data = [], format = []) {
let [maxValue, temp] = [0, []];
data.forEach((item) => {
temp.push(item[format[1]]);
});
maxValue = Math.max.apply(null, temp);
// 气泡颜色数组
let color = [
"#FFB600",
"#886CFF",
"#0084FF",
"#4CB690",
"#58B458",
"#6C6C6C",
"#F56161",
"#FC754C",
"#5F5EEC",
];
// 气泡颜色备份
let bakeColor = [...color];
// 气泡数据
let bubbleData = [];
// 气泡基础大小
let basicSize = 30;
// 节点之间的斥力因子,值越大,气泡间距越大
let repulsion = 380;
// 根据气泡数量配置基础大小和斥力因子(以实际情况进行适当调整,使气泡合理分布)
if (data.length >= 5 && data.length < 10) {
basicSize = 30;
repulsion = 230;
}
if (data.length >= 10 && data.length < 20) {
basicSize = 40;
repulsion = 150;
} else if (data.length >= 20) {
basicSize = 50;
repulsion = 65;
}
// 填充气泡数据数组bubbleData
for (let item of data) {
// 确保气泡数据条数少于或等于气泡颜色数组大小时,气泡颜色不重复
if (!bakeColor.length) bakeColor = [...color];
let colorSet = new Set(bakeColor);
let curIndex = Math.round(Math.random() * (colorSet.size - 1));
let curColor = bakeColor[curIndex];
colorSet.delete(curColor);
bakeColor = [...colorSet];
// 气泡大小设置
let size = (item[format[1]] * basicSize * 2) / maxValue;
if (size < basicSize) size = basicSize;
bubbleData.push({
name: item[format[0]],
value: item[format[1]],
symbolSize: size,
draggable: true,
itemStyle: {
normal: {
color: curColor,
opacity: 0.8,
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowColor: "rgba(0,0,0,0.3)",
},
},
});
}
return {
grid: {
top: 16,
left: 16,
right: 16,
bottom: 0,
containLabel: true,
},
bubbleData,
repulsion,
};
}
// 创建词云图
export default function createWordCloud(obj) {
let words = doWordCloud(obj);
words.sort(compare('value'));
let bubble = bubbleChart(words, ['name', 'value']);
return {
animationEasingUpdate: 'bounceIn',
tooltip: {
backgroundColor: "#08182F",
color: "#fff",
@ -140,76 +107,27 @@ export default function createOpt() {
},
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
formatter: function(param) {
let value = param.value;
return `<span>${value[value.length - 1]}</span><br><span>${value[0]}</span>`
let data = param.data;
return `<span>${data.name}</span><br><span>${data.value}</span>`
}
},
xAxis: {
show: false,
type: 'value',
splitLine: {
lineStyle: {
type: 'dashed'
}
}
},
yAxis: {
show: false,
type: 'value',
splitLine: {
lineStyle: {
type: 'dashed'
}
},
scale: true
},
series: [{
name: '北京',
data: dataBJ,
type: 'scatter',
symbolSize: function (data) {
return data[2]
},
label: {
show: true,
color: "#FFF",
formatter: function (param) {
return param.data[param.data.length - 1];
},
},
itemStyle: itemStyle
}, {
name: '上海',
data: dataSH,
type: 'scatter',
symbolSize: function (data) {
return data[2]
},
type: 'graph',
layout: 'force',
label: {
show: true,
color: "#FFF",
formatter: function (param) {
return param.data[param.data.length - 1];
},
},
itemStyle: itemStyle
},
{
name: '广州',
data: dataGZ,
type: 'scatter',
symbolSize: function (data) {
return data[2]
show:true,
color:"#FFF",
fontSize:12,
},
label: {
show: true,
color: "#FFF",
formatter: function (param) {
return param.data[param.data.length - 1];
},
force: {
gravity:0.2,
repulsion: bubble.repulsion,
edgeLength: 10
},
itemStyle: itemStyle
}
]
// 是否开启鼠标缩放和平移漫游
roam: true,
data: bubble.bubbleData
}]
}
}
}

@ -9,7 +9,7 @@
<template>
<div class="pw-outter">
<v-label-div title="正负词云" :showLine="false" :eStyle="{'border-style': 'none'}">
<v-tab-group :btns="['热门词云', '负面词云']"></v-tab-group>
<v-tab-group :btns="['热门词云', '负面词云']" @change="handlerChange"></v-tab-group>
</v-label-div>
<div class="pw-inner">
<v-echarts :opt="opt"></v-echarts>
@ -18,15 +18,64 @@
</template>
<script>
import createOpt from "./opt"
import createWordCloud from "@/utils/gol/bubbleWord";
import { getPositive, getNegative } from "@/api/TailInsightdetails";
export default {
name: "pnwcWord",
props: ["brand", "model"],
data() {
return {
opt: createOpt()
}
}
}
load: false,
type: 0,
props: {
id: {
type: String,
default: "",
},
},
form: {
sBrand: "",
token: "",
sSeriesName: "",
},
opt: {},
};
},
created() {
this.form.token = this.getToken;
this.form.sBrand = this.getBrand.brandname || "奥迪";
this.form.sSeriesName = this.getModel.name;
this.getData1();
},
methods: {
handlerChange(n) {
this.type = n;
if (n === 0) {
this.getData1();
} else {
this.getData2();
}
},
getData1() {
this.load = true;
let obj = Object.assign({}, this.form);
getPositive(obj).then((res) => {
let data = res.data;
this.opt = createWordCloud(data);
this.load = false;
});
},
getData2() {
this.load = true;
let obj = Object.assign({}, this.form);
getNegative(obj).then((res) => {
let data = res.data;
this.opt = createWordCloud(data);
this.load = false;
});
},
},
};
</script>
<style lang="less" scoped>

@ -1,136 +1,103 @@
/*
* @Author: your name
* @Date: 2021-10-09 13:35:13
* @LastEditTime: 2021-10-18 20:04:26
* @Date: 2021-10-21 11:36:36
* @LastEditTime: 2021-10-29 21:30:46
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/Index/hotDiscussionGraph/opt.js
* @FilePath: /data-show/src/utils/gol/bubbleWord.js
*/
// import * as echarts from "echarts";
const dataBJ = [
[1, 55, 9, 56, 0.46, 18, 6, '良'],
[2, 25, 11, 21, 0.65, 34, 9, '优'],
[3, 56, 7, 63, 0.3, 14, 5, '良'],
[4, 33, 7, 29, 0.33, 16, 6, '优'],
[5, 42, 24, 44, 0.76, 40, 16, '优'],
[6, 82, 58, 90, 1.77, 68, 33, '良'],
[7, 74, 49, 77, 1.46, 48, 27, '良'],
[8, 78, 55, 80, 1.29, 59, 29, '良'],
[9, 267, 216, 280, 4.8, 108, 64, '重度污染'],
// [10, 185, 127, 216, 2.52, 61, 27, '中度污染'],
// [11, 39, 19, 38, 0.57, 31, 15, '优'],
// [12, 41, 11, 40, 0.43, 21, 7, '优'],
// [13, 64, 38, 74, 1.04, 46, 22, '良'],
// [14, 108, 79, 120, 1.7, 75, 41, '轻度污染'],
// [15, 108, 63, 116, 1.48, 44, 26, '轻度污染'],
// [16, 33, 6, 29, 0.34, 13, 5, '优'],
// [17, 94, 66, 110, 1.54, 62, 31, '良'],
// [18, 186, 142, 192, 3.88, 93, 79, '中度污染'],
// [19, 57, 31, 54, 0.96, 32, 14, '良'],
// [20, 22, 8, 17, 0.48, 23, 10, '优'],
// [21, 39, 15, 36, 0.61, 29, 13, '优'],
// [22, 94, 69, 114, 2.08, 73, 39, '良'],
// [23, 99, 73, 110, 2.43, 76, 48, '良'],
// [24, 31, 12, 30, 0.5, 32, 16, '优'],
// [25, 42, 27, 43, 1, 53, 22, '优'],
// [26, 154, 117, 157, 3.05, 92, 58, '中度污染'],
// [27, 234, 185, 230, 4.09, 123, 69, '重度污染'],
// [28, 160, 120, 186, 2.77, 91, 50, '中度污染'],
// [29, 134, 96, 165, 2.76, 83, 41, '轻度污染'],
// [30, 52, 24, 60, 1.03, 50, 21, '良'],
// [31, 46, 5, 49, 0.28, 10, 6, '优']
];
const dataGZ = [
[1, 26, 37, 27, 1.163, 27, 13, '优'],
[2, 85, 62, 71, 1.195, 60, 8, '良'],
[3, 78, 38, 74, 1.363, 37, 7, '良'],
[4, 21, 21, 36, 0.634, 40, 9, '优'],
[5, 41, 42, 46, 0.915, 81, 13, '优'],
// [6, 56, 52, 69, 1.067, 92, 16, '良'],
// [7, 64, 30, 28, 0.924, 51, 2, '良'],
// [8, 55, 48, 74, 1.236, 75, 26, '良'],
// [9, 76, 85, 113, 1.237, 114, 27, '良'],
// [10, 91, 81, 104, 1.041, 56, 40, '良'],
// [11, 84, 39, 60, 0.964, 25, 11, '良'],
// [12, 64, 51, 101, 0.862, 58, 23, '良'],
// [13, 70, 69, 120, 1.198, 65, 36, '良'],
// [14, 77, 105, 178, 2.549, 64, 16, '良'],
// [15, 109, 68, 87, 0.996, 74, 29, '轻度污染'],
// [16, 73, 68, 97, 0.905, 51, 34, '良'],
// [17, 54, 27, 47, 0.592, 53, 12, '良'],
// [18, 51, 61, 97, 0.811, 65, 19, '良'],
// [19, 91, 71, 121, 1.374, 43, 18, '良'],
// [20, 73, 102, 182, 2.787, 44, 19, '良'],
// [21, 73, 50, 76, 0.717, 31, 20, '良'],
// [22, 84, 94, 140, 2.238, 68, 18, '良'],
// [23, 93, 77, 104, 1.165, 53, 7, '良'],
// [24, 99, 130, 227, 3.97, 55, 15, '良'],
// [25, 146, 84, 139, 1.094, 40, 17, '轻度污染'],
// [26, 113, 108, 137, 1.481, 48, 15, '轻度污染'],
// [27, 81, 48, 62, 1.619, 26, 3, '良'],
// [28, 56, 48, 68, 1.336, 37, 9, '良'],
// [29, 82, 92, 174, 3.29, 0, 13, '良'],
// [30, 106, 116, 188, 3.628, 101, 16, '轻度污染'],
// [31, 118, 50, 0, 1.383, 76, 11, '轻度污染']
];
const dataSH = [
[1, 91, 45, 125, 0.82, 34, 23, '良'],
[2, 65, 27, 78, 0.86, 45, 29, '良'],
[3, 83, 60, 84, 1.09, 73, 27, '良'],
[4, 109, 81, 121, 1.28, 68, 51, '轻度污染'],
[5, 106, 77, 114, 1.07, 55, 51, '轻度污染'],
// [6, 109, 81, 121, 1.28, 68, 51, '轻度污染'],
// [7, 106, 77, 114, 1.07, 55, 51, '轻度污染'],
// [8, 89, 65, 78, 0.86, 51, 26, '良'],
// [9, 53, 33, 47, 0.64, 50, 17, '良'],
// [10, 80, 55, 80, 1.01, 75, 24, '良'],
// [11, 117, 81, 124, 1.03, 45, 24, '轻度污染'],
// [12, 99, 71, 142, 1.1, 62, 42, '良'],
// [13, 95, 69, 130, 1.28, 74, 50, '良'],
// [14, 116, 87, 131, 1.47, 84, 40, '轻度污染'],
// [15, 108, 80, 121, 1.3, 85, 37, '轻度污染'],
// [16, 134, 83, 167, 1.16, 57, 43, '轻度污染'],
// [17, 79, 43, 107, 1.05, 59, 37, '良'],
// [18, 71, 46, 89, 0.86, 64, 25, '良'],
// [19, 97, 71, 113, 1.17, 88, 31, '良'],
// [20, 84, 57, 91, 0.85, 55, 31, '良'],
// [21, 87, 63, 101, 0.9, 56, 41, '良'],
// [22, 104, 77, 119, 1.09, 73, 48, '轻度污染'],
// [23, 87, 62, 100, 1, 72, 28, '良'],
// [24, 168, 128, 172, 1.49, 97, 56, '中度污染'],
// [25, 65, 45, 51, 0.74, 39, 17, '良'],
// [26, 39, 24, 38, 0.61, 47, 17, '优'],
// [27, 39, 24, 39, 0.59, 50, 19, '优'],
// [28, 93, 68, 96, 1.05, 79, 29, '良'],
// [29, 188, 143, 197, 1.66, 99, 51, '中度污染'],
// [30, 174, 131, 174, 1.55, 108, 50, '中度污染'],
// [31, 187, 143, 201, 1.39, 89, 53, '中度污染']
];
// const schema = [
// { name: 'date', index: 0, text: '日' },
// { name: 'AQIindex', index: 1, text: 'AQI指数' },
// { name: 'PM25', index: 2, text: 'PM2.5' },
// { name: 'PM10', index: 3, text: 'PM10' },
// { name: 'CO', index: 4, text: '一氧化碳CO' },
// { name: 'NO2', index: 5, text: '二氧化氮NO2' },
// { name: 'SO2', index: 6, text: '二氧化硫SO2' }
// ];
const itemStyle = {
opacity: 0.8,
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowColor: 'rgba(0,0,0,0.3)'
};
export default function createOpt() {
import {compare} from "./dataTool"
// 将后台数据转成数组
function doWordCloud(data) {
let arr1 = [];
for (let key in data) {
let obj = { name: key, value: data[key] };
arr1.push(obj);
}
return arr1;
}
// 创建词云的对象
function bubbleChart(data = [], format = []) {
let [maxValue, temp] = [0, []];
data.forEach((item) => {
temp.push(item[format[1]]);
});
maxValue = Math.max.apply(null, temp);
// 气泡颜色数组
let color = [
"#FFB600",
"#886CFF",
"#0084FF",
"#4CB690",
"#58B458",
"#6C6C6C",
"#F56161",
"#FC754C",
"#5F5EEC",
];
// 气泡颜色备份
let bakeColor = [...color];
// 气泡数据
let bubbleData = [];
// 气泡基础大小
let basicSize = 30;
// 节点之间的斥力因子,值越大,气泡间距越大
let repulsion = 380;
// 根据气泡数量配置基础大小和斥力因子(以实际情况进行适当调整,使气泡合理分布)
if (data.length >= 5 && data.length < 10) {
basicSize = 30;
repulsion = 230;
}
if (data.length >= 10 && data.length < 20) {
basicSize = 40;
repulsion = 150;
} else if (data.length >= 20) {
basicSize = 50;
repulsion = 65;
}
// 填充气泡数据数组bubbleData
for (let item of data) {
// 确保气泡数据条数少于或等于气泡颜色数组大小时,气泡颜色不重复
if (!bakeColor.length) bakeColor = [...color];
let colorSet = new Set(bakeColor);
let curIndex = Math.round(Math.random() * (colorSet.size - 1));
let curColor = bakeColor[curIndex];
colorSet.delete(curColor);
bakeColor = [...colorSet];
// 气泡大小设置
let size = (item[format[1]] * basicSize * 2) / maxValue;
if (size < basicSize) size = basicSize;
bubbleData.push({
name: item[format[0]],
value: item[format[1]],
symbolSize: size,
draggable: true,
itemStyle: {
normal: {
color: curColor,
opacity: 0.8,
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowColor: "rgba(0,0,0,0.3)",
},
},
});
}
return {
grid: {
top: 16,
left: 16,
right: 16,
bottom: 0,
containLabel: true,
},
bubbleData,
repulsion,
};
}
// 创建词云图
export default function createWordCloud(obj) {
let words = doWordCloud(obj);
words.sort(compare('value'));
let bubble = bubbleChart(words, ['name', 'value']);
return {
animationEasingUpdate: 'bounceIn',
tooltip: {
backgroundColor: "#08182F",
color: "#fff",
@ -140,76 +107,27 @@ export default function createOpt() {
},
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
formatter: function(param) {
let value = param.value;
return `<span>${value[value.length - 1]}</span><br><span>${value[0]}</span>`
let data = param.data;
return `<span>${data.name}</span><br><span>${data.value}</span>`
}
},
xAxis: {
show: false,
type: 'value',
splitLine: {
lineStyle: {
type: 'dashed'
}
}
},
yAxis: {
show: false,
type: 'value',
splitLine: {
lineStyle: {
type: 'dashed'
}
},
scale: true
},
series: [{
name: '北京',
data: dataBJ,
type: 'scatter',
symbolSize: function (data) {
return data[2]
},
label: {
show: true,
color: "#FFF",
formatter: function (param) {
return param.data[param.data.length - 1];
},
},
itemStyle: itemStyle
}, {
name: '上海',
data: dataSH,
type: 'scatter',
symbolSize: function (data) {
return data[2]
},
type: 'graph',
layout: 'force',
label: {
show: true,
color: "#FFF",
formatter: function (param) {
return param.data[param.data.length - 1];
},
},
itemStyle: itemStyle
},
{
name: '广州',
data: dataGZ,
type: 'scatter',
symbolSize: function (data) {
return data[2]
show:true,
color:"#FFF",
fontSize:12,
},
label: {
show: true,
color: "#FFF",
formatter: function (param) {
return param.data[param.data.length - 1];
},
force: {
gravity:0.2,
repulsion: bubble.repulsion,
edgeLength: 10
},
itemStyle: itemStyle
}
]
// 是否开启鼠标缩放和平移漫游
roam: true,
data: bubble.bubbleData
}]
}
}
}

@ -12,22 +12,61 @@
<v-label-div title="传播态势" :showLine="false" :eStyle="{'border-style': 'none'}">
</v-label-div>
<div class="taed-d1">
<v-echarts :opt="opt"></v-echarts>
<v-echarts :opt="opt"></v-echarts>
</div>
</div>
</div>
</template>
<script>
import createOpt from "./opt"
import { getSourcetypeTime1 } from "@/api/EventdEC";
import createOpt from "./opt";
export default {
name: "tailAnalysisED",
data() {
return {
opt: createOpt()
}
}
}
load: false,
opt: {},
props: {
id: {
type: String,
default: "",
},
},
form: {
sBrand: "",
token: "",
sSeriesName: "",
},
};
},
created() {
this.form.token = this.getToken;
this.form.sBrand = this.getBrand.brandname || "奥迪";
this.form.sSeriesName = this.getModel.name;
this.getDdta();
},
methods: {
getDdta() {
let obj = Object.assign({}, this.form);
this.load = true;
getSourcetypeTime1(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);
this.load = false;
});
},
},
};
</script>
<style lang="less" scoped>

@ -1,18 +1,60 @@
/*
* @Author: your name
* @Date: 2021-10-12 10:11:24
* @LastEditTime: 2021-10-19 19:34:14
* @LastEditTime: 2021-11-01 14:25:41
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandInsight/titsopo/opt.js
*/
export default function createOpt() {
import * as echarts from "echarts";
// import { bigNumberTransform } from "@/utils/gol/dataTool"
let colors = ['#546fc5', '#91cb74', '#f9c857', '#ed6565', '#72bfde', '#3aa272', '#fb8351'];
function createData(ds = []) {
let arr = [];
for (let i = 0; i < ds.length; i++) {
let arr1 = ds[i];
for (let j = 0; j < arr1.length; j++) {
let n = arr.findIndex(ele => {
return ele.name === arr1[j].key;
})
if (n === -1) {
let obj =
{
name: arr1[j].key,
type: 'line',
symbol: 'none',
areaStyle: {
normal: {
opacity: 0.4,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, color: colors[j] // 0% 处的颜色
}, {
offset: 1, color: '#000' // 100% 处的颜色
}]
),
}
},
emphasis: {
focus: 'series'
},
data: [arr1[j].value]
}
arr.push(obj)
} else {
arr[n].data.push(arr1[j].value)
}
}
}
return arr;
}
export default function createOpt(dx=[], ds=[]) {
let data = createData(ds)
return {
grid: {
left: 16,
right: 26,
bottom: 16,
top: 52,
left: '3%',
right: '2%',
bottom: '3%',
top: '15%',
containLabel: true
},
tooltip: {
@ -45,7 +87,13 @@ export default function createOpt() {
color: "#fff",
},
},
data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00']
axisLabel: {
formatter: (value) => {
let str = value.substring(10, 16)
return str;
}
},
data: dx
},
yAxis: {
type: 'value',
@ -62,80 +110,6 @@ export default function createOpt() {
},
},
},
series: [
{
name: '新闻',
type: 'line',
symbol: 'none',
areaStyle: {
opacity: 0.4
},
emphasis: {
focus: 'series'
},
data: [2000, 1600, 1000, 2200, 2300, 2100, 1900]
},
{
name: '微信',
type: 'line',
symbol: 'none',
areaStyle: {
opacity: 0.4
},
emphasis: {
focus: 'series'
},
data: [1000, 1100, 1300, 2000, 1800, 2100, 1600]
},
{
name: '论坛',
type: 'line',
symbol: 'none',
areaStyle: {
opacity: 0.4
},
emphasis: {
focus: 'series'
},
data: [1200, 1200, 1400, 2100, 1400, 1900, 2000]
},
{
name: '微博',
type: 'line',
symbol: 'none',
areaStyle: {
opacity: 0.4
},
emphasis: {
focus: 'series'
},
data: [1200, 1200, 1350, 1550, 1750, 1900, 2000]
},
{
name: 'APP',
type: 'line',
symbol: 'none',
areaStyle: {
opacity: 0.4
},
emphasis: {
focus: 'series'
},
data: [1260, 1280, 1390, 1570, 1790, 1950, 2020]
},
{
name: '其他',
type: 'line',
symbol: 'none',
areaStyle: {
opacity: 0.4
},
emphasis: {
focus: 'series'
},
data: [1260, 1280, 1390, 1570, 1790, 1950, 2020]
},
]
series: data
}
}

@ -23,11 +23,19 @@
<script>
import createOpt from "./opt"
import { getTwoTime } from "@/api/comm";
import { getAffectionsTime } from "@/api/EventdEC";
export default {
name: "tonalCommunicationPosture",
data() {
return {
opt: createOpt(),
props: {
id: {
type: String,
default: "",
},
},
opt: {},
selVal: 1,
selDatas: [
{
@ -47,11 +55,55 @@ export default {
label: "自定义",
},
],
form: {
sBrand: "",
token: "",
sSeriesName: ""
},
};
},
created() {
this.form.token = this.getToken;
this.brand = this.getBrand.brandname || "奥迪";
this.form.sSeriesName = this.getModel.name;
this.getDdta();
},
methods: {
handleChange() {}
}
//
getSelect() {
getTwoTime().then((res) => {
this.selDatas = res.data;
if (!this.form.sTimeType) {
this.form.sTimeType = this.selDatas[0].key;
this.setCtime2(this.form);
}
});
},
getDdta() {
let obj = Object.assign({},this.form);
this.load = true;
getAffectionsTime(obj).then((res) => {
let data = res.data || [];
let dx = [];
let ds = [];
data.forEach((ele) => {
let key = ele.Time;
let value = ele.Data;
dx.push(key);
ds.push(value);
});
this.opt = createOpt(dx, ds);
this.load = false;
});
},
//
handleChange() {
this.setCtime2(this.form);
if (this.form.sTimeType != 4) {
this.reload();
}
},
},
};
</script>

@ -1,20 +1,74 @@
/*
* @Author: your name
* @Date: 2021-10-12 10:11:24
* @LastEditTime: 2021-10-19 19:43:13
* @Date: 2021-10-09 11:38:06
* @LastEditTime: 2021-11-01 19:15:48
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandInsight/titsopo/opt.js
* @FilePath: /data-show/src/views/Index/barometer/opt.js
*/
export default function createOpt() {
import * as echarts from "echarts";
import {bigNumberTransform} from "@/utils/gol/dataTool"
let colors = ['#3172ca', '#459c97', '#ab8921']
function createData(ds = []) {
let arr = [];
for (let i = 0; i < ds.length; i++) {
let arr1 = ds[i];
for (let j = 0; j < arr1.length; j++) {
let n = arr.findIndex(ele => {
return ele.name === arr1[j].key;
})
if (n === -1) {
let obj =
{
name: arr1[j].key,
type: 'line',
symbol: 'none',
itemStyle: {
color: colors[j]
},
areaStyle: {
normal: {
opacity: 0.4,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, color: colors[j] // 0% 处的颜色
}, {
offset: 1, color: '#000' // 100% 处的颜色
}]
),
}
},
emphasis: {
focus: 'series'
},
data: [arr1[j].value]
}
arr.push(obj)
} else {
arr[n].data.push(arr1[j].value)
}
}
}
return arr;
}
export default function createOpt(dx = [], ds = []) {
const data = createData(ds);
return {
grid: {
left: 16,
right: 26,
bottom: 16,
top: 52,
left: 10,
right: 10,
bottom: 10,
top: 46,
containLabel: true
},
// dataZoom: [{
// type: 'inside', //1平移 缩放
// throttle: '50', //设置触发视图刷新的频率。单位为毫秒ms
// minValueSpan: 6, //用于限制窗口大小的最小值,在类目轴上可以设置为 5 表示 5 个类目
// start: 1, //数据窗口范围的起始百分比 范围是0 ~ 100。表示 0% ~ 100%。
// end: 50, //数据窗口范围的结束百分比。范围是0 ~ 100。
// zoomLock: true, //如果设置为 true 则锁定选择区域的大小,也就是说,只能平移,不能缩放。
// }],
tooltip: {
trigger: "axis",
backgroundColor: "#08182F",
@ -28,14 +82,16 @@ export default function createOpt() {
legend: {
icon: 'roundRect',
textStyle: { //图例文字的样式
color: '#fff'
color: '#fff',
fontSize:10
},
y: 12,
x: 16
y: 10,
x: 10,
itemWidth: 10,
itemHeight: 10
},
xAxis: {
type: 'category',
boundaryGap: false,
axisTick: {
show: false,
},
@ -45,7 +101,13 @@ export default function createOpt() {
color: "#fff",
},
},
data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00']
axisLabel: {
formatter: (value) => {
let str = value.substring(10, 16)
return str;
}
},
data: dx
},
yAxis: {
type: 'value',
@ -55,6 +117,12 @@ export default function createOpt() {
color: "#fff",
},
},
axisLabel: {
formatter: (value) => {
let str = bigNumberTransform(value);
return str;
}
},
splitLine: {
lineStyle: {
type: "dashed", // y轴分割线类型
@ -62,43 +130,6 @@ export default function createOpt() {
},
},
},
series: [
{
name: '正面',
type: 'line',
symbol: 'none',
areaStyle: {
opacity: 0.4
},
emphasis: {
focus: 'series'
},
data: [2000, 1600, 1000, 2200, 2300, 2100, 1900]
},
{
name: '中性',
type: 'line',
symbol: 'none',
areaStyle: {
opacity: 0.4
},
emphasis: {
focus: 'series'
},
data: [1000, 1100, 1300, 2000, 1800, 2100, 1600]
},
{
name: '负面',
type: 'line',
symbol: 'none',
areaStyle: {
opacity: 0.4
},
emphasis: {
focus: 'series'
},
data: [1200, 1200, 1400, 2100, 1400, 1900, 2000]
}
]
series: data
}
}

@ -7,7 +7,7 @@
* @FilePath: /data-show/src/views/EventDEC/wbUserEDE/index.vue
-->
<template>
<div class="wue-outter">
<div class="wue-outter" v-loading="load">
<div class="d1">
<v-label-div title="微博用户画像">
<v-tab-group :btns="['性别', '认证', '地区']"></v-tab-group>
@ -30,11 +30,9 @@
<div class="dd1">
<v-echarts :opt="opt"></v-echarts>
</div>
<div class="dd2">
<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>
<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>
@ -42,13 +40,58 @@
<script>
import createOpt from "./opt";
import { getAffections } from "@/api/EventdEC";
export default {
name: "wbUserEDE",
data() {
return {
load: false,
opt: createOpt(),
form: {
sBrand: "",
token: "",
sSeriesName: "",
},
props: {
id: {
type: String,
default: "",
},
},
labelArr: [],
total: 0,
colors: ["#3373CC", "#54BF93", "#CC9D12"],
};
},
created() {
this.form.token = this.getToken;
this.form.sBrand = this.getBrand.brandname || "奥迪";
this.form.sSeriesName = this.getModel.name;
this.getDdta();
},
methods: {
getDdta() {
this.load = true;
let obj = Object.assign({}, this.form);
getAffections(obj).then((res) => {
let data = res.data || {};
let arr = [];
let total = 0;
for (let key in data) {
let o = {
key: key,
value: data[key],
};
total += data[key] * 1;
arr.push(o);
}
this.labelArr = arr;
this.total = total;
this.opt = createOpt(arr, this.colors);
this.load = false;
});
},
},
};
</script>

@ -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
}
]
}
}

Loading…
Cancel
Save