本文介绍了一种使用Echarts将从头条抓取的数据以柱状图和饼图形式展示的方法。通过Spring+SpringMVC+Mybatis搭建后台框架，设计了特定的表结构用于存储头条文章数据。文中详细展示了如何编写SQL查询语句来获取不同领域的平均阅读量和文章类型的平均阅读量，并利用Echarts在前端页面上展示这些数据。
如何使用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爬虫爬取今日头条文章，统计生成图表
扫一扫
2213
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
