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

图表展示"/>

创新实训【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'}]
});},