创新实训【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} <br/>{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: '积极'},
               
            ]
        }
    ]
}
      )
    },

展示结果：
热词情感趋向
两个网站一起对比的柱状图和双环扇形图