prod
校文 3 years ago
parent e09af1b26b
commit dccfc995a5

@ -1,12 +1,13 @@
/*
* @Author: your name
* @Date: 2021-10-21 11:36:36
* @LastEditTime: 2021-11-12 16:40:03
* @LastEditTime: 2021-11-25 11:07:14
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/utils/gol/bubbleWord.js
*/
import { compare } from "./dataTool"
import * as echarts from "echarts";
// 将后台数据转成数组
function doWordCloud(data) {
let arr1 = [];
@ -25,15 +26,49 @@ function bubbleChart(data = [], format = []) {
maxValue = Math.max.apply(null, temp);
// 气泡颜色数组
let color = [
"#FFB600",
"#886CFF",
"#0084FF",
"#4CB690",
"#58B458",
"#6C6C6C",
"#F56161",
"#FC754C",
"#5F5EEC",
{
key: '#047ddc',
fontColor: '#8ec0ea',
value: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(4, 60, 135, 1)'
},
{
offset: 1,
color: 'rgba(1, 11, 25, 1)'
}
], false)
},
{
key: '#a3951f',
fontColor: '#a4a27f',
value: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(120, 124, 14, 1)'
},
{
offset: 1,
color: 'rgba(1, 11, 25, 1)'
}
], false)
},
{
key: '#01aa87',
fontColor: '#99e5d5',
value: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(25, 137, 129, 1)'
},
{
offset: 1,
color: 'rgba(1, 11, 25, 1)'
}
], false)
}
];
// 气泡颜色备份
let bakeColor = [...color];
@ -61,7 +96,9 @@ function bubbleChart(data = [], format = []) {
if (!bakeColor.length) bakeColor = [...color];
let colorSet = new Set(bakeColor);
let curIndex = Math.round(Math.random() * (colorSet.size - 1));
let curColor = bakeColor[curIndex];
let borderColor = bakeColor[curIndex].key;
let curColor = bakeColor[curIndex].value;
let fontColor = bakeColor[curIndex].fontColor;
colorSet.delete(curColor);
bakeColor = [...colorSet];
// 气泡大小设置
@ -73,6 +110,11 @@ function bubbleChart(data = [], format = []) {
value: item[format[1]],
symbolSize: size,
draggable: true,
label: {
show: true,
color: fontColor,
fontSize: 12
},
itemStyle: {
normal: {
color: curColor,
@ -81,6 +123,9 @@ function bubbleChart(data = [], format = []) {
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowColor: "rgba(0,0,0,0.3)",
borderType : 'solid',
borderColor: borderColor,
borderWidth: 1
},
},
});
@ -119,12 +164,6 @@ export default function createWordCloud(obj) {
series: [{
type: 'graph',
layout: 'force',
label: {
show: true,
color: "#FFF",
fontSize: 12,
},
force: {
gravity: 0.2,
repulsion: bubble.repulsion,

@ -1,7 +1,7 @@
<!--
* @Author: your name
* @Date: 2021-10-13 11:54:38
* @LastEditTime: 2021-11-17 15:57:45
* @LastEditTime: 2021-11-25 10:15:13
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/EventDetails/hotOther/index.vue
@ -10,11 +10,16 @@
<div class="ho-outter" v-loading="load">
<v-label-div title="热点事件传播导向" />
<div class="ho-bd">
<dv-scroll-board :config="config" :style="{ width: '100%', height: '27rem' }" @click="handlerItem"/>
<v-table :columns="columns" :data="tbData" tableLayout="fixed" :pagination="false">
<template slot="events_title" slot-scope="text, record">
<span @click="handlerEvent(record)">{{text}}</span>
</template>
</v-table>
<!-- <dv-scroll-board :config="config" :style="{ width: '100%', height: '27rem' }" @click="handlerItem"/> -->
</div>
<div class="ho-footer">
<span class="ho-f-s1"> <span style="color: #2c66b5;">{{total}}</span> </span>
<a-pagination v-model="form.iPageIndex" :pageSize="form.iPageSize" :total="total" show-less-items @change="handlerPagnation"/>
<a-pagination v-model="form.iPageIndex" :pageSize="form.iPageSize" :total="total" show-less-items @change="handlerPagnation" />
</div>
</div>
</template>
@ -34,9 +39,34 @@ export default {
iPageSize: 20,
},
total: 0,
config: {
},
darr: []
tbData: [],
columns: [
{
title: "事件列表",
dataIndex: "events_title",
key: "events_title",
width: 200,
scopedSlots: { customRender: "events_title" },
ellipsis: true,
},
{
title: "影响力",
dataIndex: "events_influence",
key: "events_influence",
},
{
title: "时间",
dataIndex: "maxSourcetime",
key: "maxSourcetime",
width: 160,
},
{
title: "关联品牌",
dataIndex: "events_brand",
scopedSlots: { customRender: "events_brand" },
key: "events_brand",
},
],
};
},
created() {
@ -53,50 +83,22 @@ export default {
let data = res.data || [];
let totalNum = res.totalNum || 0;
this.total = totalNum;
let arr = [];
let arr2 = [];
data.forEach((ele) => {
let a = [
`<span style='cursor: pointer;'>${ele.events_title}</span>`,
ele.events_influence,
ele.maxSourcetime,
ele.events_brand,
];
let b = [
`<span style='cursor: pointer;'>${ele.events_title}</span>`,
ele.events_influence,
ele.maxSourcetime,
ele.events_brand,
ele.events_id
];
arr.push(a);
arr2.push(b);
});
this.darr = arr2;
this.config = {
headerBGC: "#0c203b",
oddRowBGC: "#173b6d",
evenRowBGC: "rgba(69, 149, 244, 0)",
rowNum: 10,
columnWidth: [240,70,150],
header: ["事件列表", "影响力", "时间", "关联品牌"],
data: arr,
};
this.tbData = data;
this.load = false;
});
},
//
handlerPagnation(page) {
this.form.iPageIndex = page;
this.getDdta()
this.getDdta();
},
handlerItem(row) {
let ele = this.darr[row.rowIndex];
if(row.columnIndex === 0) {
let id = ele[4];
this.$router.push({path: '/eventDEC', query: {events_id: id}});
}
}
//
handlerEvent(row) {
this.$router.push({
path: "/eventDEC",
query: { events_id: row.events_id },
});
},
},
};
</script>
@ -130,4 +132,8 @@ export default {
}
}
}
/deep/ .ant-table-body {
height: 432px;
overflow: auto;
}
</style>

@ -1,7 +1,7 @@
<!--
* @Author: your name
* @Date: 2021-10-13 11:54:38
* @LastEditTime: 2021-11-17 16:02:33
* @LastEditTime: 2021-11-25 10:23:59
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/EventDetails/hotOther/index.vue
@ -10,17 +10,24 @@
<div class="ho-outter">
<v-label-div title="热点事件传播导向" />
<div class="ho-bd">
<dv-scroll-board :config="config" :style="{ width: '100%', height: '27rem' }" @click="handlerItem"/>
<v-table :columns="columns" :data="tbData" tableLayout="fixed" :pagination="false">
<template slot="events_title" slot-scope="text, record">
<span @click="handlerEvent(record)">{{text}}</span>
</template>
<template slot="events_brand" slot-scope="text, record">
<span @click="handlerBrand(record)">{{text}}</span>
</template>
</v-table>
</div>
<div class="ho-footer">
<span class="ho-f-s1"> <span style="color: #2c66b5;">{{total}}</span> </span>
<a-pagination v-model="form.iPageIndex" :pageSize="form.iPageSize" :total="total" show-less-items @change="handlerPagnation"/>
<a-pagination v-model="form.iPageIndex" :pageSize="form.iPageSize" :total="total" show-less-items @change="handlerPagnation" />
</div>
</div>
</template>
<script>
import {getHotEventsList} from '@/api/ModelEventdetails'
import { getHotEventsList } from "@/api/ModelEventdetails";
export default {
name: "MEDHotOther",
data() {
@ -34,9 +41,34 @@ export default {
sSeriesName: "",
},
total: 0,
config: {
},
darr: []
tbData: [],
columns: [
{
title: "事件列表",
dataIndex: "events_title",
key: "events_title",
width: 200,
scopedSlots: { customRender: "events_title" },
ellipsis: true,
},
{
title: "影响力",
dataIndex: "events_influence",
key: "events_influence",
},
{
title: "时间",
dataIndex: "maxSourcetime",
key: "maxSourcetime",
width: 160,
},
{
title: "关联品牌",
dataIndex: "events_brand",
scopedSlots: { customRender: "events_brand" },
key: "events_brand",
},
],
};
},
created() {
@ -53,49 +85,29 @@ export default {
let data = res.data || [];
let totalNum = res.totalNum || 0;
this.total = totalNum;
let arr = [];
let arr2 = [];
data.forEach((ele) => {
let a = [
`<span style='cursor: pointer;'>${ele.events_title}</span>`,
ele.events_influence,
ele.maxSourcetime,
ele.events_brand
];
let b = [
`<span style='cursor: pointer;'>${ele.events_title}</span>`,
ele.events_influence,
ele.maxSourcetime,
ele.events_brand,
ele.events_id
];
arr.push(a);
arr2.push(b);
});
this.darr = arr2;
this.config = {
headerBGC: "#0c203b",
oddRowBGC: "#173b6d",
evenRowBGC: "rgba(69, 149, 244, 0)",
rowNum: 10,
columnWidth: [170,60,160],
header: ["事件列表", "影响力", "时间", "关联品牌"],
data: arr,
};
this.tbData = data;
});
},
//
handlerPagnation(page) {
this.form.iPageIndex = page;
this.getDdta()
this.getDdta();
},
//
handlerEvent(row) {
this.$router.push({
path: "/eventDEC",
query: { events_id: row.events_id },
});
},
//
handlerBrand(row) {
let obj = { brandname: row.events_brand };
this.setBrand(obj);
this.$router.push({
path: "/brandInsight",
});
},
handlerItem(row) {
let ele = this.darr[row.rowIndex];
if(row.columnIndex === 0) {
let id = ele[4];
this.$router.push({path: '/eventDEC', query: {events_id: id}});
}
}
},
};
</script>
@ -129,4 +141,8 @@ export default {
}
}
}
/deep/ .ant-table-body {
height: 432px;
overflow: auto;
}
</style>

Loading…
Cancel
Save