创新实训【16】——热词分析图表展示

主要内容

这篇主要记录了热词分析的图表展示，从数据库中获得了讨论次数最多的10个热词，使用echarts的扇形图和条形图展示了热词和数量。

展示内容

主要步骤

1.在前端用div展示图表的宽度和高度。

<template>
    <div>
        
        <div>
       <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
        <div id="main1" style="width:450px;height: 500px;float:left;margin-left:120px"></div>
        <div id="main2" style="width:600px;height: 500px;float:right;margin-right:20px"></div>
      </div>
      
    </div>
</template>

2.前端从后端获取数据
shan是扇形图需要的数据，为每个热词和它的次数，label和size为条形图需要的数据，label为热词名称的列表，size为对应热词名称列表中那个热词的次数。

 data(){
     return{
        data:[],
        label:[],
        size:[],
     };
    },

获得数据，展示图表。

 async getdata(){
            const {data:res}= await this.$http.post("kw_info1");
           this.data=res.shan;
           this.label=res.label;
           this.size=res.size;
           this.getPie1();
           this.getbar();
       },

3.从后端获取数据，shan是扇形图需要的数据，HashMap形式，为每个热词和它的次数，label和size是条形图需要的数据，label是热词名称列表，size是对应热词名称列表中那个热词的次数。

@RequestMapping("/kw_info1")
    public String kw_info1()
    {
        List<KW> a =kwdao.getKWInfo1(10);
        List<Map> result=new ArrayList();
        List<String> label=new ArrayList();
        List<Integer> size=new ArrayList();
        for(KW kw:a){
            Map<String,Object> m=new HashMap();
            m.put("name",kw.getKW());
            m.put("value",kw.getTimes());
            result.add(m);
            label.add(kw.getKW());
            size.add(kw.getTimes());
        }

        HashMap<String,Object> res =new HashMap<>();
        res.put("shan",result);
        res.put("label",label);
        res.put("size",size);
        System.out.println(res);
        String res_json=JSON.toJSONString(res);
        return res_json;

    }

从数据库中查询出现次数最多的10个热词

<select id="getKWInfo1" resultType="com.example.demo.bean.KW">
        select KW,times
        from kwinfo
        order by times desc
        limit #{limit}
    </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')

展示热词扇形图

getPie1() {
        console.log(111);
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main1'));
      // 绘制图表
      myChart.setOption(
          {
    title: {
        text: '热词扇形图',
       
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
    },
    series: [
        {
            name: '热词',
            type: 'pie',
            radius: '50%',
            data: this.data,
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
          }
         );

    },

展示热词柱状图

   getbar(){
        // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main2'));
      // 绘制图表
      myChart.setOption(
          {
              title: {
        text: '热词柱状图',
       
        left: 'center'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            data: this.label,
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: '数量',
            type: 'bar',
            barWidth: '60%',
            data: this.size,
            itemStyle: {
                    normal: {
　　　　　　　　　　　　　　//好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
                        color: function(params) {
                            // build a color map as your need.
                            var colorList = [
                              '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                               '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                               '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0',
                               '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                               '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                               '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                            ];
                            return colorList[params.dataIndex]
                        },
　　　　　　　　　　　　　
                    }
                },
        }
    ]
}
      )
    }