hadoop离线阶段（第二十节）数据展示——Echarts

Echarts介绍

ECharts是一款由百度前端技术部开发的，基于Javascript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。
提供大量常用的数据可视化图表，底层基于ZRender（一个全新的轻量级canvas类库），创建了坐标系，图例，提示，工具箱等基础组件，并在此上构建出折线图（区域图）、柱状图（条状图）、散点图（气泡图）、饼图（环形图）、K线图、地图、力导向布局图以及和弦图，同时支持任意维度的堆积和多图表混合展现。

Echarts项目案例

三大框架环境搭建

第一步：创建数据库并导入数据

CREATE DATABASE  IF NOT EXISTS `web_log_view`;
USE `web_log_view`;

CREATE TABLE `t_avgpv_num` (
  `id` int(11) DEFAULT NULL,
  `dateStr` varchar(255) DEFAULT NULL,
  `avgPvNum` decimal(6,2) DEFAULT NULL
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

/*Data for the table `t_avgpv_num` */

insert  into `t_avgpv_num`(`id`,`dateStr`,`avgPvNum`) values (1,'20130919','13.40'),(2,'20130920','17.60'),(3,'20130921','15.20'),(4,'20130922','21.10'),(5,'20130923','16.90'),(6,'20130924','18.10'),(7,'20130925','18.60');

/*Table structure for table `t_flow_num` */

DROP TABLE IF EXISTS `t_flow_num`;

CREATE TABLE `t_flow_num` (
  `id` int(11) DEFAULT NULL,
  `dateStr` varchar(255) DEFAULT NULL,
  `pVNum` int(11) DEFAULT NULL,
  `uVNum` int(11) DEFAULT NULL,
  `iPNum` int(11) DEFAULT NULL,
  `newUvNum` int(11) DEFAULT NULL,
  `visitNum` int(11) DEFAULT NULL
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

/*Data for the table `t_flow_num` */

insert  into `t_flow_num`(`id`,`dateStr`,`pVNum`,`uVNum`,`iPNum`,`newUvNum`,`visitNum`) values (1,'20131001',4702,3096,2880,2506,3773),(2,'20131002',7528,4860,4435,4209,5937),(3,'20131003',7286,4741,4409,4026,5817),(4,'20131004',6653,5102,4900,2305,4659),(5,'20131005',5957,4943,4563,3134,3698),(6,'20131006',7978,6567,6063,4417,4560),(7,'20131007',6666,5555,4444,3333,3232);

第二步：创建maven web工程并添加依赖

<dependencies>
    <!-- Spring -->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-context</artifactId>
      <version>4.2.4.RELEASE</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId