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