创新实训【21】——热词情感趋向分析的图表展示
主要内容
这篇记录了热词的情感趋势分析的图表展示，数据库中每个热词都有一个情感分析，为积极，中性或消极，统计了数据库中每个情感的热词数，用echarts的柱状图和扇形图展示不同热词情感的比例，并对比了微博和知乎评论情感趋向比例。
展示内容
主要步骤
1.前端使用div定义图表展示的长度和宽度。
<template>
<div>
<div style="margin-top:0px">
<h3 align="center" style="font-size: 20px ">热词情感趋向</h3>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main1" style="width:450px;height: 250px;float:left;margin-left:120px"></div>
<div id="main2" style="width:450px;height: 250px;margin-left:680px"></div>
</div>
<div class="clear" >
<h3 align="center" style="font-size: 20px ">微博和知乎评论情感趋向对比</h3>
<div id="main3" style="width:450px;height: 250px;float:left;margin-left:120px"></div>
<div id="main4" style="width:600px;height: 250px;margin-left:600px"></div>
</div>
</div>
</template>
2.前端从后端获取数据
emotion保存了每种情感出现的次数。
async getdata(){
const {data:res}= await this.$http.post("getemotion");
this.emotion=res.emotion;
this.getbar();
this.getPie();
this.getbar1();
this.getPie1();
},
3.后端获取数据，emotion记录了每个情感的次数。积极的emotion为1，中性的emotion为0，消极的emotion为-1。
@RequestMapping("/getemotion")
public String getemotion()
{
List<Integer> emotion=new ArrayList();
int positive=kwdao.getEmotionCount(1);
int nagetive=kwdao.getEmotionCount(-1);
int neutual =kwdao.getEmotionCount(0);
emotion.add(nagetive);
emotion.add(neutual);
emotion.add(positive);
HashMap<String,Object> res =new HashMap<>();
res.put("emotion",emotion);
System.out.println(res);
String res_json=JSON.toJSONString(res);
return res_json;
}
数据库中查询每个情感的热词数。统计emotion为情感标号的热词数。
<select id="getEmotionCount" resultType="java.lang.Integer">
select count(*)
from kw
where emotion=#{emotion}
</select>
4.使用echarts展示热词情感的横向柱状图和扇形图，微博和知乎评论情感趋向对比的柱状图和双环扇形图。
引入echarts
let echarts = require('echarts/lib/echarts')
// 引入饼状图组件
require('echarts/lib/chart/pie')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
展示热词情感的柱状图
getbar(){
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main1'));
// 绘制图表
myChart.setOption(
{
// title: [{
// text: '热词情感',
// left: '25%',
// textAlign: 'center'
// }],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01]
},
yAxis: {
type: 'category',
data: ['消极','中性','积极'],
},
series: [
{
name: '讨论数',
type: 'bar',
data: this.emotion,
itemStyle: {
normal: {
//好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
color: function(params) {
// build a color map as your need.
var colorList = [
'#5470c6','#91cc75','#fac858'
];
return colorList[params.dataIndex]
},
}
},
},
]
}
)
},
展示热词情感的扇形图
getPie(){
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main2'));
// 绘制图表
myChart.setOption(
{
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: '热词情感',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '40',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data:[
{name:'消极',value:this.emotion[0]},
{name:'中性',value:this.emotion[1]},
{name:'积极',value:this.emotion[2]},
]
}
]
}
)
},
展示微博和知乎评论情感趋向对比的柱状图
getbar1(){
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main3'));
// 绘制图表
myChart.setOption(
{
// title: {
// text: '微博和知乎评论情感趋向对比',
// },
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['微博','知乎']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01]
},
yAxis: {
type: 'category',
data: ['消极', '中性', '积极']
},
series: [
{
name: '微博',
type: 'bar',
data: this.weibo,
},
{
name: '知乎',
type: 'bar',
data: this.zhihu,
}
]
}
)
},
展示微博和知乎评论情感趋向对比的双环扇形图
getPie1(){
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main4'));
// 绘制图表
myChart.setOption(
{
tooltip: {
trigger: 'item',
formatter: '{a}
{b}: {c} ({d}%)'
},
legend: {
data: ['消极', '中性', '积极']
},
series: [
{
name: '微博',
type: 'pie',
radius: ['40%', '55%'],
label: {
position: 'inner',
fontSize: 14,
},
labelLine: {
show: false
},
data: [
{value: 0.202, name: '消极'},
{value: 0.210, name: '中性'},
{value: 0.588, name: '积极'}
]
},
{
name: '知乎',
type: 'pie',
radius: ['60%', '80%'],
labelLine: {
length: 30,
},
label: {
formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}：} {per|{d}%} ',
backgroundColor: '#F6F8FC',
borderColor: '#8C8D8E',
borderWidth: 1,
borderRadius: 4,
rich: {
a: {
color: '#6E7079',
lineHeight: 22,
align: 'center'
},
hr: {
borderColor: '#8C8D8E',
width: '100%',
borderWidth: 1,
height: 0
},
b: {
color: '#4C5058',
fontSize: 14,
fontWeight: 'bold',
lineHeight: 33
},
per: {
//color: '#fff',
//backgroundColor: '#4C5058',
//padding: [3, 4],
//borderRadius: 4
fontSize:14,
}
}
},
data: [
{value: 0.388, name: '消极'},
{value: 0.217, name: '中性'},
{value: 0.395, name: '积极'},
]
}
]
}
)
},
展示结果：
热词情感趋向
两个网站一起对比的柱状图和双环扇形图
