parent
26c7753e78
commit
6f9039328b
@ -0,0 +1,24 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-18 09:55:16
|
||||
* @LastEditTime: 2021-10-18 09:56:18
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/EventComparison/index.vue
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="d-container">
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "EventComparison"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
</style>
|
@ -0,0 +1,43 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-18 09:07:18
|
||||
* @LastEditTime: 2021-10-18 09:21:37
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/EventInsight/hotEventPropagationOriented/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="hpo-outter">
|
||||
<v-label-div title="热点事件传播导向">
|
||||
<v-btn >事件对比</v-btn>
|
||||
</v-label-div>
|
||||
<div class="hpo-inner">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import createOpt from "./opt"
|
||||
export default {
|
||||
name: "hotEventPO",
|
||||
data() {
|
||||
return {
|
||||
opt: createOpt()
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.hpo-outter {
|
||||
width: 100%;
|
||||
height: 560px;
|
||||
border: 2px solid #0f2a4d;
|
||||
.hpo-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
</style>
|
@ -0,0 +1,98 @@
|
||||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-13 09:09:51
|
||||
* @LastEditTime: 2021-10-18 09:32:36
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/EventDetails/hotEventPropagationOriented/opt.js
|
||||
*/
|
||||
const citylist = [
|
||||
{name: '领导人'},
|
||||
{name: '自然'},
|
||||
{name: '明星代言人'},
|
||||
{name: '车展'},
|
||||
{name: '新车上市'},
|
||||
{name: '新闻'},
|
||||
{name: '论坛'},
|
||||
{name: '微博'},
|
||||
{name: 'APP'},
|
||||
{name: '短视频'},
|
||||
{name: '吉利'},
|
||||
{name: '奔驰'},
|
||||
{name: '宝马'},
|
||||
{name: '特斯拉'},
|
||||
{name: '奥迪'},
|
||||
{name: '女车主表态'},
|
||||
{name: '广州车展'},
|
||||
{name: '销量大增'},
|
||||
];
|
||||
const population=[
|
||||
{source: "领导人", target: "APP", value: 2000},
|
||||
{source: "APP", target: "宝马", value: 3000},
|
||||
//
|
||||
{source: "明星代言人", target: "论坛", value: 1000},
|
||||
//
|
||||
{source: "自然", target: "论坛", value: 2100},
|
||||
{source: "论坛", target: "宝马", value: 3100},
|
||||
{source: "宝马", target: "广州车展", value: 5100},
|
||||
//
|
||||
{source: "自然", target: "新闻", value: 3234},
|
||||
{source: "新闻", target: "吉利", value: 3000},
|
||||
{source: "吉利", target: "销量大增", value: 6000},
|
||||
//
|
||||
{source: "车展", target: "微博", value: 1234},
|
||||
{source: "微博", target: "特斯拉", value: 3234},
|
||||
{source: "特斯拉", target: "销量大增", value: 4234},
|
||||
//
|
||||
{source: "新车上市", target: "APP", value: 1234},
|
||||
{source: "APP", target: "宝马", value: 1234},
|
||||
//
|
||||
{source: "新车上市", target: "短视频", value: 2234},
|
||||
{source: "短视频", target: "奔驰", value: 2234},
|
||||
{source: "奔驰", target: "广州车展", value: 2234},
|
||||
//
|
||||
{source: "APP", target: "奥迪", value: 2234},
|
||||
{source: "奥迪", target: "销量大增", value: 2234},
|
||||
//
|
||||
{source: "奔驰", target: "女车主表态", value: 5234},
|
||||
];
|
||||
export default function createOpt() {
|
||||
return {
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
backgroundColor: "#08182F",
|
||||
color: "#fff",
|
||||
borderColor: "#3373CC",
|
||||
textStyle: {
|
||||
color: "#fff", //设置文字颜色
|
||||
},
|
||||
triggerOn: 'mousemove',
|
||||
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'sankey',
|
||||
data: citylist,
|
||||
links: population,
|
||||
focusNodeAdjacency: 'allEdges', //鼠标悬停到节点或边上,相邻接的节点和边高亮显示
|
||||
left: 16,
|
||||
right: 120,
|
||||
top: 16,
|
||||
bottom: 16,
|
||||
itemStyle: {
|
||||
borderWidth: 1,
|
||||
},
|
||||
lineStyle: {
|
||||
color: 'target',
|
||||
curveness: 0.5,
|
||||
opacity:0.5
|
||||
},
|
||||
label: {
|
||||
color: "#fff",
|
||||
fontWeight: 'bold',
|
||||
fontSize: 14
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
@ -0,0 +1,33 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-18 09:04:31
|
||||
* @LastEditTime: 2021-10-18 09:40:33
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/EventInsight/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="d-container">
|
||||
<div class="ei-outter">
|
||||
<hotEventPO></hotEventPO>
|
||||
<industryTOPHE></industryTOPHE>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import hotEventPO from "./hotEventPO"
|
||||
import industryTOPHE from "./industryTOPHE"
|
||||
export default {
|
||||
name: "eventInsight",
|
||||
components: {
|
||||
hotEventPO, // 热点事件传播导向
|
||||
industryTOPHE // 行业TOP热点事件
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.ei-outter {
|
||||
padding: 0px 16px 16px 16px;
|
||||
}
|
||||
</style>
|
@ -0,0 +1,67 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-18 09:34:53
|
||||
* @LastEditTime: 2021-10-18 09:52:35
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/EventInsight/IndustryTOPHE/index.vue
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="itp-outter">
|
||||
<v-label-div title="行业TOP热点事件">
|
||||
</v-label-div>
|
||||
<v-table :columns="columns" :data="tbData" :pagination="false"></v-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "industryTOPHE",
|
||||
data() {
|
||||
return {
|
||||
columns: [
|
||||
{
|
||||
title: "事件标题",
|
||||
dataIndex: "a",
|
||||
key: "a",
|
||||
width: "55%"
|
||||
},
|
||||
{
|
||||
title: "影响力",
|
||||
dataIndex: "b",
|
||||
key: "b",
|
||||
},
|
||||
{
|
||||
title: "类型",
|
||||
dataIndex: "c",
|
||||
key: "c",
|
||||
},
|
||||
{
|
||||
title: "关联品牌",
|
||||
dataIndex: "d",
|
||||
key: "d",
|
||||
width: 180
|
||||
}
|
||||
],
|
||||
tbData: [
|
||||
{
|
||||
a: "为了研究长城吉利谁更强,我们砸了台吉利",
|
||||
b: '20.2',
|
||||
c: '2021-08-18 12:00:00',
|
||||
d: '奥迪'
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.itp-outter {
|
||||
width: 100%;
|
||||
height: 392px;
|
||||
border: 2px solid #0f2a4d;
|
||||
margin-top: 16px;
|
||||
}
|
||||
</style>
|
Loading…
Reference in new issue