feat：完善舆情页面
This commit is contained in:
zjc
@@ -1,11 +0,0 @@
|
||||
<template>
|
||||
<div class="container"> </div>
|
||||
</template>
|
||||
|
||||
<script setup></script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.container {
|
||||
margin: vh(120) vw(10) 0 vw(10);
|
||||
}
|
||||
</style>
|
||||
105
src/views/sentiment/components/dataSource.vue
Normal file
105
src/views/sentiment/components/dataSource.vue
Normal file
@@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<div class="table">
|
||||
<div class="header">
|
||||
<p>排名</p>
|
||||
<p>媒体/账号名称</p>
|
||||
<p>媒体类型</p>
|
||||
<p>总条数</p>
|
||||
<p>敏感舆情</p>
|
||||
</div>
|
||||
<div class="list">
|
||||
<div class="cell" v-for="(item, index) in 10" :key="index">
|
||||
<p><span class="index">排名</span></p>
|
||||
<p><span class="name">手机新浪网</span></p>
|
||||
<p><span class="name">新闻</span></p>
|
||||
<p><span class="number">580</span></p>
|
||||
<p><span class="status">1000</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup></script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.table {
|
||||
padding: 0 vw(20);
|
||||
.header {
|
||||
display: flex;
|
||||
font-weight: 400;
|
||||
font-size: vw(13);
|
||||
color: #0084ff;
|
||||
height: vh(40);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(3, 78, 153, 0.3);
|
||||
& > p {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.list {
|
||||
overflow-y: auto;
|
||||
height: vh(370);
|
||||
/* 滚动条整体样式 */
|
||||
&::-webkit-scrollbar {
|
||||
width: vw(4); /* 滚动条的宽度 */
|
||||
}
|
||||
/* 滚动条轨道 */
|
||||
&::-webkit-scrollbar-track {
|
||||
background: 'transparent'; /* 轨道的背景色 */
|
||||
}
|
||||
/* 滚动条滑块 */
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
|
||||
border-radius: 5px; /* 滑块的圆角 */
|
||||
}
|
||||
// /* 当鼠标悬停在滚动条上时滑块的样式 */
|
||||
// &::-webkit-scrollbar-thumb:hover {
|
||||
// background: #555; /* 滑块的背景色 */
|
||||
// }
|
||||
.cell {
|
||||
height: vh(40);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&:nth-child(2n) {
|
||||
background: rgba(3, 78, 153, 0.3);
|
||||
}
|
||||
& > p {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.index {
|
||||
display: inline-block;
|
||||
width: vw(40);
|
||||
height: vh(24);
|
||||
font-weight: 400;
|
||||
font-size: vw(12);
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: vw(2);
|
||||
background-color: #495c77;
|
||||
}
|
||||
.name {
|
||||
font-weight: 400;
|
||||
font-size: vw(15);
|
||||
color: #ffffff;
|
||||
}
|
||||
.number {
|
||||
font-weight: 400;
|
||||
font-size: vw(15);
|
||||
color: #02f9fa;
|
||||
}
|
||||
.status {
|
||||
font-weight: 400;
|
||||
font-size: vw(15);
|
||||
color: #e21b1b;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
64
src/views/sentiment/components/emotion.vue
Normal file
64
src/views/sentiment/components/emotion.vue
Normal file
@@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<div class="emotion" id="emotion" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from 'echarts'
|
||||
import { fitChartSize } from '@/utils/dataUtil'
|
||||
let emotionChart = null
|
||||
const initChart = () => {
|
||||
const dom = document.getElementById('emotion')
|
||||
emotionChart = echarts.init(dom)
|
||||
emotionChart.setOption({
|
||||
legend: {
|
||||
top: 'top',
|
||||
itemWidth: fitChartSize(30),
|
||||
itemHeight: fitChartSize(30),
|
||||
textStyle: {
|
||||
fontSize: fitChartSize(14),
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Nightingale Chart',
|
||||
type: 'pie',
|
||||
radius: ['10%', '70%'],
|
||||
center: ['50%', '56%'],
|
||||
roseType: 'area',
|
||||
itemStyle: {
|
||||
borderRadius: fitChartSize(10)
|
||||
},
|
||||
data: [
|
||||
{ value: 40, name: 'rose 1' },
|
||||
{ value: 38, name: 'rose 2' },
|
||||
{ value: 32, name: 'rose 3' },
|
||||
{ value: 30, name: 'rose 4' },
|
||||
{ value: 28, name: 'rose 5' },
|
||||
{ value: 26, name: 'rose 6' },
|
||||
{ value: 22, name: 'rose 7' },
|
||||
{ value: 18, name: 'rose 8' }
|
||||
]
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
const resize = () => {
|
||||
if (emotionChart) {
|
||||
emotionChart.dispose()
|
||||
emotionChart = null
|
||||
initChart()
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
initChart()
|
||||
window.addEventListener('resize', resize)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.emotion {
|
||||
width: vw(740);
|
||||
height: vh(400);
|
||||
}
|
||||
</style>
|
||||
120
src/views/sentiment/components/wordCloud.vue
Normal file
120
src/views/sentiment/components/wordCloud.vue
Normal file
@@ -0,0 +1,120 @@
|
||||
<template>
|
||||
<div class="wordCloud" id="wordCloud" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from 'echarts'
|
||||
import 'echarts-wordcloud'
|
||||
import { fitChartSize } from '@/utils/dataUtil'
|
||||
|
||||
let wordChart = null
|
||||
const initChart = () => {
|
||||
const dom = document.getElementById('wordCloud')
|
||||
wordChart = echarts.init(dom)
|
||||
wordChart.setOption({
|
||||
//你的代码
|
||||
series: [
|
||||
{
|
||||
type: 'wordCloud',
|
||||
// 网格大小，各项之间间距
|
||||
gridSize: fitChartSize(50),
|
||||
// 形状 circle 圆，cardioid 心， diamond 菱形，
|
||||
// triangle-forward 、triangle 三角，star五角星
|
||||
shape: 'circle',
|
||||
// 字体大小范围
|
||||
sizeRange: [fitChartSize(14), fitChartSize(36)],
|
||||
// 文字旋转角度范围
|
||||
rotationRange: [0, 0],
|
||||
// 旋转步值
|
||||
rotationStep: 90,
|
||||
// 自定义图形
|
||||
// maskImage: maskImage,
|
||||
left: 'center',
|
||||
top: 'center',
|
||||
// 画布宽
|
||||
width: '100%',
|
||||
// 画布高
|
||||
height: '100%',
|
||||
// 是否渲染超出画布的文字
|
||||
drawOutOfBound: false,
|
||||
textStyle: {
|
||||
color: function () {
|
||||
const colors = ['#165DFF', '#6aca37', '#05a4b6', '#f93920', '#f0b114']
|
||||
return colors[parseInt(Math.random() * colors.length)]
|
||||
},
|
||||
padding: fitChartSize(10),
|
||||
backgroundColor: 'rgba(0,255,255,.2)'
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 2,
|
||||
name: '体外循环'
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
name: '偏好现金'
|
||||
},
|
||||
{
|
||||
value: 7.75434839431,
|
||||
name: '新成立公司'
|
||||
},
|
||||
{
|
||||
value: 11.3865516372,
|
||||
name: '相同董监高'
|
||||
},
|
||||
{
|
||||
value: 7.75434839431,
|
||||
name: '司法风险'
|
||||
},
|
||||
{
|
||||
value: 5.83541244308,
|
||||
name: '小微企业'
|
||||
},
|
||||
{
|
||||
value: 15.83541244308,
|
||||
name: '同名称交易'
|
||||
},
|
||||
{
|
||||
value: 2.83541244308,
|
||||
name: '高频交易'
|
||||
},
|
||||
{
|
||||
value: 5.83541244308,
|
||||
name: '大额交易'
|
||||
},
|
||||
{
|
||||
value: 10.83541244308,
|
||||
name: '贸易公司'
|
||||
},
|
||||
{
|
||||
value: 5.83541244308,
|
||||
name: '票据偏好'
|
||||
},
|
||||
{
|
||||
value: 5.83541244308,
|
||||
name: '空转走单'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
const resize = () => {
|
||||
if (wordChart) {
|
||||
wordChart.dispose()
|
||||
wordChart = null
|
||||
initChart()
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
initChart()
|
||||
window.addEventListener('resize', resize)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.wordCloud {
|
||||
width: vw(760);
|
||||
height: vh(420);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user