如何使用Echarts将头条抓取结果以柱状图和饼形图展示？

来源：互联网发布：如何建立的电影数据库编辑：程序博客网时间：2024/06/05 20:39

后台框架：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 awhere a.section is not null and a.section != '' group by a.sectionhaving 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 agroup by a.type</select><!--查询文章总量--><select id="selectArticleCount" parameterType="map" resultType="int">select count(1) from article</select>

此处省略dao层和service层的查询代码，只展示controller层的代码

@Autowiredprivate 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);}});}

展示结果：

演示页面：http://www.weare.net.cn/toutiao.html

源码下载地址请访问<<微儿博客源码分享>>

头条爬虫请访问<<Java爬虫爬取今日头条文章，统计生成图表>>

2 0