创新实训【14】——热词变化趋势图表展示

主要内容

这篇主要记录了热词随时间变化趋势的图表展示。从数据库中获取每个热词近10年，近12个月，近30天的讨论次数，使用echarts的柱形图展示每个热词随时间的变化趋势。

展示内容

现在数据库中的数据还很少，展示的数据很多都为0。

主要步骤

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

 <div  style="margin-top:20px">
      <div id="main1" style="width:450px;height: 350px;float:left;margin-left:100px"></div>        
       <div id="main2" style="width:600px;height: 350px;float:right;margin-right:20px"></div>  
</div>

<div  class="clear" style="margin-top:20px">
      <div id="main3" style="width:800px;height: 350px;margin-left:120px"></div>        
      
</div>

2.从后端获取数据
days是近30天的次数，months是近12个月的次数，years是近10年的热词讨论次数。

 data(){
     return{
         KW:"",
         times:0,
         days:[],
         months:[],
         years:[],
         sources:"",
         otherKW:[],
     };
    },

获得数据，展示图表。

 async getInfo(){
           console.log(this.KW);
           const query={};
           query.KW=this.KW;
           const {data:res}= await this.$http.post("KWinfo",query);
           console.log(res.flag,res.flag=="false");
           if(res.flag=="false")
                 return;
           this.times=res.times;
           this.days=res.days;
           this.months=res.months;
           this.years=res.years;
           this.sources=res.sources;
           this.otherKW=res.otherKW;
           this.getPie1();
           this.getPie2();
           this.getPie3();
 },

3.后端从数据库中获得的天数，月份，年份的讨论次数是用“，”分隔的String类型，将这个字符串用“，”分割，每个字符串用Integer.valueOf(s).intValue()转换成int，将这个值加入到相应列表中，获得天数，月份，年份的讨论次数的列表，列表中的每个值为这天，这个月，这年的讨论次数。

 @RequestMapping("/KWinfo")
    public String KWinfo(@RequestBody String data ) {
        JSONObject datajson= JSONObject.parseObject(data);
        System.out.println(datajson);
        String kw=datajson.getString("KW");
        KW m=kwdao.getKWInfo(kw);
        if(m==null){
            HashMap<String,Object> res =new HashMap<>();
            res.put("flag","false");
            String res_json=JSON.toJSONString(res);
            System.out.println(res_json);
            return res_json;
        }
        String[] days=m.getDays().split("，");
        System.out.println(m);
        List<Integer> d=new ArrayList<>();
        for(String s:days){

            int a=Integer.valueOf(s).intValue();
            d.add(a);
        }
        String[] months=m.getMonths().split("，");
        List<Integer> mon=new ArrayList<>();
        for(String s:months){
           //System.out.println(s);
            int a=Integer.valueOf(s).intValue();
            mon.add(a);
        }
        String[] years=m.getYears().split("，");
        List<Integer> y=new ArrayList<>();
        for(String s:years){
            //System.out.println(s);
            int a=Integer.valueOf(s).intValue();
            y.add(a);
        }
        String[] otherKW=m.getOtherKW().split("，");
        HashMap<String,Object> res =new HashMap<>();
        res.put("days",d);
        res.put("months",mon);
        res.put("years",y);
        res.put("times",m.getTimes());
        res.put("sources",m.getSources());
        res.put("otherKW",otherKW);
        res.put("flag","true");
        String res_json=JSON.toJSONString(res);
        System.out.println(res_json);
        return res_json;
    }

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'
    },
       xAxis: {
        type: 'category',
        data: ['2011', '2012', '2013', '2014', '2015', '2016', '2017','2018','2019','2020','2021']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: this.years,
        type: 'bar',
        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]
                        },
　　　　　　　　　　　　　
                    }
                },
    },
    {
        data: this.years,
        type: 'line'
    }]
    }
         );

    },

展示随月份的变化趋势

 getPie2() {
        console.log(111);
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main2'));
      

      // 绘制图表
      myChart.setOption(
        { title: {
        text: '热词月份变化趋势',
       
        left: 'center'
    },
    xAxis: {
        type: 'category',
        data: ['2020-05', '2020-06', '2020-07', '2020-08', '2020-09', '2020-10', '2020-11','2020-12','2021-01','2021-02','2021-03','2021-04','2021-05']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: this.months,
        type: 'bar',
        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]
                        },
　　　　　　　　　　　　　
                    }
                },
    },{
        data: this.months,
        type: 'line'
    }]
}
         );

    },

展示随天的变化趋势

   getPie3() {
        console.log(111);
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main3'));
      

      // 绘制图表
      myChart.setOption(
        { title: {
        text: '热词天数变化趋势',
       
        left: 'center'
    },
    xAxis: {
        type: 'category',
        data: ['1', '2', '3', '4', '5', '6', '7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','今天']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: this.days,
        type: 'bar',
        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]
                        },
　　　　　　　　　　　　　
                    }
                },
    },{
        data: this.days,
        type: 'line'
    }]
}
         );

    },