如何使用Echarts将头条抓取结果以柱状图和饼形图展示?
后台框架:Spring+SpringMVC+Mybatis
表结构:
CREATE TABLE `article` ( `id` int(20) NOT NULL AUTO_INCREMENT, `title` varchar(255) DEFAULT NULL COMMENT '文章名', `readcount` int(10) DEFAULT NULL COMMENT '阅读次数', `showimgcount` int(1) DEFAULT NULL COMMENT '图片展示数', `type` int(1) DEFAULT NULL COMMENT '类型:1-文章 2-图片 3-视频', `commentcount` int(255) DEFAULT NULL COMMENT '评论数量', `publishtime` timestamp NULL DEFAULT NULL COMMENT '发布时间', `gallerycount` int(10) DEFAULT NULL COMMENT '图片数量-只针对相集', `section` varchar(255) DEFAULT NULL COMMENT '领域', `tagword` varchar(255) DEFAULT NULL COMMENT '关键字', `author` int(20) DEFAULT NULL, PRIMARY KEY (`id`), KEY `t_s_index` (`type`,`section`) )
编写查询语句:
<!--查询每个领域的平均阅读量--> <select id="selectSection_avg" parameterType="map" resultType="Map"> select a.section,avg(a.readcount) as readcount_avg,count(1) as section_count from article a where a.section is not null and a.section != '' group by a.section having count(1) > 100 </select> <!--查询每个文章类型的平均阅读量--> <select id="selectType_avg" parameterType="map" resultType="Map"> select a.type,avg(a.readcount) as readcount_sum,count(1) as type_count from article a group by a.type </select> <!--查询文章总量--> <select id="selectArticleCount" parameterType="map" resultType="int"> select count(1) from article </select>
此处省略dao层和service层的查询代码,只展示controller层的代码
@Autowired private TouTiaoService touTiaoService; @RequestMapping("/section") public void section_avg(HttpServletResponse response){ DataSourceContextHolder.setDbType(DataSourceType.DS_TOUTIAO); List<Map<String,Object>> list = touTiaoService.getSectionAvg(); DataSourceContextHolder.setDbType(DataSourceType.DS_EASYWEB); PrintUtils.printMsg(response, list); } @RequestMapping("/type") public void type_avg(HttpServletResponse response){ DataSourceContextHolder.setDbType(DataSourceType.DS_TOUTIAO); List<Map<String,Object>> list = touTiaoService.getTypeAvg(); DataSourceContextHolder.setDbType(DataSourceType.DS_EASYWEB); PrintUtils.printMsg(response, list); }
编写页面
<div class="container"> <div class="row"> <div class="col-sm-12"> <h3> 本页统计数据来源于某头条,闲暇时刻写了一个爬虫,爬取头条的文章,只统计阅读量在1万以上的文章,并且单个类型下的文章数量大于100篇。 共爬取<em id="author_count"></em>,<em id="article_count"></em> </h3> </div> </div> <hr /> <div class="row"> <div class="col-sm-6 col-xs-12 center" id="section_avg"> </div> <div class="col-sm-6 col-xs-12 center" id="section_article"> </div> </div> <div class="row"> <div class="col-sm-6 col-xs-12 center" id="type_count"> </div> <div class="col-sm-6 col-xs-12 center" id="type_avg"> </div> </div> </div> <!--引入echarts的js文件--> <script type="text/javascript" src="<%=JS_PATH%>echarts.min.js"></script> <script type="text/javascript" src="<%=JS_PATH%>toutiao.js"></script>
toutiao.js代码:
$(function(){ var section_avg = document.getElementById("section_avg"); var section_article = document.getElementById("section_article"); var type_count = document.getElementById("type_count"); var type_avg = document.getElementById("type_avg"); var section_avg_chart = echarts.init(section_avg); var section_article_chart = echarts.init(section_article); var type_count_chart = echarts.init(type_count); var type_avg_chart = echarts.init(type_avg); initSectionChart(section_avg_chart,section_article_chart); initTypeChart(type_count_chart,type_avg_chart); }); function initSectionChart(chart,chart1){ var option = { legend: { data:['各分类平均阅读量'] }, xAxis: [ { type: 'category', data: [], axisLabel:{ rotate:-90, interval:0 } } ], yAxis: [ { type: 'value', name: '平均阅读量', min: 0, axisLabel: { formatter: function(data){ return data/10000+"万"; } } } ], series: [ { name:'各分类平均阅读量', type:'bar', data:[] } ] }; var option1 = { legend: { data:['各分类文章数量'] }, xAxis: [ { type: 'category', data: [], axisLabel:{ rotate:-90, interval:0 } } ], yAxis: [ { type: 'value', name: '文章数量', min: 0 } ], series: [ { name:'各分类文章数量', type:'bar', data:[] } ] }; $.ajax({ url:BASE_PATH+'/toutiao/section.do', type:'get', dataType:'json', success:function(data){ var sectionName = []; var section_avg_value = []; var section_count = []; for(var i = 0; i < data.length;i++){ sectionName.push(data[i]['section']); section_avg_value.push(data[i]['readcount_avg']); section_count.push(data[i]['section_count']); } option.xAxis[0].data = sectionName; option.series[0].data = section_avg_value; chart.setOption(option); option1.xAxis[0].data = sectionName; option1.series[0].data = section_count; chart1.setOption(option1); } }); } function initTypeChart(chart,chart1){ var option = { title : { text: '不同文章类型阅读量比例', x:'center' }, legend: { data: [] }, series : [ { name: '不同文章类型阅读量比例', type: 'pie', data:[], label: { normal: { position: 'inner' } } } ] }; var option1 = { title : { text: '不同文章类型文章数量比例', x:'center' }, legend: { data: [] }, series : [ { name: '不同文章类型文章数量比例', type: 'pie', data:[], label: { normal: { position: 'inner' } } } ] }; $.ajax({ url:BASE_PATH+'/toutiao/type.do', type:'get', dataType:'json', success:function(data){ var typeName = []; var type_readcount = []; var type_count = []; var sum = 0; var count = 0; for(var i = 0; i < data.length;i++){ var type_name = ""; if(data[i]['type']==1){ type_name = "文章"; } if(data[i]['type']==2){ type_name="图册"; } if(data[i]['type']==3){ type_name="视频"; } type_readcount.push({"name":type_name+"\n平均阅读量:"+data[i]['readcount_sum'].toFixed(0),"value":data[i]['readcount_sum']}); type_count.push({"name":type_name+"\n文章数量:"+data[i]['type_count'].toFixed(0),"value":data[i]['type_count']}); sum += data[i]['readcount_sum']; count += data[i]['type_count']; } for(var i = 0;i < type_readcount.length; i++){ type_readcount[i]['value'] = type_readcount[i]['value']/sum; type_count[i]['value'] = type_count[i]['value']/count; } option.series[0].data = type_readcount; chart.setOption(option); option1.series[0].data = type_count; chart1.setOption(option1); } }); }
演示页面:微儿博客
源码下载地址请访问 微儿博客源码分享
头条爬虫请访问Java爬虫爬取今日头条文章,统计生成图表