420 lines
13 KiB
Vue
420 lines
13 KiB
Vue
<template>
|
|
<div class="outside">
|
|
<h1 class="title">网易云评论词云分析图</h1>
|
|
<a-row :gutter="24">
|
|
<a-col :xl="12" :style="{ marginBottom: '24px' }">
|
|
<div class="container">
|
|
<div id="relativeCloud" style="width: 600px; height: 500px"></div>
|
|
</div>
|
|
</a-col>
|
|
<a-col :xl="12" :style="{ marginBottom: '24px' }">
|
|
<div class="container">
|
|
<div id="moodCloud" style="width: 600px; height: 500px"></div>
|
|
|
|
</div>
|
|
|
|
</a-col>
|
|
</a-row>
|
|
<a-row :gutter="24">
|
|
<a-col :xl="12" :style="{ marginBottom: '24px' }">
|
|
<div class="container">
|
|
<div id="chooseCloud" style="width: 600px; height: 500px"></div>
|
|
</div>
|
|
</a-col>
|
|
<a-col :xl="12" :style="{ marginBottom: '24px' }">
|
|
<div class="container">
|
|
<div id="emotionCloud" style="width: 600px; height: 500px"></div>
|
|
</div>
|
|
</a-col>
|
|
|
|
</a-row>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import * as echarts from 'echarts';
|
|
import 'echarts-wordcloud';
|
|
export default {
|
|
data() {
|
|
return {
|
|
relativeWordList: [
|
|
{
|
|
name: "妈妈",
|
|
value: 3929
|
|
},
|
|
{
|
|
name: "女朋友",
|
|
value: 3141
|
|
},
|
|
{
|
|
name: "哥哥",
|
|
value: 2763
|
|
},
|
|
{
|
|
name: "爸爸",
|
|
value: 2561
|
|
},
|
|
{
|
|
name: "男朋友",
|
|
value: 2110
|
|
},
|
|
{
|
|
name: "姐姐",
|
|
value: 1516
|
|
},
|
|
{
|
|
name: "奶奶",
|
|
value: 1268
|
|
},
|
|
{
|
|
name: "爷爷",
|
|
value: 1258
|
|
},
|
|
{
|
|
name: "老婆",
|
|
value: 1168
|
|
},
|
|
{
|
|
name: "妹妹",
|
|
value: 1118
|
|
},
|
|
|
|
],
|
|
moodWordList: [
|
|
{
|
|
name: "开心",
|
|
value: 6270
|
|
},
|
|
{
|
|
name: "快乐",
|
|
value: 3904
|
|
},
|
|
{
|
|
name: "难过",
|
|
value: 2992
|
|
},
|
|
{
|
|
name: "哀伤",
|
|
value: 2740
|
|
},
|
|
{
|
|
name: "痛苦",
|
|
value: 2252
|
|
},
|
|
{
|
|
name: "伤心",
|
|
value: 962
|
|
},
|
|
{
|
|
name: "心酸",
|
|
value: 841
|
|
},
|
|
{
|
|
name: "发怒",
|
|
value: 696
|
|
},
|
|
{
|
|
name: "欢喜",
|
|
value: 666
|
|
},
|
|
{
|
|
name: "答应",
|
|
value: 640
|
|
},
|
|
|
|
],
|
|
chooseWordList: [
|
|
{
|
|
name: "高考",
|
|
value: 3864
|
|
},
|
|
{
|
|
name: "考研",
|
|
value: 1053
|
|
},
|
|
{
|
|
name: "中考",
|
|
value: 638
|
|
},
|
|
{
|
|
name: "出国",
|
|
value: 200
|
|
},
|
|
{
|
|
name: "小升初",
|
|
value: 29
|
|
},
|
|
{
|
|
name: "考博",
|
|
value: 4
|
|
},
|
|
{
|
|
name: "考公",
|
|
value: 2
|
|
},
|
|
|
|
|
|
],
|
|
emotionWordList: [
|
|
{
|
|
name: "结婚",
|
|
value: 3155
|
|
},
|
|
{
|
|
name: "分手",
|
|
value: 2563
|
|
},
|
|
{
|
|
name: "恋爱",
|
|
value: 2181
|
|
},
|
|
{
|
|
name: "单身",
|
|
value: 1548
|
|
},
|
|
{
|
|
name: "离婚",
|
|
value: 441
|
|
},
|
|
]
|
|
|
|
}
|
|
},
|
|
methods: {
|
|
initRelativeMap() {
|
|
console.log("relativeMap")
|
|
let wordCharts = echarts.getInstanceByDom(document.getElementById('relativeCloud'));
|
|
if (wordCharts != null && wordCharts != undefined) {
|
|
wordCharts.dispose();
|
|
}
|
|
wordCharts = echarts.init(document.getElementById('relativeCloud'));
|
|
let option = {
|
|
title: {
|
|
text: '关键词:亲属',
|
|
//居中
|
|
left: 'center'
|
|
},
|
|
series: [{
|
|
type: 'wordCloud',
|
|
shape: 'pentagon',
|
|
left: 'center',
|
|
top: 'center',
|
|
width: '100%',
|
|
height: '100%',
|
|
right: null,
|
|
bottom: null,
|
|
sizeRange: [12, 60],
|
|
rotationRange: [-90, 90],
|
|
rotationStep: 45,
|
|
gridSize: 8,
|
|
drawOutOfBound: false,
|
|
textStyle: {
|
|
normal: {
|
|
fontFamily: 'sans-serif',
|
|
fontWeight: 'bold',
|
|
color: function () {
|
|
return 'rgb(' + [
|
|
Math.round(Math.random() * 160),
|
|
Math.round(Math.random() * 160),
|
|
Math.round(Math.random() * 160)
|
|
].join(',') + ')';
|
|
}
|
|
},
|
|
emphasis: {
|
|
shadowBlur: 10,
|
|
shadowColor: '#333'
|
|
}
|
|
},
|
|
data: this.relativeWordList
|
|
}]
|
|
}
|
|
|
|
|
|
wordCharts.setOption(option);
|
|
|
|
},
|
|
initMoodMap() {
|
|
let moodCharts = echarts.getInstanceByDom(document.getElementById('moodCloud'));
|
|
if (moodCharts != null && moodCharts != undefined) {
|
|
moodCharts.dispose();
|
|
}
|
|
moodCharts = echarts.init(document.getElementById('moodCloud'));
|
|
let option = {
|
|
title: {
|
|
text: '关键词:心情',
|
|
//居中
|
|
left: 'center'
|
|
},
|
|
series: [{
|
|
type: 'wordCloud',
|
|
shape: 'pentagon',
|
|
left: 'center',
|
|
top: 'center',
|
|
width: '100%',
|
|
height: '100%',
|
|
right: null,
|
|
bottom: null,
|
|
sizeRange: [12, 60],
|
|
rotationRange: [-90, 90],
|
|
rotationStep: 45,
|
|
gridSize: 8,
|
|
drawOutOfBound: false,
|
|
textStyle: {
|
|
normal: {
|
|
fontFamily: 'sans-serif',
|
|
fontWeight: 'bold',
|
|
color: function () {
|
|
return 'rgb(' + [
|
|
Math.round(Math.random() * 160),
|
|
Math.round(Math.random() * 160),
|
|
Math.round(Math.random() * 160)
|
|
].join(',') + ')';
|
|
}
|
|
},
|
|
emphasis: {
|
|
shadowBlur: 10,
|
|
shadowColor: '#333'
|
|
}
|
|
},
|
|
data: this.moodWordList
|
|
}]
|
|
}
|
|
moodCharts.setOption(option);
|
|
},
|
|
initChooseMap() {
|
|
let chooseCharts = echarts.getInstanceByDom(document.getElementById('chooseCloud'));
|
|
if (chooseCharts != null && chooseCharts != undefined) {
|
|
chooseCharts.dispose();
|
|
}
|
|
chooseCharts = echarts.init(document.getElementById('chooseCloud'));
|
|
let option = {
|
|
title: {
|
|
text: '关键词:选择',
|
|
//居中
|
|
left: 'center'
|
|
},
|
|
series: [{
|
|
type: 'wordCloud',
|
|
shape: 'pentagon',
|
|
left: 'center',
|
|
top: 'center',
|
|
width: '100%',
|
|
height: '100%',
|
|
right: null,
|
|
bottom: null,
|
|
sizeRange: [12, 60],
|
|
rotationRange: [-90, 90],
|
|
rotationStep: 45,
|
|
gridSize: 8,
|
|
drawOutOfBound: false,
|
|
textStyle: {
|
|
normal: {
|
|
fontFamily: 'sans-serif',
|
|
fontWeight: 'bold',
|
|
color: function () {
|
|
return 'rgb(' + [
|
|
Math.round(Math.random() * 160),
|
|
Math.round(Math.random() * 160),
|
|
Math.round(Math.random() * 160)
|
|
].join(',') + ')';
|
|
}
|
|
},
|
|
emphasis: {
|
|
shadowBlur: 10,
|
|
shadowColor: '#333'
|
|
}
|
|
},
|
|
data: this.chooseWordList
|
|
}]
|
|
}
|
|
chooseCharts.setOption(option);
|
|
},
|
|
initEmotionMap() {
|
|
let emotionCharts = echarts.getInstanceByDom(document.getElementById('emotionCloud'));
|
|
if (emotionCharts != null && emotionCharts != undefined) {
|
|
emotionCharts.dispose();
|
|
}
|
|
emotionCharts = echarts.init(document.getElementById('emotionCloud'));
|
|
let option = {
|
|
title: {
|
|
text: '关键词:情感',
|
|
//居中
|
|
left: 'center'
|
|
},
|
|
series: [{
|
|
type: 'wordCloud',
|
|
shape: 'pentagon',
|
|
left: 'center',
|
|
top: 'center',
|
|
width: '100%',
|
|
height: '100%',
|
|
right: null,
|
|
bottom: null,
|
|
sizeRange: [12, 60],
|
|
rotationRange: [-90, 90],
|
|
rotationStep: 45,
|
|
gridSize: 8,
|
|
drawOutOfBound: false,
|
|
textStyle: {
|
|
normal: {
|
|
fontFamily: 'sans-serif',
|
|
fontWeight: 'bold',
|
|
color: function () {
|
|
return 'rgb(' + [
|
|
Math.round(Math.random() * 160),
|
|
Math.round(Math.random() * 160),
|
|
Math.round(Math.random() * 160)
|
|
].join(',') + ')';
|
|
}
|
|
},
|
|
emphasis: {
|
|
shadowBlur: 10,
|
|
shadowColor: '#333'
|
|
}
|
|
},
|
|
data: this.emotionWordList
|
|
}]
|
|
}
|
|
emotionCharts.setOption(option);
|
|
}
|
|
},
|
|
mounted() {
|
|
|
|
setTimeout(() => {
|
|
this.initRelativeMap()
|
|
this.initMoodMap()
|
|
this.initChooseMap()
|
|
this.initEmotionMap()
|
|
}, 100);
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.outside {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 0;
|
|
margin: 0;
|
|
background-color: white;
|
|
|
|
.container {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 20px;
|
|
background-color: white;
|
|
}
|
|
|
|
.title {
|
|
padding: 20px;
|
|
//加粗
|
|
font-weight: bold;
|
|
//字体大小
|
|
font-size: 20px;
|
|
//左右居中
|
|
text-align: center;
|
|
}
|
|
}
|
|
</style>
|