122

src/main/webapp/static/echarts-2.2.7/doc/slide/css/echarts-slide.css

@@ -0,0 +1,189 @@
+table {
+  max-width: 100%;
+  background-color: transparent;
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+.table {
+  width: 100%;
+  margin-bottom: 20px;
+}
+
+.table th,
+.table td {
+  padding: 8px;
+  line-height: 20px;
+  text-align: left;
+  vertical-align: top;
+  border-top: 1px solid #fff;
+}
+
+.table th {
+  font-weight: bold;
+}
+
+.table thead th {
+  vertical-align: bottom;
+}
+
+.table caption + thead tr:first-child th,
+.table caption + thead tr:first-child td,
+.table colgroup + thead tr:first-child th,
+.table colgroup + thead tr:first-child td,
+.table thead:first-child tr:first-child th,
+.table thead:first-child tr:first-child td {
+  border-top: 0;
+}
+
+.table tbody + tbody {
+  border-top: 2px solid #fff;
+}
+
+.table .table {
+  background-color: #666;
+}
+
+.table-condensed th,
+.table-condensed td {
+  padding: 4px 5px;
+}
+
+.table-bordered {
+  border: 1px solid #fff !important;
+  border-collapse: separate;
+  *border-collapse: collapse;
+  border-left: 0;
+  -webkit-border-radius: 4px;
+     -moz-border-radius: 4px;
+          border-radius: 4px;
+}
+
+.table-bordered th,
+.table-bordered td {
+  border-left: 1px solid #fff;
+}
+
+.table-bordered caption + thead tr:first-child th,
+.table-bordered caption + tbody tr:first-child th,
+.table-bordered caption + tbody tr:first-child td,
+.table-bordered colgroup + thead tr:first-child th,
+.table-bordered colgroup + tbody tr:first-child th,
+.table-bordered colgroup + tbody tr:first-child td,
+.table-bordered thead:first-child tr:first-child th,
+.table-bordered tbody:first-child tr:first-child th,
+.table-bordered tbody:first-child tr:first-child td {
+  border-top: 0;
+}
+
+.table-bordered thead:first-child tr:first-child > th:first-child,
+.table-bordered tbody:first-child tr:first-child > td:first-child,
+.table-bordered tbody:first-child tr:first-child > th:first-child {
+  -webkit-border-top-left-radius: 4px;
+          border-top-left-radius: 4px;
+  -moz-border-radius-topleft: 4px;
+}
+
+.table-bordered thead:first-child tr:first-child > th:last-child,
+.table-bordered tbody:first-child tr:first-child > td:last-child,
+.table-bordered tbody:first-child tr:first-child > th:last-child {
+  -webkit-border-top-right-radius: 4px;
+          border-top-right-radius: 4px;
+  -moz-border-radius-topright: 4px;
+}
+
+.table-bordered thead:last-child tr:last-child > th:first-child,
+.table-bordered tbody:last-child tr:last-child > td:first-child,
+.table-bordered tbody:last-child tr:last-child > th:first-child,
+.table-bordered tfoot:last-child tr:last-child > td:first-child,
+.table-bordered tfoot:last-child tr:last-child > th:first-child {
+  -webkit-border-bottom-left-radius: 4px;
+          border-bottom-left-radius: 4px;
+  -moz-border-radius-bottomleft: 4px;
+}
+
+.table-bordered thead:last-child tr:last-child > th:last-child,
+.table-bordered tbody:last-child tr:last-child > td:last-child,
+.table-bordered tbody:last-child tr:last-child > th:last-child,
+.table-bordered tfoot:last-child tr:last-child > td:last-child,
+.table-bordered tfoot:last-child tr:last-child > th:last-child {
+  -webkit-border-bottom-right-radius: 4px;
+          border-bottom-right-radius: 4px;
+  -moz-border-radius-bottomright: 4px;
+}
+
+.table-bordered tfoot + tbody:last-child tr:last-child td:first-child {
+  -webkit-border-bottom-left-radius: 0;
+          border-bottom-left-radius: 0;
+  -moz-border-radius-bottomleft: 0;
+}
+
+.table-bordered tfoot + tbody:last-child tr:last-child td:last-child {
+  -webkit-border-bottom-right-radius: 0;
+          border-bottom-right-radius: 0;
+  -moz-border-radius-bottomright: 0;
+}
+
+.table-bordered caption + thead tr:first-child th:first-child,
+.table-bordered caption + tbody tr:first-child td:first-child,
+.table-bordered colgroup + thead tr:first-child th:first-child,
+.table-bordered colgroup + tbody tr:first-child td:first-child {
+  -webkit-border-top-left-radius: 4px;
+          border-top-left-radius: 4px;
+  -moz-border-radius-topleft: 4px;
+}
+
+.table-bordered caption + thead tr:first-child th:last-child,
+.table-bordered caption + tbody tr:first-child td:last-child,
+.table-bordered colgroup + thead tr:first-child th:last-child,
+.table-bordered colgroup + tbody tr:first-child td:last-child {
+  -webkit-border-top-right-radius: 4px;
+          border-top-right-radius: 4px;
+  -moz-border-radius-topright: 4px;
+}
+
+.table-striped tbody > tr:nth-child(odd) > td,
+.table-striped tbody > tr:nth-child(odd) > th {
+  background-color: #666;
+}
+
+.table-hover tbody tr:hover > td,
+.table-hover tbody tr:hover > th {
+  background-color: #333;
+}
+
+.table tbody tr.success > td, .table tbody tr td.success {
+  background-color: #dff0d8;
+  color: #666;
+}
+
+.table tbody tr.error > td, .table tbody tr td.error {
+  background-color: #f2dede;
+  color: #666;
+}
+
+.table tbody tr.warning > td,.table tbody tr td.warning {
+  background-color: #fcf8e3;
+  color: #666;
+}
+
+.table tbody tr.info > td, .table tbody tr td.info {
+  background-color: #d9edf7;
+  color: #666;
+}
+
+.table-hover tbody tr.success:hover > td {
+  background-color: #d0e9c6;
+}
+
+.table-hover tbody tr.error:hover > td {
+  background-color: #ebcccc;
+}
+
+.table-hover tbody tr.warning:hover > td {
+  background-color: #faf2cc;
+}
+
+.table-hover tbody tr.info:hover > td {
+  background-color: #c4e3f3;
+}

src/main/webapp/static/echarts-2.2.7/doc/slide/css/print/paper.css

@@ -0,0 +1,176 @@
+/* Default Print Stylesheet Template
+   by Rob Glazebrook of CSSnewbie.com
+   Last Updated: June 4, 2008
+
+   Feel free (nay, compelled) to edit, append, and
+   manipulate this file as you see fit. */
+
+
+/* SECTION 1: Set default width, margin, float, and
+   background. This prevents elements from extending
+   beyond the edge of the printed page, and prevents
+   unnecessary background images from printing */
+body {
+	background: #fff;
+	font-size: 13pt;
+	width: auto;
+	height: auto;
+	border: 0;
+	margin: 0 5%;
+	padding: 0;
+	float: none !important;
+	overflow: visible;
+}
+html {
+	background: #fff;
+	width: auto;
+	height: auto;
+	overflow: visible;
+}
+
+/* SECTION 2: Remove any elements not needed in print.
+   This would include navigation, ads, sidebars, etc. */
+.nestedarrow,
+.controls,
+.reveal .progress,
+.reveal.overview,
+.fork-reveal,
+.share-reveal,
+.state-background {
+	display: none !important;
+}
+
+/* SECTION 3: Set body font face, size, and color.
+   Consider using a serif font for readability. */
+body, p, td, li, div, a {
+	font-size: 16pt!important;
+	font-family: Georgia, "Times New Roman", Times, serif !important;
+	color: #000;
+}
+
+/* SECTION 4: Set heading font face, sizes, and color.
+   Diffrentiate your headings from your body text.
+   Perhaps use a large sans-serif for distinction. */
+h1,h2,h3,h4,h5,h6 {
+	color: #000!important;
+	height: auto;
+	line-height: normal;
+	font-family: Georgia, "Times New Roman", Times, serif !important;
+	text-shadow: 0 0 0 #000 !important;
+	text-align: left;
+	letter-spacing: normal;
+}
+/* Need to reduce the size of the fonts for printing */
+h1 { font-size: 26pt !important;  }
+h2 { font-size: 22pt !important; }
+h3 { font-size: 20pt !important; }
+h4 { font-size: 20pt !important; font-variant: small-caps; }
+h5 { font-size: 19pt !important; }
+h6 { font-size: 18pt !important; font-style: italic; }
+
+/* SECTION 5: Make hyperlinks more usable.
+   Ensure links are underlined, and consider appending
+   the URL to the end of the link for usability. */
+a:link,
+a:visited {
+	color: #000 !important;
+	font-weight: bold;
+	text-decoration: underline;
+}
+/*
+.reveal a:link:after,
+.reveal a:visited:after {
+	content: " (" attr(href) ") ";
+	color: #222 !important;
+	font-size: 90%;
+}
+*/
+
+
+/* SECTION 6: more reveal.js specific additions by @skypanther */
+ul, ol, div, p {
+	visibility: visible;
+	position: static;
+	width: auto;
+	height: auto;
+	display: block;
+	overflow: visible;
+	margin: auto;
+	text-align: left !important;
+}
+.reveal .slides {
+	position: static;
+	width: auto;
+	height: auto;
+
+	left: auto;
+	top: auto;
+	margin-left: auto;
+	margin-top: auto;
+	padding: auto;
+
+	overflow: visible;
+	display: block;
+
+	text-align: center;
+	-webkit-perspective: none;
+	   -moz-perspective: none;
+	    -ms-perspective: none;
+	        perspective: none;
+
+	-webkit-perspective-origin: 50% 50%; /* there isn't a none/auto value but 50-50 is the default */
+	   -moz-perspective-origin: 50% 50%;
+	    -ms-perspective-origin: 50% 50%;
+	        perspective-origin: 50% 50%;
+}
+.reveal .slides>section,
+.reveal .slides>section>section {
+
+	visibility: visible !important;
+	position: static !important;
+	width: 90% !important;
+	height: auto !important;
+	display: block !important;
+	overflow: visible !important;
+
+	left: 0% !important;
+	top: 0% !important;
+	margin-left: 0px !important;
+	margin-top: 0px !important;
+	padding: 20px 0px !important;
+
+	opacity: 1 !important;
+
+	-webkit-transform-style: flat !important;
+	   -moz-transform-style: flat !important;
+	    -ms-transform-style: flat !important;
+	        transform-style: flat !important;
+
+	-webkit-transform: none !important;
+	   -moz-transform: none !important;
+	    -ms-transform: none !important;
+	        transform: none !important;
+}
+.reveal section {
+	page-break-after: always !important;
+	display: block !important;
+}
+.reveal section .fragment {
+	opacity: 1 !important;
+	visibility: visible !important;
+
+	-webkit-transform: none !important;
+	   -moz-transform: none !important;
+	    -ms-transform: none !important;
+	        transform: none !important;
+}
+.reveal section:last-of-type {
+	page-break-after: avoid !important;
+}
+.reveal section img {
+	display: block;
+	margin: 15px 0px;
+	background: rgba(255,255,255,1);
+	border: 1px solid #666;
+	box-shadow: none;
+}

src/main/webapp/static/echarts-2.2.7/doc/slide/css/print/pdf.css

@@ -0,0 +1,176 @@
+/* Default Print Stylesheet Template
+   by Rob Glazebrook of CSSnewbie.com
+   Last Updated: June 4, 2008
+
+   Feel free (nay, compelled) to edit, append, and
+   manipulate this file as you see fit. */
+
+
+/* SECTION 1: Set default width, margin, float, and
+   background. This prevents elements from extending
+   beyond the edge of the printed page, and prevents
+   unnecessary background images from printing */
+
+* {
+	-webkit-print-color-adjust: exact;
+}
+
+body {
+	font-size: 18pt;
+	width: 297mm;
+	height: 229mm;
+	margin: 0 auto !important;
+	border: 0;
+	padding: 0;
+	float: none !important;
+	overflow: visible;
+}
+
+html {
+	width: 100%;
+	height: 100%;
+	overflow: visible;
+}
+
+@page {
+	size: letter landscape;
+	margin: 0;
+}
+
+/* SECTION 2: Remove any elements not needed in print.
+   This would include navigation, ads, sidebars, etc. */
+.nestedarrow,
+.controls,
+.reveal .progress,
+.reveal.overview,
+.fork-reveal,
+.share-reveal,
+.state-background {
+	display: none !important;
+}
+
+/* SECTION 3: Set body font face, size, and color.
+   Consider using a serif font for readability. */
+body, p, td, li, div {
+	font-size: 18pt;
+}
+
+/* SECTION 4: Set heading font face, sizes, and color.
+   Diffrentiate your headings from your body text.
+   Perhaps use a large sans-serif for distinction. */
+h1,h2,h3,h4,h5,h6 {
+	text-shadow: 0 0 0 #000 !important;
+}
+
+/* SECTION 5: Make hyperlinks more usable.
+   Ensure links are underlined, and consider appending
+   the URL to the end of the link for usability. */
+a:link,
+a:visited {
+	font-weight: bold;
+	text-decoration: underline;
+}
+
+
+/* SECTION 6: more reveal.js specific additions by @skypanther */
+ul, ol, div, p {
+	visibility: visible;
+	position: static;
+	width: auto;
+	height: auto;
+	display: block;
+	overflow: visible;
+	margin: auto;
+}
+.reveal .slides {
+	position: static;
+	width: 100%;
+	height: auto;
+
+	left: auto;
+	top: auto;
+	margin: 0 !important;
+	padding: 0 !important;
+
+	overflow: visible;
+	display: block;
+
+	text-align: center;
+
+	-webkit-perspective: none;
+	   -moz-perspective: none;
+	    -ms-perspective: none;
+	        perspective: none;
+
+	-webkit-perspective-origin: 50% 50%; /* there isn't a none/auto value but 50-50 is the default */
+	   -moz-perspective-origin: 50% 50%;
+	    -ms-perspective-origin: 50% 50%;
+	        perspective-origin: 50% 50%;
+}
+.reveal .slides section {
+
+	page-break-after: always !important;
+
+	visibility: visible !important;
+	position: relative !important;
+	width: 100% !important;
+	height: 229mm !important;
+	min-height: 229mm !important;
+	display: block !important;
+	overflow: hidden !important;
+
+	left: 0 !important;
+	top: 0 !important;
+	margin: 0 !important;
+	padding: 2cm 1cm 0 1cm !important;
+	box-sizing: border-box !important;
+
+	opacity: 1 !important;
+
+	-webkit-transform-style: flat !important;
+	   -moz-transform-style: flat !important;
+	    -ms-transform-style: flat !important;
+	        transform-style: flat !important;
+
+	-webkit-transform: none !important;
+	   -moz-transform: none !important;
+	    -ms-transform: none !important;
+	        transform: none !important;
+}
+.reveal section.stack {
+	margin: 0 !important;
+	padding: 0 !important;
+	page-break-after: avoid !important;
+	height: auto !important;
+	min-height: auto !important;
+}
+.reveal section .fragment {
+	opacity: 1 !important;
+	visibility: visible !important;
+
+	-webkit-transform: none !important;
+	   -moz-transform: none !important;
+	    -ms-transform: none !important;
+	        transform: none !important;
+}
+.reveal section .slide-background {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	z-index: 0;
+}
+.reveal section>* {
+	position: relative;
+	z-index: 1;
+}
+.reveal img {
+	box-shadow: none;
+}
+.reveal .roll {
+	overflow: visible;
+	line-height: 1em;
+}
+.reveal small a {
+	font-size: 16pt !important;
+}

src/main/webapp/static/echarts-2.2.7/doc/slide/css/theme/README.md

@@ -0,0 +1,23 @@
+## Dependencies
+
+Themes are written using Sass to keep things modular and reduce the need for repeated selectors across files. Make sure that you have the reveal.js development environment including the Grunt dependencies installed before proceding: https://github.com/hakimel/reveal.js#development-environment
+
+
+
+## Creating a Theme
+
+To create your own theme, start by duplicating any ```.scss``` file in [/css/theme/source](https://github.com/hakimel/reveal.js/blob/master/css/theme/source) and adding it to the compilation list in the [Gruntfile](https://github.com/hakimel/reveal.js/blob/master/Gruntfile.js).
+
+Each theme file does four things in the following order:
+
+1. **Include [/css/theme/template/mixins.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/mixins.scss)**
+Shared utility functions.
+
+2. **Include [/css/theme/template/settings.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/settings.scss)**
+Declares a set of custom variables that the template file (step 4) expects. Can be overridden in step 3.
+
+3. **Override**
+This is where you override the default theme. Either by specifying variables (see [settings.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/settings.scss) for reference) or by adding full selectors with hardcoded styles.
+
+4. **Include [/css/theme/template/theme.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/theme.scss)**
+The template theme file which will generate final CSS output based on the currently defined variables.

src/main/webapp/static/echarts-2.2.7/doc/slide/css/theme/beige.css

@@ -0,0 +1,142 @@
+@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
+/**
+ * Beige theme for reveal.js.
+ *
+ * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
+ */
+@font-face {
+  font-family: 'League Gothic';
+  src: url("../../lib/font/league_gothic-webfont.eot");
+  src: url("../../lib/font/league_gothic-webfont.eot?#iefix") format("embedded-opentype"), url("../../lib/font/league_gothic-webfont.woff") format("woff"), url("../../lib/font/league_gothic-webfont.ttf") format("truetype"), url("../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular") format("svg");
+  font-weight: normal;
+  font-style: normal; }
+
+/*********************************************
+ * GLOBAL STYLES
+ *********************************************/
+body {
+  background: #f7f2d3;
+  background: -moz-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
+  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, white), color-stop(100%, #f7f2d3));
+  background: -webkit-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
+  background: -o-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
+  background: -ms-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
+  background: radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
+  background-color: #f7f3de; }
+
+.reveal {
+  font-family: "Lato", sans-serif;
+  font-size: 36px;
+  font-weight: 200;
+  letter-spacing: -0.02em;
+  color: #333333; }
+
+::selection {
+  color: white;
+  background: rgba(79, 64, 28, 0.99);
+  text-shadow: none; }
+
+/*********************************************
+ * HEADERS
+ *********************************************/
+.reveal h1,
+.reveal h2,
+.reveal h3,
+.reveal h4,
+.reveal h5,
+.reveal h6 {
+  margin: 0 0 20px 0;
+  color: #333333;
+  font-family: "League Gothic", Impact, sans-serif;
+  line-height: 0.9em;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  text-shadow: none; }
+
+.reveal h1 {
+  text-shadow: 0 1px 0 #cccccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbbbbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaaaaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 20px 20px rgba(0, 0, 0, 0.15); }
+
+/*********************************************
+ * LINKS
+ *********************************************/
+.reveal a:not(.image) {
+  color: #8b743d;
+  text-decoration: none;
+  -webkit-transition: color .15s ease;
+  -moz-transition: color .15s ease;
+  -ms-transition: color .15s ease;
+  -o-transition: color .15s ease;
+  transition: color .15s ease; }
+
+.reveal a:not(.image):hover {
+  color: #c0a86e;
+  text-shadow: none;
+  border: none; }
+
+.reveal .roll span:after {
+  color: #fff;
+  background: #564826; }
+
+/*********************************************
+ * IMAGES
+ *********************************************/
+.reveal section img {
+  margin: 15px 0px;
+  background: rgba(255, 255, 255, 0.12);
+  border: 4px solid #333333;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
+  -webkit-transition: all .2s linear;
+  -moz-transition: all .2s linear;
+  -ms-transition: all .2s linear;
+  -o-transition: all .2s linear;
+  transition: all .2s linear; }
+
+.reveal a:hover img {
+  background: rgba(255, 255, 255, 0.2);
+  border-color: #8b743d;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
+
+/*********************************************
+ * NAVIGATION CONTROLS
+ *********************************************/
+.reveal .controls div.navigate-left,
+.reveal .controls div.navigate-left.enabled {
+  border-right-color: #8b743d; }
+
+.reveal .controls div.navigate-right,
+.reveal .controls div.navigate-right.enabled {
+  border-left-color: #8b743d; }
+
+.reveal .controls div.navigate-up,
+.reveal .controls div.navigate-up.enabled {
+  border-bottom-color: #8b743d; }
+
+.reveal .controls div.navigate-down,
+.reveal .controls div.navigate-down.enabled {
+  border-top-color: #8b743d; }
+
+.reveal .controls div.navigate-left.enabled:hover {
+  border-right-color: #c0a86e; }
+
+.reveal .controls div.navigate-right.enabled:hover {
+  border-left-color: #c0a86e; }
+
+.reveal .controls div.navigate-up.enabled:hover {
+  border-bottom-color: #c0a86e; }
+
+.reveal .controls div.navigate-down.enabled:hover {
+  border-top-color: #c0a86e; }
+
+/*********************************************
+ * PROGRESS BAR
+ *********************************************/
+.reveal .progress {
+  background: rgba(0, 0, 0, 0.2); }
+
+.reveal .progress span {
+  background: #8b743d;
+  -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+  -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+  -ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+  -o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+  transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }

src/main/webapp/static/echarts-2.2.7/doc/slide/css/theme/default.css

@@ -0,0 +1,144 @@
+/*
+@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
+*/
+/**
+ * Default theme for reveal.js.
+ *
+ * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
+ */
+@font-face {
+  font-family: 'League Gothic';
+  src: url("../../lib/font/league_gothic-webfont.eot");
+  src: url("../../lib/font/league_gothic-webfont.eot?#iefix") format("embedded-opentype"), url("../../lib/font/league_gothic-webfont.woff") format("woff"), url("../../lib/font/league_gothic-webfont.ttf") format("truetype"), url("../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular") format("svg");
+  font-weight: normal;
+  font-style: normal; }
+
+/*********************************************
+ * GLOBAL STYLES
+ *********************************************/
+body {
+  background: #1c1e20;
+  background: -moz-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
+  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #555a5f), color-stop(100%, #1c1e20));
+  background: -webkit-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
+  background: -o-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
+  background: -ms-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
+  background: radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
+  background-color: #2b2b2b; }
+
+.reveal {
+  font-family: "Lato", sans-serif;
+  font-size: 36px;
+  font-weight: 200;
+  letter-spacing: -0.02em;
+  color: #eeeeee; }
+
+::selection {
+  color: white;
+  background: #ff5e99;
+  text-shadow: none; }
+
+/*********************************************
+ * HEADERS
+ *********************************************/
+.reveal h1,
+.reveal h2,
+.reveal h3,
+.reveal h4,
+.reveal h5,
+.reveal h6 {
+  margin: 0 0 20px 0;
+  color: #eeeeee;
+  font-family: "League Gothic", Impact, sans-serif;
+  line-height: 0.9em;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); }
+
+.reveal h1 {
+  text-shadow: 0 1px 0 #cccccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbbbbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaaaaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 20px 20px rgba(0, 0, 0, 0.15); }
+
+/*********************************************
+ * LINKS
+ *********************************************/
+.reveal a:not(.image) {
+  color: #13daec;
+  text-decoration: none;
+  -webkit-transition: color .15s ease;
+  -moz-transition: color .15s ease;
+  -ms-transition: color .15s ease;
+  -o-transition: color .15s ease;
+  transition: color .15s ease; }
+
+.reveal a:not(.image):hover {
+  color: #71e9f4;
+  text-shadow: none;
+  border: none; }
+
+.reveal .roll span:after {
+  color: #fff;
+  background: #0d99a5; }
+
+/*********************************************
+ * IMAGES
+ *********************************************/
+.reveal section img {
+  margin: 15px 0px;
+  background: rgba(255, 255, 255, 0.12);
+  border: 4px solid #eeeeee;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
+  -webkit-transition: all .2s linear;
+  -moz-transition: all .2s linear;
+  -ms-transition: all .2s linear;
+  -o-transition: all .2s linear;
+  transition: all .2s linear; }
+
+.reveal a:hover img {
+  background: rgba(255, 255, 255, 0.2);
+  border-color: #13daec;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
+
+/*********************************************
+ * NAVIGATION CONTROLS
+ *********************************************/
+.reveal .controls div.navigate-left,
+.reveal .controls div.navigate-left.enabled {
+  border-right-color: #13daec; }
+
+.reveal .controls div.navigate-right,
+.reveal .controls div.navigate-right.enabled {
+  border-left-color: #13daec; }
+
+.reveal .controls div.navigate-up,
+.reveal .controls div.navigate-up.enabled {
+  border-bottom-color: #13daec; }
+
+.reveal .controls div.navigate-down,
+.reveal .controls div.navigate-down.enabled {
+  border-top-color: #13daec; }
+
+.reveal .controls div.navigate-left.enabled:hover {
+  border-right-color: #71e9f4; }
+
+.reveal .controls div.navigate-right.enabled:hover {
+  border-left-color: #71e9f4; }
+
+.reveal .controls div.navigate-up.enabled:hover {
+  border-bottom-color: #71e9f4; }
+
+.reveal .controls div.navigate-down.enabled:hover {
+  border-top-color: #71e9f4; }
+
+/*********************************************
+ * PROGRESS BAR
+ *********************************************/
+.reveal .progress {
+  background: rgba(0, 0, 0, 0.2); }
+
+.reveal .progress span {
+  background: #13daec;
+  -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+  -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+  -ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+  -o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+  transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }

src/main/webapp/static/echarts-2.2.7/doc/slide/css/theme/moon.css

@@ -0,0 +1,142 @@
+@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
+/**
+ * Solarized Dark theme for reveal.js.
+ * Author: Achim Staebler
+ */
+@font-face {
+  font-family: 'League Gothic';
+  src: url("../../lib/font/league_gothic-webfont.eot");
+  src: url("../../lib/font/league_gothic-webfont.eot?#iefix") format("embedded-opentype"), url("../../lib/font/league_gothic-webfont.woff") format("woff"), url("../../lib/font/league_gothic-webfont.ttf") format("truetype"), url("../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular") format("svg");
+  font-weight: normal;
+  font-style: normal; }
+
+/**
+ * Solarized colors by Ethan Schoonover
+ */
+html * {
+  color-profile: sRGB;
+  rendering-intent: auto; }
+
+/*********************************************
+ * GLOBAL STYLES
+ *********************************************/
+body {
+  background: #002b36;
+  background-color: #002b36; }
+
+.reveal {
+  font-family: "Lato", sans-serif;
+  font-size: 36px;
+  font-weight: 200;
+  letter-spacing: -0.02em;
+  color: #93a1a1; }
+
+::selection {
+  color: white;
+  background: #d33682;
+  text-shadow: none; }
+
+/*********************************************
+ * HEADERS
+ *********************************************/
+.reveal h1,
+.reveal h2,
+.reveal h3,
+.reveal h4,
+.reveal h5,
+.reveal h6 {
+  margin: 0 0 20px 0;
+  color: #eee8d5;
+  font-family: "League Gothic", Impact, sans-serif;
+  line-height: 0.9em;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  text-shadow: none; }
+
+.reveal h1 {
+  text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); }
+
+/*********************************************
+ * LINKS
+ *********************************************/
+.reveal a:not(.image) {
+  color: #268bd2;
+  text-decoration: none;
+  -webkit-transition: color .15s ease;
+  -moz-transition: color .15s ease;
+  -ms-transition: color .15s ease;
+  -o-transition: color .15s ease;
+  transition: color .15s ease; }
+
+.reveal a:not(.image):hover {
+  color: #78b9e6;
+  text-shadow: none;
+  border: none; }
+
+.reveal .roll span:after {
+  color: #fff;
+  background: #1a6091; }
+
+/*********************************************
+ * IMAGES
+ *********************************************/
+.reveal section img {
+  margin: 15px 0px;
+  background: rgba(255, 255, 255, 0.12);
+  border: 4px solid #93a1a1;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
+  -webkit-transition: all .2s linear;
+  -moz-transition: all .2s linear;
+  -ms-transition: all .2s linear;
+  -o-transition: all .2s linear;
+  transition: all .2s linear; }
+
+.reveal a:hover img {
+  background: rgba(255, 255, 255, 0.2);
+  border-color: #268bd2;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
+
+/*********************************************
+ * NAVIGATION CONTROLS
+ *********************************************/
+.reveal .controls div.navigate-left,
+.reveal .controls div.navigate-left.enabled {
+  border-right-color: #268bd2; }
+
+.reveal .controls div.navigate-right,
+.reveal .controls div.navigate-right.enabled {
+  border-left-color: #268bd2; }
+
+.reveal .controls div.navigate-up,
+.reveal .controls div.navigate-up.enabled {
+  border-bottom-color: #268bd2; }
+
+.reveal .controls div.navigate-down,
+.reveal .controls div.navigate-down.enabled {
+  border-top-color: #268bd2; }
+
+.reveal .controls div.navigate-left.enabled:hover {
+  border-right-color: #78b9e6; }
+
+.reveal .controls div.navigate-right.enabled:hover {
+  border-left-color: #78b9e6; }
+
+.reveal .controls div.navigate-up.enabled:hover {
+  border-bottom-color: #78b9e6; }
+
+.reveal .controls div.navigate-down.enabled:hover {
+  border-top-color: #78b9e6; }
+
+/*********************************************
+ * PROGRESS BAR
+ *********************************************/
+.reveal .progress {
+  background: rgba(0, 0, 0, 0.2); }
+
+.reveal .progress span {
+  background: #268bd2;
+  -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+  -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+  -ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+  -o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+  transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }

src/main/webapp/static/echarts-2.2.7/doc/slide/css/theme/night.css

@@ -0,0 +1,130 @@
+@import url(https://fonts.googleapis.com/css?family=Montserrat:700);
+@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic);
+/**
+ * Black theme for reveal.js.
+ *
+ * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
+ */
+/*********************************************
+ * GLOBAL STYLES
+ *********************************************/
+body {
+  background: #111111;
+  background-color: #111111; }
+
+.reveal {
+  font-family: "Open Sans", sans-serif;
+  font-size: 30px;
+  font-weight: 200;
+  letter-spacing: -0.02em;
+  color: #eeeeee; }
+
+::selection {
+  color: white;
+  background: #e7ad52;
+  text-shadow: none; }
+
+/*********************************************
+ * HEADERS
+ *********************************************/
+.reveal h1,
+.reveal h2,
+.reveal h3,
+.reveal h4,
+.reveal h5,
+.reveal h6 {
+  margin: 0 0 20px 0;
+  color: #eeeeee;
+  font-family: "Montserrat", Impact, sans-serif;
+  line-height: 0.9em;
+  letter-spacing: -0.03em;
+  text-transform: none;
+  text-shadow: none; }
+
+.reveal h1 {
+  text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); }
+
+/*********************************************
+ * LINKS
+ *********************************************/
+.reveal a:not(.image) {
+  color: #e7ad52;
+  text-decoration: none;
+  -webkit-transition: color .15s ease;
+  -moz-transition: color .15s ease;
+  -ms-transition: color .15s ease;
+  -o-transition: color .15s ease;
+  transition: color .15s ease; }
+
+.reveal a:not(.image):hover {
+  color: #f3d7ac;
+  text-shadow: none;
+  border: none; }
+
+.reveal .roll span:after {
+  color: #fff;
+  background: #d08a1d; }
+
+/*********************************************
+ * IMAGES
+ *********************************************/
+.reveal section img {
+  margin: 15px 0px;
+  background: rgba(255, 255, 255, 0.12);
+  border: 4px solid #eeeeee;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
+  -webkit-transition: all .2s linear;
+  -moz-transition: all .2s linear;
+  -ms-transition: all .2s linear;
+  -o-transition: all .2s linear;
+  transition: all .2s linear; }
+
+.reveal a:hover img {
+  background: rgba(255, 255, 255, 0.2);
+  border-color: #e7ad52;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
+
+/*********************************************
+ * NAVIGATION CONTROLS
+ *********************************************/
+.reveal .controls div.navigate-left,
+.reveal .controls div.navigate-left.enabled {
+  border-right-color: #e7ad52; }
+
+.reveal .controls div.navigate-right,
+.reveal .controls div.navigate-right.enabled {
+  border-left-color: #e7ad52; }
+
+.reveal .controls div.navigate-up,
+.reveal .controls div.navigate-up.enabled {
+  border-bottom-color: #e7ad52; }
+
+.reveal .controls div.navigate-down,
+.reveal .controls div.navigate-down.enabled {
+  border-top-color: #e7ad52; }
+
+.reveal .controls div.navigate-left.enabled:hover {
+  border-right-color: #f3d7ac; }
+
+.reveal .controls div.navigate-right.enabled:hover {
+  border-left-color: #f3d7ac; }
+
+.reveal .controls div.navigate-up.enabled:hover {
+  border-bottom-color: #f3d7ac; }
+
+.reveal .controls div.navigate-down.enabled:hover {
+  border-top-color: #f3d7ac; }
+
+/*********************************************
+ * PROGRESS BAR
+ *********************************************/
+.reveal .progress {
+  background: rgba(0, 0, 0, 0.2); }
+
+.reveal .progress span {
+  background: #e7ad52;
+  -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+  -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+  -ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+  -o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+  transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }

src/main/webapp/static/echarts-2.2.7/doc/slide/css/theme/serif.css

@@ -0,0 +1,132 @@
+/**
+ * A simple theme for reveal.js presentations, similar
+ * to the default theme. The accent color is brown.
+ *
+ * This theme is Copyright (C) 2012-2013 Owen Versteeg, http://owenversteeg.com - it is MIT licensed.
+ */
+.reveal a:not(.image) {
+  line-height: 1.3em; }
+
+/*********************************************
+ * GLOBAL STYLES
+ *********************************************/
+body {
+  background: #f0f1eb;
+  background-color: #f0f1eb; }
+
+.reveal {
+  font-family: "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif;
+  font-size: 36px;
+  font-weight: 200;
+  letter-spacing: -0.02em;
+  color: black; }
+
+::selection {
+  color: white;
+  background: #26351c;
+  text-shadow: none; }
+
+/*********************************************
+ * HEADERS
+ *********************************************/
+.reveal h1,
+.reveal h2,
+.reveal h3,
+.reveal h4,
+.reveal h5,
+.reveal h6 {
+  margin: 0 0 20px 0;
+  color: #383d3d;
+  font-family: "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif;
+  line-height: 0.9em;
+  letter-spacing: 0.02em;
+  text-transform: none;
+  text-shadow: none; }
+
+.reveal h1 {
+  text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); }
+
+/*********************************************
+ * LINKS
+ *********************************************/
+.reveal a:not(.image) {
+  color: #51483d;
+  text-decoration: none;
+  -webkit-transition: color .15s ease;
+  -moz-transition: color .15s ease;
+  -ms-transition: color .15s ease;
+  -o-transition: color .15s ease;
+  transition: color .15s ease; }
+
+.reveal a:not(.image):hover {
+  color: #8b7c69;
+  text-shadow: none;
+  border: none; }
+
+.reveal .roll span:after {
+  color: #fff;
+  background: #25211c; }
+
+/*********************************************
+ * IMAGES
+ *********************************************/
+.reveal section img {
+  margin: 15px 0px;
+  background: rgba(255, 255, 255, 0.12);
+  border: 4px solid black;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
+  -webkit-transition: all .2s linear;
+  -moz-transition: all .2s linear;
+  -ms-transition: all .2s linear;
+  -o-transition: all .2s linear;
+  transition: all .2s linear; }
+
+.reveal a:hover img {
+  background: rgba(255, 255, 255, 0.2);
+  border-color: #51483d;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
+
+/*********************************************
+ * NAVIGATION CONTROLS
+ *********************************************/
+.reveal .controls div.navigate-left,
+.reveal .controls div.navigate-left.enabled {
+  border-right-color: #51483d; }
+
+.reveal .controls div.navigate-right,
+.reveal .controls div.navigate-right.enabled {
+  border-left-color: #51483d; }
+
+.reveal .controls div.navigate-up,
+.reveal .controls div.navigate-up.enabled {
+  border-bottom-color: #51483d; }
+
+.reveal .controls div.navigate-down,
+.reveal .controls div.navigate-down.enabled {
+  border-top-color: #51483d; }
+
+.reveal .controls div.navigate-left.enabled:hover {
+  border-right-color: #8b7c69; }
+
+.reveal .controls div.navigate-right.enabled:hover {
+  border-left-color: #8b7c69; }
+
+.reveal .controls div.navigate-up.enabled:hover {
+  border-bottom-color: #8b7c69; }
+
+.reveal .controls div.navigate-down.enabled:hover {
+  border-top-color: #8b7c69; }
+
+/*********************************************
+ * PROGRESS BAR
+ *********************************************/
+.reveal .progress {
+  background: rgba(0, 0, 0, 0.2); }
+
+.reveal .progress span {
+  background: #51483d;
+  -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+  -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+  -ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+  -o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+  transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }

src/main/webapp/static/echarts-2.2.7/doc/slide/css/theme/simple.css

@@ -0,0 +1,132 @@
+@import url(https://fonts.googleapis.com/css?family=News+Cycle:400,700);
+@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
+/**
+ * A simple theme for reveal.js presentations, similar
+ * to the default theme. The accent color is darkblue.
+ *
+ * This theme is Copyright (C) 2012 Owen Versteeg, https://github.com/StereotypicalApps. It is MIT licensed.
+ * reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
+ */
+/*********************************************
+ * GLOBAL STYLES
+ *********************************************/
+body {
+  background: white;
+  background-color: white; }
+
+.reveal {
+  font-family: "Lato", sans-serif;
+  font-size: 36px;
+  font-weight: 200;
+  letter-spacing: -0.02em;
+  color: black; }
+
+::selection {
+  color: white;
+  background: rgba(0, 0, 0, 0.99);
+  text-shadow: none; }
+
+/*********************************************
+ * HEADERS
+ *********************************************/
+.reveal h1,
+.reveal h2,
+.reveal h3,
+.reveal h4,
+.reveal h5,
+.reveal h6 {
+  margin: 0 0 20px 0;
+  color: black;
+  font-family: "News Cycle", Impact, sans-serif;
+  line-height: 0.9em;
+  letter-spacing: 0.02em;
+  text-transform: none;
+  text-shadow: none; }
+
+.reveal h1 {
+  text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); }
+
+/*********************************************
+ * LINKS
+ *********************************************/
+.reveal a:not(.image) {
+  color: darkblue;
+  text-decoration: none;
+  -webkit-transition: color .15s ease;
+  -moz-transition: color .15s ease;
+  -ms-transition: color .15s ease;
+  -o-transition: color .15s ease;
+  transition: color .15s ease; }
+
+.reveal a:not(.image):hover {
+  color: #0000f1;
+  text-shadow: none;
+  border: none; }
+
+.reveal .roll span:after {
+  color: #fff;
+  background: #00003f; }
+
+/*********************************************
+ * IMAGES
+ *********************************************/
+.reveal section img {
+  margin: 15px 0px;
+  background: rgba(255, 255, 255, 0.12);
+  border: 4px solid black;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
+  -webkit-transition: all .2s linear;
+  -moz-transition: all .2s linear;
+  -ms-transition: all .2s linear;
+  -o-transition: all .2s linear;
+  transition: all .2s linear; }
+
+.reveal a:hover img {
+  background: rgba(255, 255, 255, 0.2);
+  border-color: darkblue;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
+
+/*********************************************
+ * NAVIGATION CONTROLS
+ *********************************************/
+.reveal .controls div.navigate-left,
+.reveal .controls div.navigate-left.enabled {
+  border-right-color: darkblue; }
+
+.reveal .controls div.navigate-right,
+.reveal .controls div.navigate-right.enabled {
+  border-left-color: darkblue; }
+
+.reveal .controls div.navigate-up,
+.reveal .controls div.navigate-up.enabled {
+  border-bottom-color: darkblue; }
+
+.reveal .controls div.navigate-down,
+.reveal .controls div.navigate-down.enabled {
+  border-top-color: darkblue; }
+
+.reveal .controls div.navigate-left.enabled:hover {
+  border-right-color: #0000f1; }
+
+.reveal .controls div.navigate-right.enabled:hover {
+  border-left-color: #0000f1; }
+
+.reveal .controls div.navigate-up.enabled:hover {
+  border-bottom-color: #0000f1; }
+
+.reveal .controls div.navigate-down.enabled:hover {
+  border-top-color: #0000f1; }
+
+/*********************************************
+ * PROGRESS BAR
+ *********************************************/
+.reveal .progress {
+  background: rgba(0, 0, 0, 0.2); }
+
+.reveal .progress span {
+  background: darkblue;
+  -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+  -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+  -ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+  -o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+  transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }

src/main/webapp/static/echarts-2.2.7/doc/slide/css/theme/sky.css

@@ -0,0 +1,139 @@
+@import url(https://fonts.googleapis.com/css?family=Quicksand:400,700,400italic,700italic);
+@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700);
+/**
+ * Sky theme for reveal.js.
+ *
+ * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
+ */
+.reveal a:not(.image) {
+  line-height: 1.3em; }
+
+/*********************************************
+ * GLOBAL STYLES
+ *********************************************/
+body {
+  background: #add9e4;
+  background: -moz-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
+  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #f7fbfc), color-stop(100%, #add9e4));
+  background: -webkit-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
+  background: -o-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
+  background: -ms-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
+  background: radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
+  background-color: #f7fbfc; }
+
+.reveal {
+  font-family: "Open Sans", sans-serif;
+  font-size: 36px;
+  font-weight: 200;
+  letter-spacing: -0.02em;
+  color: #333333; }
+
+::selection {
+  color: white;
+  background: #134674;
+  text-shadow: none; }
+
+/*********************************************
+ * HEADERS
+ *********************************************/
+.reveal h1,
+.reveal h2,
+.reveal h3,
+.reveal h4,
+.reveal h5,
+.reveal h6 {
+  margin: 0 0 20px 0;
+  color: #333333;
+  font-family: "Quicksand", sans-serif;
+  line-height: 0.9em;
+  letter-spacing: -0.08em;
+  text-transform: uppercase;
+  text-shadow: none; }
+
+.reveal h1 {
+  text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); }
+
+/*********************************************
+ * LINKS
+ *********************************************/
+.reveal a:not(.image) {
+  color: #3b759e;
+  text-decoration: none;
+  -webkit-transition: color .15s ease;
+  -moz-transition: color .15s ease;
+  -ms-transition: color .15s ease;
+  -o-transition: color .15s ease;
+  transition: color .15s ease; }
+
+.reveal a:not(.image):hover {
+  color: #74a7cb;
+  text-shadow: none;
+  border: none; }
+
+.reveal .roll span:after {
+  color: #fff;
+  background: #264c66; }
+
+/*********************************************
+ * IMAGES
+ *********************************************/
+.reveal section img {
+  margin: 15px 0px;
+  background: rgba(255, 255, 255, 0.12);
+  border: 4px solid #333333;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
+  -webkit-transition: all .2s linear;
+  -moz-transition: all .2s linear;
+  -ms-transition: all .2s linear;
+  -o-transition: all .2s linear;
+  transition: all .2s linear; }
+
+.reveal a:hover img {
+  background: rgba(255, 255, 255, 0.2);
+  border-color: #3b759e;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
+
+/*********************************************
+ * NAVIGATION CONTROLS
+ *********************************************/
+.reveal .controls div.navigate-left,
+.reveal .controls div.navigate-left.enabled {
+  border-right-color: #3b759e; }
+
+.reveal .controls div.navigate-right,
+.reveal .controls div.navigate-right.enabled {
+  border-left-color: #3b759e; }
+
+.reveal .controls div.navigate-up,
+.reveal .controls div.navigate-up.enabled {
+  border-bottom-color: #3b759e; }
+
+.reveal .controls div.navigate-down,
+.reveal .controls div.navigate-down.enabled {
+  border-top-color: #3b759e; }
+
+.reveal .controls div.navigate-left.enabled:hover {
+  border-right-color: #74a7cb; }
+
+.reveal .controls div.navigate-right.enabled:hover {
+  border-left-color: #74a7cb; }
+
+.reveal .controls div.navigate-up.enabled:hover {
+  border-bottom-color: #74a7cb; }
+
+.reveal .controls div.navigate-down.enabled:hover {
+  border-top-color: #74a7cb; }
+
+/*********************************************
+ * PROGRESS BAR
+ *********************************************/
+.reveal .progress {
+  background: rgba(0, 0, 0, 0.2); }
+
+.reveal .progress span {
+  background: #3b759e;
+  -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+  -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+  -ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+  -o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+  transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }

src/main/webapp/static/echarts-2.2.7/doc/slide/css/theme/solarized.css

@@ -0,0 +1,142 @@
+@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
+/**
+ * Solarized Light theme for reveal.js.
+ * Author: Achim Staebler
+ */
+@font-face {
+  font-family: 'League Gothic';
+  src: url("../../lib/font/league_gothic-webfont.eot");
+  src: url("../../lib/font/league_gothic-webfont.eot?#iefix") format("embedded-opentype"), url("../../lib/font/league_gothic-webfont.woff") format("woff"), url("../../lib/font/league_gothic-webfont.ttf") format("truetype"), url("../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular") format("svg");
+  font-weight: normal;
+  font-style: normal; }
+
+/**
+ * Solarized colors by Ethan Schoonover
+ */
+html * {
+  color-profile: sRGB;
+  rendering-intent: auto; }
+
+/*********************************************
+ * GLOBAL STYLES
+ *********************************************/
+body {
+  background: #fdf6e3;
+  background-color: #fdf6e3; }
+
+.reveal {
+  font-family: "Lato", sans-serif;
+  font-size: 36px;
+  font-weight: 200;
+  letter-spacing: -0.02em;
+  color: #657b83; }
+
+::selection {
+  color: white;
+  background: #d33682;
+  text-shadow: none; }
+
+/*********************************************
+ * HEADERS
+ *********************************************/
+.reveal h1,
+.reveal h2,
+.reveal h3,
+.reveal h4,
+.reveal h5,
+.reveal h6 {
+  margin: 0 0 20px 0;
+  color: #586e75;
+  font-family: "League Gothic", Impact, sans-serif;
+  line-height: 0.9em;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  text-shadow: none; }
+
+.reveal h1 {
+  text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); }
+
+/*********************************************
+ * LINKS
+ *********************************************/
+.reveal a:not(.image) {
+  color: #268bd2;
+  text-decoration: none;
+  -webkit-transition: color .15s ease;
+  -moz-transition: color .15s ease;
+  -ms-transition: color .15s ease;
+  -o-transition: color .15s ease;
+  transition: color .15s ease; }
+
+.reveal a:not(.image):hover {
+  color: #78b9e6;
+  text-shadow: none;
+  border: none; }
+
+.reveal .roll span:after {
+  color: #fff;
+  background: #1a6091; }
+
+/*********************************************
+ * IMAGES
+ *********************************************/
+.reveal section img {
+  margin: 15px 0px;
+  background: rgba(255, 255, 255, 0.12);
+  border: 4px solid #657b83;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
+  -webkit-transition: all .2s linear;
+  -moz-transition: all .2s linear;
+  -ms-transition: all .2s linear;
+  -o-transition: all .2s linear;
+  transition: all .2s linear; }
+
+.reveal a:hover img {
+  background: rgba(255, 255, 255, 0.2);
+  border-color: #268bd2;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
+
+/*********************************************
+ * NAVIGATION CONTROLS
+ *********************************************/
+.reveal .controls div.navigate-left,
+.reveal .controls div.navigate-left.enabled {
+  border-right-color: #268bd2; }
+
+.reveal .controls div.navigate-right,
+.reveal .controls div.navigate-right.enabled {
+  border-left-color: #268bd2; }
+
+.reveal .controls div.navigate-up,
+.reveal .controls div.navigate-up.enabled {
+  border-bottom-color: #268bd2; }
+
+.reveal .controls div.navigate-down,
+.reveal .controls div.navigate-down.enabled {
+  border-top-color: #268bd2; }
+
+.reveal .controls div.navigate-left.enabled:hover {
+  border-right-color: #78b9e6; }
+
+.reveal .controls div.navigate-right.enabled:hover {
+  border-left-color: #78b9e6; }
+
+.reveal .controls div.navigate-up.enabled:hover {
+  border-bottom-color: #78b9e6; }
+
+.reveal .controls div.navigate-down.enabled:hover {
+  border-top-color: #78b9e6; }
+
+/*********************************************
+ * PROGRESS BAR
+ *********************************************/
+.reveal .progress {
+  background: rgba(0, 0, 0, 0.2); }
+
+.reveal .progress span {
+  background: #268bd2;
+  -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+  -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+  -ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+  -o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+  transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }

src/main/webapp/static/echarts-2.2.7/doc/slide/css/theme/source/beige.scss

@@ -0,0 +1,50 @@
+/**
+ * Beige theme for reveal.js.
+ *
+ * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
+ */
+
+
+// Default mixins and settings -----------------
+@import "../template/mixins";
+@import "../template/settings";
+// ---------------------------------------------
+
+
+
+// Include theme-specific fonts
+@font-face {
+	font-family: 'League Gothic';
+	src: url('../../lib/font/league_gothic-webfont.eot');
+	src: url('../../lib/font/league_gothic-webfont.eot?#iefix') format('embedded-opentype'),
+		 url('../../lib/font/league_gothic-webfont.woff') format('woff'),
+		 url('../../lib/font/league_gothic-webfont.ttf') format('truetype'),
+		 url('../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular') format('svg');
+
+	font-weight: normal;
+	font-style: normal;
+}
+
+@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
+
+
+// Override theme settings (see ../template/settings.scss)
+$mainColor: #333;
+$headingColor: #333;
+$headingTextShadow: none;
+$backgroundColor: #f7f3de;
+$linkColor: #8b743d;
+$linkColorHover: lighten( $linkColor, 20% );
+$selectionBackgroundColor: rgba(79, 64, 28, 0.99);
+$heading1TextShadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15);
+
+// Background generator
+@mixin bodyBackground() {
+	@include radial-gradient( rgba(247,242,211,1), rgba(255,255,255,1) );
+}
+
+
+
+// Theme template ------------------------------
+@import "../template/theme";
+// ---------------------------------------------

src/main/webapp/static/echarts-2.2.7/doc/slide/css/theme/source/default.scss

@@ -0,0 +1,42 @@
+/**
+ * Default theme for reveal.js.
+ *
+ * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
+ */
+
+
+// Default mixins and settings -----------------
+@import "../template/mixins";
+@import "../template/settings";
+// ---------------------------------------------
+
+
+
+// Include theme-specific fonts
+@font-face {
+	font-family: 'League Gothic';
+	src: url('../../lib/font/league_gothic-webfont.eot');
+	src: url('../../lib/font/league_gothic-webfont.eot?#iefix') format('embedded-opentype'),
+		 url('../../lib/font/league_gothic-webfont.woff') format('woff'),
+		 url('../../lib/font/league_gothic-webfont.ttf') format('truetype'),
+		 url('../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular') format('svg');
+
+	font-weight: normal;
+	font-style: normal;
+}
+
+@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
+
+// Override theme settings (see ../template/settings.scss)
+$heading1TextShadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15);
+
+// Background generator
+@mixin bodyBackground() {
+	@include radial-gradient( rgba(28,30,32,1), rgba(85,90,95,1) );
+}
+
+
+
+// Theme template ------------------------------
+@import "../template/theme";
+// ---------------------------------------------

src/main/webapp/static/echarts-2.2.7/doc/slide/css/theme/source/moon.scss

@@ -0,0 +1,68 @@
+/**
+ * Solarized Dark theme for reveal.js.
+ * Author: Achim Staebler
+ */
+
+
+// Default mixins and settings -----------------
+@import "../template/mixins";
+@import "../template/settings";
+// ---------------------------------------------
+
+
+
+// Include theme-specific fonts
+@font-face {
+	font-family: 'League Gothic';
+	src: url('../../lib/font/league_gothic-webfont.eot');
+	src: url('../../lib/font/league_gothic-webfont.eot?#iefix') format('embedded-opentype'),
+		 url('../../lib/font/league_gothic-webfont.woff') format('woff'),
+		 url('../../lib/font/league_gothic-webfont.ttf') format('truetype'),
+		 url('../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular') format('svg');
+
+	font-weight: normal;
+	font-style: normal;
+}
+
+@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
+
+/**
+ * Solarized colors by Ethan Schoonover
+ */
+html * {
+	color-profile: sRGB;
+	rendering-intent: auto;
+}
+
+// Solarized colors
+$base03:    #002b36;
+$base02:    #073642;
+$base01:    #586e75;
+$base00:    #657b83;
+$base0:     #839496;
+$base1:     #93a1a1;
+$base2:     #eee8d5;
+$base3:     #fdf6e3;
+$yellow:    #b58900;
+$orange:    #cb4b16;
+$red:       #dc322f;
+$magenta:   #d33682;
+$violet:    #6c71c4;
+$blue:      #268bd2;
+$cyan:      #2aa198;
+$green:     #859900;
+
+// Override theme settings (see ../template/settings.scss)
+$mainColor: $base1;
+$headingColor: $base2;
+$headingTextShadow: none;
+$backgroundColor: $base03;
+$linkColor: $blue;
+$linkColorHover: lighten( $linkColor, 20% );
+$selectionBackgroundColor: $magenta;
+
+
+
+// Theme template ------------------------------
+@import "../template/theme";
+// ---------------------------------------------

src/main/webapp/static/echarts-2.2.7/doc/slide/css/theme/source/night.scss

@@ -0,0 +1,35 @@
+/**
+ * Black theme for reveal.js.
+ *
+ * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
+ */
+
+
+// Default mixins and settings -----------------
+@import "../template/mixins";
+@import "../template/settings";
+// ---------------------------------------------
+
+
+// Include theme-specific fonts
+@import url(https://fonts.googleapis.com/css?family=Montserrat:700);
+@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic);
+
+
+// Override theme settings (see ../template/settings.scss)
+$backgroundColor: #111;
+
+$mainFont: 'Open Sans', sans-serif;
+$linkColor: #e7ad52;
+$linkColorHover: lighten( $linkColor, 20% );
+$headingFont: 'Montserrat', Impact, sans-serif;
+$headingTextShadow: none;
+$headingLetterSpacing: -0.03em;
+$headingTextTransform: none;
+$selectionBackgroundColor: #e7ad52;
+$mainFontSize: 30px;
+
+
+// Theme template ------------------------------
+@import "../template/theme";
+// ---------------------------------------------

src/main/webapp/static/echarts-2.2.7/doc/slide/css/theme/source/serif.scss

@@ -0,0 +1,35 @@
+/**
+ * A simple theme for reveal.js presentations, similar
+ * to the default theme. The accent color is brown.
+ *
+ * This theme is Copyright (C) 2012-2013 Owen Versteeg, http://owenversteeg.com - it is MIT licensed.
+ */
+
+
+// Default mixins and settings -----------------
+@import "../template/mixins";
+@import "../template/settings";
+// ---------------------------------------------
+
+
+
+// Override theme settings (see ../template/settings.scss)
+$mainFont: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif;
+$mainColor: #000;
+$headingFont: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif;
+$headingColor: #383D3D;
+$headingTextShadow: none;
+$headingTextTransform: none;
+$backgroundColor: #F0F1EB;
+$linkColor: #51483D;
+$linkColorHover: lighten( $linkColor, 20% );
+$selectionBackgroundColor: #26351C;
+
+.reveal a:not(.image) {
+  line-height: 1.3em;
+}
+
+
+// Theme template ------------------------------
+@import "../template/theme";
+// ---------------------------------------------

src/main/webapp/static/echarts-2.2.7/doc/slide/css/theme/source/simple.scss

@@ -0,0 +1,38 @@
+/**
+ * A simple theme for reveal.js presentations, similar
+ * to the default theme. The accent color is darkblue.
+ *
+ * This theme is Copyright (C) 2012 Owen Versteeg, https://github.com/StereotypicalApps. It is MIT licensed.
+ * reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
+ */
+
+
+// Default mixins and settings -----------------
+@import "../template/mixins";
+@import "../template/settings";
+// ---------------------------------------------
+
+
+
+// Include theme-specific fonts
+@import url(https://fonts.googleapis.com/css?family=News+Cycle:400,700);
+@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
+
+
+// Override theme settings (see ../template/settings.scss)
+$mainFont: 'Lato', sans-serif;
+$mainColor: #000;
+$headingFont: 'News Cycle', Impact, sans-serif;
+$headingColor: #000;
+$headingTextShadow: none;
+$headingTextTransform: none;
+$backgroundColor: #fff;
+$linkColor: #00008B;
+$linkColorHover: lighten( $linkColor, 20% );
+$selectionBackgroundColor: rgba(0, 0, 0, 0.99);
+
+
+
+// Theme template ------------------------------
+@import "../template/theme";
+// ---------------------------------------------

src/main/webapp/static/echarts-2.2.7/doc/slide/css/theme/source/sky.scss

@@ -0,0 +1,46 @@
+/**
+ * Sky theme for reveal.js.
+ *
+ * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
+ */
+
+
+// Default mixins and settings -----------------
+@import "../template/mixins";
+@import "../template/settings";
+// ---------------------------------------------
+
+
+
+// Include theme-specific fonts
+@import url(https://fonts.googleapis.com/css?family=Quicksand:400,700,400italic,700italic);
+@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700);
+
+
+// Override theme settings (see ../template/settings.scss)
+$mainFont: 'Open Sans', sans-serif;
+$mainColor: #333;
+$headingFont: 'Quicksand', sans-serif;
+$headingColor: #333;
+$headingLetterSpacing: -0.08em;
+$headingTextShadow: none;
+$backgroundColor: #f7fbfc;
+$linkColor: #3b759e;
+$linkColorHover: lighten( $linkColor, 20% );
+$selectionBackgroundColor: #134674;
+
+// Fix links so they are not cut off
+.reveal a:not(.image) {
+	line-height: 1.3em;
+}
+
+// Background generator
+@mixin bodyBackground() {
+	@include radial-gradient( #add9e4, #f7fbfc );
+}
+
+
+
+// Theme template ------------------------------
+@import "../template/theme";
+// ---------------------------------------------

src/main/webapp/static/echarts-2.2.7/doc/slide/css/theme/source/solarized.scss

@@ -0,0 +1,74 @@
+/**
+ * Solarized Light theme for reveal.js.
+ * Author: Achim Staebler
+ */
+
+
+// Default mixins and settings -----------------
+@import "../template/mixins";
+@import "../template/settings";
+// ---------------------------------------------
+
+
+
+// Include theme-specific fonts
+@font-face {
+	font-family: 'League Gothic';
+	src: url('../../lib/font/league_gothic-webfont.eot');
+	src: url('../../lib/font/league_gothic-webfont.eot?#iefix') format('embedded-opentype'),
+		 url('../../lib/font/league_gothic-webfont.woff') format('woff'),
+		 url('../../lib/font/league_gothic-webfont.ttf') format('truetype'),
+		 url('../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular') format('svg');
+
+	font-weight: normal;
+	font-style: normal;
+}
+
+@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
+
+
+/**
+ * Solarized colors by Ethan Schoonover
+ */
+html * {
+	color-profile: sRGB;
+	rendering-intent: auto;
+}
+
+// Solarized colors
+$base03:    #002b36;
+$base02:    #073642;
+$base01:    #586e75;
+$base00:    #657b83;
+$base0:     #839496;
+$base1:     #93a1a1;
+$base2:     #eee8d5;
+$base3:     #fdf6e3;
+$yellow:    #b58900;
+$orange:    #cb4b16;
+$red:       #dc322f;
+$magenta:   #d33682;
+$violet:    #6c71c4;
+$blue:      #268bd2;
+$cyan:      #2aa198;
+$green:     #859900;
+
+// Override theme settings (see ../template/settings.scss)
+$mainColor: $base00;
+$headingColor: $base01;
+$headingTextShadow: none;
+$backgroundColor: $base3;
+$linkColor: $blue;
+$linkColorHover: lighten( $linkColor, 20% );
+$selectionBackgroundColor: $magenta;
+
+// Background generator
+// @mixin bodyBackground() {
+// 	@include radial-gradient( rgba($base3,1), rgba(lighten($base3, 20%),1) );
+// }
+
+
+
+// Theme template ------------------------------
+@import "../template/theme";
+// ---------------------------------------------

src/main/webapp/static/echarts-2.2.7/doc/slide/css/theme/template/mixins.scss

@@ -0,0 +1,29 @@
+@mixin vertical-gradient( $top, $bottom ) {
+	background: $top;
+	background: -moz-linear-gradient( top, $top 0%, $bottom 100% );
+	background: -webkit-gradient( linear, left top, left bottom, color-stop(0%,$top), color-stop(100%,$bottom) );
+	background: -webkit-linear-gradient( top, $top 0%, $bottom 100% );
+	background: -o-linear-gradient( top, $top 0%, $bottom 100% );
+	background: -ms-linear-gradient( top, $top 0%, $bottom 100% );
+	background: linear-gradient( top, $top 0%, $bottom 100% );
+}
+
+@mixin horizontal-gradient( $top, $bottom ) {
+	background: $top;
+	background: -moz-linear-gradient( left, $top 0%, $bottom 100% );
+	background: -webkit-gradient( linear, left top, right top, color-stop(0%,$top), color-stop(100%,$bottom) );
+	background: -webkit-linear-gradient( left, $top 0%, $bottom 100% );
+	background: -o-linear-gradient( left, $top 0%, $bottom 100% );
+	background: -ms-linear-gradient( left, $top 0%, $bottom 100% );
+	background: linear-gradient( left, $top 0%, $bottom 100% );
+}
+
+@mixin radial-gradient( $outer, $inner, $type: circle ) {
+	background: $outer;
+	background: -moz-radial-gradient( center, $type cover,  $inner 0%, $outer 100% );
+	background: -webkit-gradient( radial, center center, 0px, center center, 100%, color-stop(0%,$inner), color-stop(100%,$outer) );
+	background: -webkit-radial-gradient( center, $type cover,  $inner 0%, $outer 100% );
+	background: -o-radial-gradient( center, $type cover,  $inner 0%, $outer 100% );
+	background: -ms-radial-gradient( center, $type cover,  $inner 0%, $outer 100% );
+	background: radial-gradient( center, $type cover,  $inner 0%, $outer 100% );
+}

src/main/webapp/static/echarts-2.2.7/doc/slide/css/theme/template/settings.scss

@@ -0,0 +1,33 @@
+// Base settings for all themes that can optionally be
+// overridden by the super-theme
+
+// Background of the presentation
+$backgroundColor: #2b2b2b;
+
+// Primary/body text
+$mainFont: 'Lato', sans-serif;
+$mainFontSize: 36px;
+$mainColor: #eee;
+
+// Headings
+$headingFont: 'League Gothic', Impact, sans-serif;
+$headingColor: #eee;
+$headingLineHeight: 0.9em;
+$headingLetterSpacing: 0.02em;
+$headingTextTransform: uppercase;
+$headingTextShadow: 0px 0px 6px rgba(0,0,0,0.2);
+$heading1TextShadow: $headingTextShadow;
+
+// Links and actions
+$linkColor: #13DAEC;
+$linkColorHover: lighten( $linkColor, 20% );
+
+// Text selection
+$selectionBackgroundColor: #FF5E99;
+$selectionColor: #fff;
+
+// Generates the presentation background, can be overridden
+// to return a background image or gradient
+@mixin bodyBackground() {
+	background: $backgroundColor;
+}

src/main/webapp/static/echarts-2.2.7/doc/slide/css/theme/template/theme.scss

@@ -0,0 +1,163 @@
+// Base theme template for reveal.js
+
+/*********************************************
+ * GLOBAL STYLES
+ *********************************************/
+
+body {
+	@include bodyBackground();
+	background-color: $backgroundColor;
+}
+
+.reveal {
+	font-family: $mainFont;
+	font-size: $mainFontSize;
+	font-weight: 200;
+	letter-spacing: -0.02em;
+	color: $mainColor;
+}
+
+::selection {
+	color: $selectionColor;
+	background: $selectionBackgroundColor;
+	text-shadow: none;
+}
+
+/*********************************************
+ * HEADERS
+ *********************************************/
+
+.reveal h1,
+.reveal h2,
+.reveal h3,
+.reveal h4,
+.reveal h5,
+.reveal h6 {
+	margin: 0 0 20px 0;
+	color: $headingColor;
+
+	font-family: $headingFont;
+	line-height: $headingLineHeight;
+	letter-spacing: $headingLetterSpacing;
+
+	text-transform: $headingTextTransform;
+	text-shadow: $headingTextShadow;
+}
+
+.reveal h1 {
+	text-shadow: $heading1TextShadow;
+}
+
+
+/*********************************************
+ * LINKS
+ *********************************************/
+
+.reveal a:not(.image) {
+	color: $linkColor;
+	text-decoration: none;
+
+	-webkit-transition: color .15s ease;
+	   -moz-transition: color .15s ease;
+	    -ms-transition: color .15s ease;
+	     -o-transition: color .15s ease;
+	        transition: color .15s ease;
+}
+	.reveal a:not(.image):hover {
+		color: $linkColorHover;
+
+		text-shadow: none;
+		border: none;
+	}
+
+.reveal .roll span:after {
+	color: #fff;
+	background: darken( $linkColor, 15% );
+}
+
+
+/*********************************************
+ * IMAGES
+ *********************************************/
+
+.reveal section img {
+	margin: 15px 0px;
+	background: rgba(255,255,255,0.12);
+	border: 4px solid $mainColor;
+
+	box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
+
+	-webkit-transition: all .2s linear;
+	   -moz-transition: all .2s linear;
+	    -ms-transition: all .2s linear;
+	     -o-transition: all .2s linear;
+	        transition: all .2s linear;
+}
+
+	.reveal a:hover img {
+		background: rgba(255,255,255,0.2);
+		border-color: $linkColor;
+
+		box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
+	}
+
+
+/*********************************************
+ * NAVIGATION CONTROLS
+ *********************************************/
+
+.reveal .controls div.navigate-left,
+.reveal .controls div.navigate-left.enabled {
+	border-right-color: $linkColor;
+}
+
+.reveal .controls div.navigate-right,
+.reveal .controls div.navigate-right.enabled {
+	border-left-color: $linkColor;
+}
+
+.reveal .controls div.navigate-up,
+.reveal .controls div.navigate-up.enabled {
+	border-bottom-color: $linkColor;
+}
+
+.reveal .controls div.navigate-down,
+.reveal .controls div.navigate-down.enabled {
+	border-top-color: $linkColor;
+}
+
+.reveal .controls div.navigate-left.enabled:hover {
+	border-right-color: $linkColorHover;
+}
+
+.reveal .controls div.navigate-right.enabled:hover {
+	border-left-color: $linkColorHover;
+}
+
+.reveal .controls div.navigate-up.enabled:hover {
+	border-bottom-color: $linkColorHover;
+}
+
+.reveal .controls div.navigate-down.enabled:hover {
+	border-top-color: $linkColorHover;
+}
+
+
+/*********************************************
+ * PROGRESS BAR
+ *********************************************/
+
+.reveal .progress {
+	background: rgba(0,0,0,0.2);
+}
+	.reveal .progress span {
+		background: $linkColor;
+
+		-webkit-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+		   -moz-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+		    -ms-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+		     -o-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+		        transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+	}
+
+

src/main/webapp/static/echarts-2.2.7/doc/slide/css/why-echarts-m.css

@@ -0,0 +1,58 @@
+* { margin: 0; padding: 0;}
+body { font: 1.5em "Microsoft Yahei",verdana;}
+
+.page {
+    z-index: 100;
+    position: fixed;
+    bottom: 0;
+    height: 40px;
+    width: 100%;
+    line-height: 30px;
+    text-align: center;
+    color: #666;
+    border-top: 1px solid #ccc;
+    padding-top:2px;
+    font-size:0.51em;
+}
+.page .page-down-center {
+    /*width: 100%;*/
+}
+.page .page-up, .page .page-down {
+    width: 48%;
+    height: 35px;
+    margin-top:4px;
+    display: inline-block;
+    -webkit-tap-highlight-color: #fff;
+}
+.page .disabled {
+    color: #ccc;
+}
+
+#content {
+    position: relative;
+    overflow: hidden;
+}
+.fragment {
+    padding:10px;
+    text-align: left;
+}
+p.fragment a {
+    line-height: 20px;
+    margin-right: 5px;
+    text-decoration: none;
+}
+.section {
+    position: absolute; overflow: hidden; text-align:center;
+    left:100%; top:0; z-index: 10; margin-top: 10px; font-size:0.51em;
+    transition: left 0.5s; 
+}
+.section table {
+    width:95%;
+}
+.main {
+    width: 96%;
+    margin-left:2%;
+}
+@media (orientation : portrait) {
+    
+}

src/main/webapp/static/echarts-2.2.7/doc/slide/lib/css/zenburn.css

@@ -0,0 +1,115 @@
+/*
+
+Zenburn style from voldmar.ru (c) Vladimir Epifanov <voldmar@voldmar.ru>
+based on dark.css by Ivan Sagalaev
+
+*/
+
+pre code {
+  display: block; padding: 0.5em;
+  background: #3F3F3F;
+  color: #DCDCDC;
+}
+
+pre .keyword,
+pre .tag,
+pre .django .tag,
+pre .django .keyword,
+pre .css .class,
+pre .css .id,
+pre .lisp .title {
+  color: #E3CEAB;
+}
+
+pre .django .template_tag,
+pre .django .variable,
+pre .django .filter .argument {
+  color: #DCDCDC;
+}
+
+pre .number,
+pre .date {
+  color: #8CD0D3;
+}
+
+pre .dos .envvar,
+pre .dos .stream,
+pre .variable,
+pre .apache .sqbracket {
+  color: #EFDCBC;
+}
+
+pre .dos .flow,
+pre .diff .change,
+pre .python .exception,
+pre .python .built_in,
+pre .literal,
+pre .tex .special {
+  color: #EFEFAF;
+}
+
+pre .diff .chunk,
+pre .ruby .subst {
+  color: #8F8F8F;
+}
+
+pre .dos .keyword,
+pre .python .decorator,
+pre .class .title,
+pre .haskell .label,
+pre .function .title,
+pre .ini .title,
+pre .diff .header,
+pre .ruby .class .parent,
+pre .apache .tag,
+pre .nginx .built_in,
+pre .tex .command,
+pre .input_number {
+    color: #efef8f;
+}
+
+pre .dos .winutils,
+pre .ruby .symbol,
+pre .ruby .symbol .string,
+pre .ruby .symbol .keyword,
+pre .ruby .symbol .keymethods,
+pre .ruby .string,
+pre .ruby .instancevar {
+  color: #DCA3A3;
+}
+
+pre .diff .deletion,
+pre .string,
+pre .tag .value,
+pre .preprocessor,
+pre .built_in,
+pre .sql .aggregate,
+pre .javadoc,
+pre .smalltalk .class,
+pre .smalltalk .localvars,
+pre .smalltalk .array,
+pre .css .rules .value,
+pre .attr_selector,
+pre .pseudo,
+pre .apache .cbracket,
+pre .tex .formula {
+  color: #CC9393;
+}
+
+pre .shebang,
+pre .diff .addition,
+pre .comment,
+pre .java .annotation,
+pre .template_comment,
+pre .pi,
+pre .doctype {
+  color: #7F9F7F;
+}
+
+pre .xml .css,
+pre .xml .javascript,
+pre .xml .vbscript,
+pre .tex .formula {
+  opacity: 0.5;
+}
+

src/main/webapp/static/echarts-2.2.7/doc/slide/lib/font/league_gothic_license

@@ -0,0 +1,2 @@
+SIL Open Font License (OFL)
+http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL

src/main/webapp/static/echarts-2.2.7/doc/slide/lib/js/html5shiv.js

@@ -0,0 +1,7 @@
+document.createElement('header');
+document.createElement('nav');
+document.createElement('section');
+document.createElement('article');
+document.createElement('aside');
+document.createElement('footer');
+document.createElement('hgroup');

src/main/webapp/static/echarts-2.2.7/doc/slide/plugin/markdown/example.html

@@ -0,0 +1,97 @@
+<!doctype html>
+<html lang="en">
+
+	<head>
+		<meta charset="utf-8">
+
+		<title>reveal.js - Markdown Demo</title>
+
+		<link rel="stylesheet" href="../../css/reveal.css">
+		<link rel="stylesheet" href="../../css/theme/default.css" id="theme">
+	</head>
+
+	<body>
+
+		<div class="reveal">
+
+			<div class="slides">
+
+                <!-- Use external markdown resource, and separate slides by three newlines; vertical slides by two newlines -->
+                <section data-markdown="example.md" data-separator="^\n\n\n" data-vertical="^\n\n"></section>
+
+                <!-- Slides are separated by three dashes (quick 'n dirty regular expression) -->
+                <section data-markdown data-separator="---">
+                    <script type="text/template">
+                        ## Demo 1
+                        Slide 1
+                        ---
+                        ## Demo 1
+                        Slide 2
+                        ---
+                        ## Demo 1
+                        Slide 3
+                    </script>
+                </section>
+
+                <!-- Slides are separated by newline + three dashes + newline, vertical slides identical but two dashes -->
+                <section data-markdown data-separator="^\n---\n$" data-vertical="^\n--\n$">
+                    <script type="text/template">
+                        ## Demo 2
+                        Slide 1.1
+
+                        --
+
+                        ## Demo 2
+                        Slide 1.2
+
+                        ---
+
+                        ## Demo 2
+                        Slide 2
+                    </script>
+                </section>
+
+                <!-- No "extra" slides, since there are no separators defined (so they'll become horizontal rulers) -->
+                <section data-markdown>
+                    <script type="text/template">
+                        A
+
+                        ---
+
+                        B
+
+                        ---
+
+                        C
+                    </script>
+                </section>
+
+            </div>
+		</div>
+
+		<script src="../../lib/js/head.min.js"></script>
+		<script src="../../js/reveal.js"></script>
+
+		<script>
+
+			Reveal.initialize({
+				controls: true,
+				progress: true,
+				history: true,
+				center: true,
+
+				theme: Reveal.getQueryHash().theme,
+				transition: Reveal.getQueryHash().transition || 'default',
+
+				// Optional libraries used to extend on reveal.js
+				dependencies: [
+					{ src: '../../lib/js/classList.js', condition: function() { return !document.body.classList; } },
+					{ src: 'marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
+					{ src: 'markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }
+				]
+			});
+
+		</script>
+
+	</body>
+</html>

src/main/webapp/static/echarts-2.2.7/doc/slide/plugin/markdown/example.md

@@ -0,0 +1,29 @@
+# Markdown Demo
+
+
+
+## External 1.1
+
+Content 1.1
+
+
+## External 1.2
+
+Content 1.2
+
+
+
+## External 2
+
+Content 2.1
+
+
+
+## External 3.1
+
+Content 3.1
+
+
+## External 3.2
+
+Content 3.2

src/main/webapp/static/echarts-2.2.7/doc/slide/plugin/markdown/markdown.js

@@ -0,0 +1,190 @@
+// From https://gist.github.com/1343518
+// Modified by Hakim to handle Markdown indented with tabs
+(function(){
+
+    if( typeof marked === 'undefined' ) {
+        throw 'The reveal.js Markdown plugin requires marked to be loaded';
+    }
+
+    var stripLeadingWhitespace = function(section) {
+
+        var template = section.querySelector( 'script' );
+
+        // strip leading whitespace so it isn't evaluated as code
+        var text = ( template || section ).textContent;
+
+        var leadingWs = text.match(/^\n?(\s*)/)[1].length,
+            leadingTabs = text.match(/^\n?(\t*)/)[1].length;
+
+        if( leadingTabs > 0 ) {
+            text = text.replace( new RegExp('\\n?\\t{' + leadingTabs + '}','g'), '\n' );
+        }
+        else if( leadingWs > 1 ) {
+            text = text.replace( new RegExp('\\n? {' + leadingWs + '}','g'), '\n' );
+        }
+
+        return text;
+
+    };
+
+    var twrap = function(el) {
+      return '<script type="text/template">' + el + '</script>';
+    };
+
+    var getForwardedAttributes = function(section) {
+        var attributes = section.attributes;
+        var result = [];
+
+        for( var i = 0, len = attributes.length; i < len; i++ ) {
+            var name = attributes[i].name,
+                value = attributes[i].value;
+
+            // disregard attributes that are used for markdown loading/parsing
+            if( /data\-(markdown|separator|vertical)/gi.test( name ) ) continue;
+
+            if( value ) {
+                result.push( name + '=' + value );
+            }
+            else {
+                result.push( name );
+            }
+        }
+
+        return result.join( ' ' );
+    }
+
+    var slidifyMarkdown = function(markdown, separator, vertical, attributes) {
+
+        separator = separator || '^\n---\n$';
+
+        var reSeparator = new RegExp(separator + (vertical ? '|' + vertical : ''), 'mg'),
+            reHorSeparator = new RegExp(separator),
+            matches,
+            lastIndex = 0,
+            isHorizontal,
+            wasHorizontal = true,
+            content,
+            sectionStack = [],
+            markdownSections = '';
+
+        // iterate until all blocks between separators are stacked up
+        while( matches = reSeparator.exec(markdown) ) {
+
+            // determine direction (horizontal by default)
+            isHorizontal = reHorSeparator.test(matches[0]);
+
+            if( !isHorizontal && wasHorizontal ) {
+                // create vertical stack
+                sectionStack.push([]);
+            }
+
+            // pluck slide content from markdown input
+            content = markdown.substring(lastIndex, matches.index);
+
+            if( isHorizontal && wasHorizontal ) {
+                // add to horizontal stack
+                sectionStack.push(content);
+            } else {
+                // add to vertical stack
+                sectionStack[sectionStack.length-1].push(content);
+            }
+
+            lastIndex = reSeparator.lastIndex;
+            wasHorizontal = isHorizontal;
+
+        }
+
+        // add the remaining slide
+        (wasHorizontal ? sectionStack : sectionStack[sectionStack.length-1]).push(markdown.substring(lastIndex));
+
+        // flatten the hierarchical stack, and insert <section data-markdown> tags
+        for( var k = 0, klen = sectionStack.length; k < klen; k++ ) {
+            // horizontal
+            if( typeof sectionStack[k] === 'string' ) {
+                markdownSections += '<section '+ attributes +' data-markdown>' +  twrap( sectionStack[k] )  + '</section>';
+            }
+            // vertical
+            else {
+                markdownSections += '<section '+ attributes +'>' +
+                                        '<section data-markdown>' +  sectionStack[k].map(twrap).join('</section><section data-markdown>') + '</section>' +
+                                    '</section>';
+            }
+        }
+
+        return markdownSections;
+    };
+
+    var querySlidingMarkdown = function() {
+
+        var sections = document.querySelectorAll( '[data-markdown]'),
+            section;
+
+        for( var j = 0, jlen = sections.length; j < jlen; j++ ) {
+
+            section = sections[j];
+
+            if( section.getAttribute('data-markdown').length ) {
+
+                var xhr = new XMLHttpRequest(),
+                    url = section.getAttribute('data-markdown');
+
+                xhr.onreadystatechange = function () {
+                    if( xhr.readyState === 4 ) {
+                        if (xhr.status >= 200 && xhr.status < 300) {
+                            section.outerHTML = slidifyMarkdown( xhr.responseText, section.getAttribute('data-separator'), section.getAttribute('data-vertical'), getForwardedAttributes(section) );
+                        } else {
+                            section.outerHTML = '<section data-state="alert">ERROR: The attempt to fetch ' + url + ' failed with the HTTP status ' + xhr.status +
+                                '. Check your browser\'s JavaScript console for more details.' +
+                                '<p>Remember that you need to serve the presentation HTML from a HTTP server and the Markdown file must be there too.</p></section>';
+                        }
+                    }
+                };
+
+                xhr.open('GET', url, false);
+                try {
+                    xhr.send();
+                } catch (e) {
+                    alert('Failed to get the Markdown file ' + url + '. Make sure that the presentation and the file are served by a HTTP server and the file can be found there. ' + e);
+                }
+
+            } else if( section.getAttribute('data-separator') ) {
+
+                var markdown = stripLeadingWhitespace(section);
+                section.outerHTML = slidifyMarkdown( markdown, section.getAttribute('data-separator'), section.getAttribute('data-vertical'), getForwardedAttributes(section) );
+
+            }
+        }
+
+    };
+
+    var queryMarkdownSlides = function() {
+
+        var sections = document.querySelectorAll( '[data-markdown]');
+
+        for( var j = 0, jlen = sections.length; j < jlen; j++ ) {
+
+            makeHtml(sections[j]);
+
+        }
+
+    };
+
+    var makeHtml = function(section) {
+
+        var notes = section.querySelector( 'aside.notes' );
+
+        var markdown = stripLeadingWhitespace(section);
+
+        section.innerHTML = marked(markdown);
+
+        if( notes ) {
+            section.appendChild( notes );
+        }
+
+    };
+
+    querySlidingMarkdown();
+
+    queryMarkdownSlides();
+
+})();

src/main/webapp/static/echarts-2.2.7/doc/slide/plugin/multiplex/client.js

@@ -0,0 +1,13 @@
+(function() {
+	var multiplex = Reveal.getConfig().multiplex;
+	var socketId = multiplex.id;
+	var socket = io.connect(multiplex.url);
+
+	socket.on(multiplex.id, function(data) {
+		// ignore data from sockets that aren't ours
+		if (data.socketId !== socketId) { return; }
+		if( window.location.host === 'localhost:1947' ) return;
+
+		Reveal.slide(data.indexh, data.indexv, data.indexf, 'remote');
+	});
+}());

src/main/webapp/static/echarts-2.2.7/doc/slide/plugin/multiplex/index.js

@@ -0,0 +1,56 @@
+var express		= require('express');
+var fs			= require('fs');
+var io			= require('socket.io');
+var crypto		= require('crypto');
+
+var app			= express.createServer();
+var staticDir	= express.static;
+
+io				= io.listen(app);
+
+var opts = {
+	port: 1948,
+	baseDir : __dirname + '/../../'
+};
+
+io.sockets.on('connection', function(socket) {
+	socket.on('slidechanged', function(slideData) {
+		if (typeof slideData.secret == 'undefined' || slideData.secret == null || slideData.secret === '') return;
+		if (createHash(slideData.secret) === slideData.socketId) {
+			slideData.secret = null;
+			socket.broadcast.emit(slideData.socketId, slideData);
+		};
+	});
+});
+
+app.configure(function() {
+	[ 'css', 'js', 'plugin', 'lib' ].forEach(function(dir) {
+		app.use('/' + dir, staticDir(opts.baseDir + dir));
+	});
+});
+
+app.get("/", function(req, res) {
+	res.writeHead(200, {'Content-Type': 'text/html'});
+	fs.createReadStream(opts.baseDir + '/index.html').pipe(res);
+});
+
+app.get("/token", function(req,res) {
+	var ts = new Date().getTime();
+	var rand = Math.floor(Math.random()*9999999);
+	var secret = ts.toString() + rand.toString();
+	res.send({secret: secret, socketId: createHash(secret)});
+});
+
+var createHash = function(secret) {
+	var cipher = crypto.createCipher('blowfish', secret);
+	return(cipher.final('hex'));
+};
+
+// Actually listen
+app.listen(opts.port || null);
+
+var brown = '\033[33m',
+	green = '\033[32m',
+	reset = '\033[0m';
+
+console.log( brown + "reveal.js:" + reset + " Multiplex running on port " + green + opts.port + reset );

src/main/webapp/static/echarts-2.2.7/doc/slide/plugin/multiplex/master.js

@@ -0,0 +1,50 @@
+(function() {
+	// don't emit events from inside the previews themselves
+	if ( window.location.search.match( /receiver/gi ) ) { return; }
+	var multiplex = Reveal.getConfig().multiplex;
+
+	var socket = io.connect(multiplex.url);
+
+	var notify = function( slideElement, indexh, indexv, origin ) {
+		if( typeof origin === 'undefined' && origin !== 'remote' ) {
+			var nextindexh;
+			var nextindexv;
+
+			var fragmentindex = Reveal.getIndices().f;
+			if (typeof fragmentindex == 'undefined') {
+				fragmentindex = 0;
+			}
+
+			if (slideElement.nextElementSibling && slideElement.parentNode.nodeName == 'SECTION') {
+				nextindexh = indexh;
+				nextindexv = indexv + 1;
+			} else {
+				nextindexh = indexh + 1;
+				nextindexv = 0;
+			}
+
+			var slideData = {
+				indexh : indexh,
+				indexv : indexv,
+				indexf : fragmentindex,
+				nextindexh : nextindexh,
+				nextindexv : nextindexv,
+				secret: multiplex.secret,
+				socketId : multiplex.id
+			};
+
+			socket.emit('slidechanged', slideData);
+		}
+	}
+
+	Reveal.addEventListener( 'slidechanged', function( event ) {
+		notify( event.currentSlide, event.indexh, event.indexv, event.origin );
+	} );
+
+	var fragmentNotify = function( event ) {
+		notify( Reveal.getCurrentSlide(), Reveal.getIndices().h, Reveal.getIndices().v, event.origin );
+	};
+
+	Reveal.addEventListener( 'fragmentshown', fragmentNotify );
+	Reveal.addEventListener( 'fragmenthidden', fragmentNotify );
+}());

src/main/webapp/static/echarts-2.2.7/doc/slide/plugin/notes-server/client.js

@@ -0,0 +1,57 @@
+(function() {
+	// don't emit events from inside the previews themselves
+	if ( window.location.search.match( /receiver/gi ) ) { return; }
+
+	var socket = io.connect(window.location.origin);
+	var socketId = Math.random().toString().slice(2);
+	
+	console.log('View slide notes at ' + window.location.origin + '/notes/' + socketId);
+	window.open(window.location.origin + '/notes/' + socketId, 'notes-' + socketId);
+
+	// Fires when a fragment is shown
+	Reveal.addEventListener( 'fragmentshown', function( event ) {
+		var fragmentData = {
+			fragment : 'next',
+			socketId : socketId
+		};
+		socket.emit('fragmentchanged', fragmentData);
+	} );
+
+	// Fires when a fragment is hidden
+	Reveal.addEventListener( 'fragmenthidden', function( event ) {
+		var fragmentData = {
+			fragment : 'previous',
+			socketId : socketId
+		};
+		socket.emit('fragmentchanged', fragmentData);
+	} );
+
+	// Fires when slide is changed
+	Reveal.addEventListener( 'slidechanged', function( event ) {
+		var nextindexh;
+		var nextindexv;
+		var slideElement = event.currentSlide;
+
+		if (slideElement.nextElementSibling && slideElement.parentNode.nodeName == 'SECTION') {
+			nextindexh = event.indexh;
+			nextindexv = event.indexv + 1;
+		} else {
+			nextindexh = event.indexh + 1;
+			nextindexv = 0;
+		}
+
+		var notes = slideElement.querySelector('aside.notes');
+		var slideData = {
+			notes : notes ? notes.innerHTML : '',
+			indexh : event.indexh,
+			indexv : event.indexv,
+			nextindexh : nextindexh,
+			nextindexv : nextindexv,
+			socketId : socketId,
+			markdown : notes ? typeof notes.getAttribute('data-markdown') === 'string' : false
+
+		};
+
+		socket.emit('slidechanged', slideData);
+	} );
+}());

src/main/webapp/static/echarts-2.2.7/doc/slide/plugin/notes-server/index.js

@@ -0,0 +1,59 @@
+var express   = require('express');
+var fs        = require('fs');
+var io        = require('socket.io');
+var _         = require('underscore');
+var Mustache  = require('mustache');
+
+var app       = express.createServer();
+var staticDir = express.static;
+
+io            = io.listen(app);
+
+var opts = {
+	port :      1947,
+	baseDir :   __dirname + '/../../'
+};
+
+io.sockets.on('connection', function(socket) {
+	socket.on('slidechanged', function(slideData) {
+		socket.broadcast.emit('slidedata', slideData);
+	});
+	socket.on('fragmentchanged', function(fragmentData) {
+		socket.broadcast.emit('fragmentdata', fragmentData);
+	});
+});
+
+app.configure(function() {
+	[ 'css', 'js', 'images', 'plugin', 'lib' ].forEach(function(dir) {
+		app.use('/' + dir, staticDir(opts.baseDir + dir));
+	});
+});
+
+app.get("/", function(req, res) {
+	res.writeHead(200, {'Content-Type': 'text/html'});
+	fs.createReadStream(opts.baseDir + '/index.html').pipe(res);
+});
+
+app.get("/notes/:socketId", function(req, res) {
+
+	fs.readFile(opts.baseDir + 'plugin/notes-server/notes.html', function(err, data) {
+		res.send(Mustache.to_html(data.toString(), {
+			socketId : req.params.socketId
+		}));
+	});
+	// fs.createReadStream(opts.baseDir + 'notes-server/notes.html').pipe(res);
+});
+
+// Actually listen
+app.listen(opts.port || null);
+
+var brown = '\033[33m',
+	green = '\033[32m',
+	reset = '\033[0m';
+
+var slidesLocation = "http://localhost" + ( opts.port ? ( ':' + opts.port ) : '' );
+
+console.log( brown + "reveal.js - Speaker Notes" + reset );
+console.log( "1. Open the slides at " + green + slidesLocation + reset );
+console.log( "2. Click on the link your JS console to go to the notes page" );
+console.log( "3. Advance through your slides and your notes will advance automatically" );

src/main/webapp/static/echarts-2.2.7/doc/slide/plugin/notes-server/notes.html

@@ -0,0 +1,142 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+
+		<meta name="viewport" content="width=1150">
+
+		<title>reveal.js - Slide Notes</title>
+
+		<style>
+			body {
+				font-family: Helvetica;
+			}
+
+			#notes {
+				font-size: 24px;
+				width: 640px;
+				margin-top: 5px;
+				clear: left;
+			}
+
+			#wrap-current-slide {
+				width: 640px;
+				height: 512px;
+				float: left;
+				overflow: hidden;
+			}
+
+			#current-slide {
+				width: 1280px;
+				height: 1024px;
+				border: none;
+
+				-webkit-transform-origin: 0 0;
+				   -moz-transform-origin: 0 0;
+				    -ms-transform-origin: 0 0;
+				     -o-transform-origin: 0 0;
+				        transform-origin: 0 0;
+
+				-webkit-transform: scale(0.5);
+				   -moz-transform: scale(0.5);
+				    -ms-transform: scale(0.5);
+				     -o-transform: scale(0.5);
+				        transform: scale(0.5);
+			}
+
+			#wrap-next-slide {
+				width: 448px;
+				height: 358px;
+				float: left;
+				margin: 0 0 0 10px;
+				overflow: hidden;
+			}
+
+			#next-slide {
+				width: 1280px;
+				height: 1024px;
+				border: none;
+
+				-webkit-transform-origin: 0 0;
+				   -moz-transform-origin: 0 0;
+				    -ms-transform-origin: 0 0;
+				     -o-transform-origin: 0 0;
+				        transform-origin: 0 0;
+
+				-webkit-transform: scale(0.35);
+				   -moz-transform: scale(0.35);
+				    -ms-transform: scale(0.35);
+				     -o-transform: scale(0.35);
+				        transform: scale(0.35);
+			}
+
+			.slides {
+				position: relative;
+				margin-bottom: 10px;
+				border: 1px solid black;
+				border-radius: 2px;
+				background: rgb(28, 30, 32);
+			}
+
+			.slides span {
+				position: absolute;
+				top: 3px;
+				left: 3px;
+				font-weight: bold;
+				font-size: 14px;
+				color: rgba( 255, 255, 255, 0.9 );
+			}
+		</style>
+	</head>
+
+	<body>
+
+		<div id="wrap-current-slide" class="slides">
+			<iframe src="/?receiver" width="1280" height="1024" id="current-slide"></iframe>
+		</div>
+
+		<div id="wrap-next-slide" class="slides">
+			<iframe src="/?receiver" width="640" height="512" id="next-slide"></iframe>
+			<span>UPCOMING:</span>
+		</div>
+		<div id="notes"></div>
+
+		<script src="/socket.io/socket.io.js"></script>
+		<script src="/plugin/markdown/marked.js"></script>
+
+		<script>
+		var socketId = '{{socketId}}';
+		var socket = io.connect(window.location.origin);
+		var notes = document.getElementById('notes');
+		var currentSlide = document.getElementById('current-slide');
+		var nextSlide = document.getElementById('next-slide');
+
+		socket.on('slidedata', function(data) {
+			// ignore data from sockets that aren't ours
+			if (data.socketId !== socketId) { return; }
+
+			if (data.markdown) {
+				notes.innerHTML = marked(data.notes);
+			}
+			else {
+				notes.innerHTML = data.notes;
+			}
+
+			currentSlide.contentWindow.Reveal.slide(data.indexh, data.indexv);
+			nextSlide.contentWindow.Reveal.slide(data.nextindexh, data.nextindexv);
+		});
+		socket.on('fragmentdata', function(data) {
+			// ignore data from sockets that aren't ours
+			if (data.socketId !== socketId) { return; }
+
+			if (data.fragment === 'next') {
+				currentSlide.contentWindow.Reveal.nextFragment();
+			}
+			else if (data.fragment === 'previous') {
+				currentSlide.contentWindow.Reveal.prevFragment();
+			}
+		});
+		</script>
+
+	</body>
+</html>

src/main/webapp/static/echarts-2.2.7/doc/slide/plugin/notes/notes.html

@@ -0,0 +1,253 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+
+		<title>reveal.js - Slide Notes</title>
+
+		<style>
+			body {
+				font-family: Helvetica;
+			}
+
+			#notes {
+				font-size: 24px;
+				width: 640px;
+				margin-top: 5px;
+				clear: left;
+			}
+
+			#wrap-current-slide {
+				width: 640px;
+				height: 512px;
+				float: left;
+				overflow: hidden;
+			}
+
+			#current-slide {
+				width: 1280px;
+				height: 1024px;
+				border: none;
+
+				-webkit-transform-origin: 0 0;
+				   -moz-transform-origin: 0 0;
+					-ms-transform-origin: 0 0;
+					 -o-transform-origin: 0 0;
+						transform-origin: 0 0;
+
+				-webkit-transform: scale(0.5);
+				   -moz-transform: scale(0.5);
+					-ms-transform: scale(0.5);
+					 -o-transform: scale(0.5);
+						transform: scale(0.5);
+			}
+
+			#wrap-next-slide {
+				width: 448px;
+				height: 358px;
+				float: left;
+				margin: 0 0 0 10px;
+				overflow: hidden;
+			}
+
+			#next-slide {
+				width: 1280px;
+				height: 1024px;
+				border: none;
+
+				-webkit-transform-origin: 0 0;
+				   -moz-transform-origin: 0 0;
+					-ms-transform-origin: 0 0;
+					 -o-transform-origin: 0 0;
+						transform-origin: 0 0;
+
+				-webkit-transform: scale(0.35);
+				   -moz-transform: scale(0.35);
+					-ms-transform: scale(0.35);
+					 -o-transform: scale(0.35);
+						transform: scale(0.35);
+			}
+
+			.slides {
+				position: relative;
+				margin-bottom: 10px;
+				border: 1px solid black;
+				border-radius: 2px;
+				background: rgb(28, 30, 32);
+			}
+
+			.slides span {
+				position: absolute;
+				top: 3px;
+				left: 3px;
+				font-weight: bold;
+				font-size: 14px;
+				color: rgba( 255, 255, 255, 0.9 );
+			}
+
+			.error {
+				font-weight: bold;
+				color: red;
+				font-size: 1.5em;
+				text-align: center;
+				margin-top: 10%;
+			}
+
+			.error code {
+				font-family: monospace;
+			}
+
+			.time {
+				width: 448px;
+				margin: 30px 0 0 10px;
+				float: left;
+				text-align: center;
+				opacity: 0;
+
+				-webkit-transition: opacity 0.4s;
+				   -moz-transition: opacity 0.4s;
+				     -o-transition: opacity 0.4s;
+				        transition: opacity 0.4s;
+			}
+
+			.elapsed,
+			.clock {
+				color: #333;
+				font-size: 2em;
+				text-align: center;
+				display: inline-block;
+				padding: 0.5em;
+				background-color: #eee;
+				border-radius: 10px;
+			}
+
+			.elapsed h2,
+			.clock h2 {
+				font-size: 0.8em;
+				line-height: 100%;
+				margin: 0;
+				color: #aaa;
+			}
+
+			.elapsed .mute {
+				color: #ddd;
+			}
+
+		</style>
+	</head>
+
+	<body>
+
+		<div id="wrap-current-slide" class="slides">
+			<script>document.write( '<iframe width="1280" height="1024" id="current-slide" src="'+ window.opener.location.href +'"></iframe>' );</script>
+		</div>
+
+		<div id="wrap-next-slide" class="slides">
+			<script>document.write( '<iframe width="640" height="512" id="next-slide" src="'+ window.opener.location.href +'"></iframe>' );</script>
+			<span>UPCOMING:</span>
+		</div>
+
+		<div class="time">
+			<div class="clock">
+				<h2>Time</h2>
+				<span id="clock">0:00:00 AM</span>
+			</div>
+			<div class="elapsed">
+				<h2>Elapsed</h2>
+				<span id="hours">00</span><span id="minutes">:00</span><span id="seconds">:00</span>
+			</div>
+		</div>
+
+		<div id="notes"></div>
+
+		<script src="../../plugin/markdown/marked.js"></script>
+		<script>
+
+			window.addEventListener( 'load', function() {
+
+				if( window.opener && window.opener.location && window.opener.location.href ) {
+
+					var notes = document.getElementById( 'notes' ),
+						currentSlide = document.getElementById( 'current-slide' ),
+						nextSlide = document.getElementById( 'next-slide' );
+
+					window.addEventListener( 'message', function( event ) {
+						var data = JSON.parse( event.data );
+						// No need for updating the notes in case of fragment changes
+						if ( data.notes !== undefined) {
+							if( data.markdown ) {
+								notes.innerHTML = marked( data.notes );
+							}
+							else {
+								notes.innerHTML = data.notes;
+							}
+						}
+
+						// Showing and hiding fragments
+						if( data.fragment === 'next' ) {
+							currentSlide.contentWindow.Reveal.nextFragment();
+						}
+						else if( data.fragment === 'prev' ) {
+							currentSlide.contentWindow.Reveal.prevFragment();
+						}
+						else {
+							// Update the note slides
+							currentSlide.contentWindow.Reveal.slide( data.indexh, data.indexv );
+							nextSlide.contentWindow.Reveal.slide( data.nextindexh, data.nextindexv );
+						}
+
+					}, false );
+
+					var start = new Date(),
+						timeEl = document.querySelector( '.time' ),
+						clockEl = document.getElementById( 'clock' ),
+						hoursEl = document.getElementById( 'hours' ),
+						minutesEl = document.getElementById( 'minutes' ),
+						secondsEl = document.getElementById( 'seconds' );
+
+					setInterval( function() {
+
+						timeEl.style.opacity = 1;
+
+						var diff, hours, minutes, seconds,
+							now = new Date();
+
+						diff = now.getTime() - start.getTime();
+						hours = Math.floor( diff / ( 1000 * 60 * 60 ) );
+						minutes = Math.floor( ( diff / ( 1000 * 60 ) ) % 60 );
+						seconds = Math.floor( ( diff / 1000 ) % 60 );
+
+						clockEl.innerHTML = now.toLocaleTimeString();
+						hoursEl.innerHTML = zeroPadInteger( hours );
+						hoursEl.className = hours > 0 ? "" : "mute";
+						minutesEl.innerHTML = ":" + zeroPadInteger( minutes );
+						minutesEl.className = minutes > 0 ? "" : "mute";
+						secondsEl.innerHTML = ":" + zeroPadInteger( seconds );
+
+					}, 1000 );
+
+					// Navigate the main window when the notes slide changes
+					currentSlide.contentWindow.Reveal.addEventListener( 'slidechanged', function( event ) {
+
+						window.opener.Reveal.slide( event.indexh, event.indexv );
+
+					} );
+
+				}
+				else {
+
+					document.body.innerHTML =  '<p class="error">Unable to access <code>window.opener.location</code>.<br>Make sure the presentation is running on a web server.</p>';
+
+				}
+
+
+			}, false );
+
+			function zeroPadInteger( num ) {
+				var str = "00" + parseInt( num );
+				return str.substring( str.length - 2 );
+			}
+
+		</script>
+	</body>
+</html>

src/main/webapp/static/echarts-2.2.7/doc/slide/plugin/notes/notes.js

@@ -0,0 +1,100 @@
+/**
+ * Handles opening of and synchronization with the reveal.js
+ * notes window.
+ */
+var RevealNotes = (function() {
+
+	function openNotes() {
+		var jsFileLocation = document.querySelector('script[src$="notes.js"]').src;  // this js file path
+		jsFileLocation = jsFileLocation.replace(/notes\.js(\?.*)?$/, '');   // the js folder path
+		var notesPopup = window.open( jsFileLocation + 'notes.html', 'reveal.js - Notes', 'width=1120,height=850' );
+
+		// Fires when slide is changed
+		Reveal.addEventListener( 'slidechanged', function( event ) {
+			post('slidechanged');
+		} );
+
+		// Fires when a fragment is shown
+		Reveal.addEventListener( 'fragmentshown', function( event ) {
+			post('fragmentshown');
+		} );
+
+		// Fires when a fragment is hidden
+		Reveal.addEventListener( 'fragmenthidden', function( event ) {
+			post('fragmenthidden');
+		} );
+
+		/**
+		 * Posts the current slide data to the notes window
+		 *
+		 * @param {String} eventType Expecting 'slidechanged', 'fragmentshown' 
+		 * or 'fragmenthidden' set in the events above to define the needed 
+		 * slideDate.
+		 */
+		function post( eventType ) {
+			var slideElement = Reveal.getCurrentSlide(),
+				messageData;
+
+			if( eventType === 'slidechanged' ) {
+				var notes = slideElement.querySelector( 'aside.notes' ),
+					indexh = Reveal.getIndices().h,
+					indexv = Reveal.getIndices().v,
+					nextindexh,
+					nextindexv;
+
+				if( slideElement.nextElementSibling && slideElement.parentNode.nodeName == 'SECTION' ) {
+					nextindexh = indexh;
+					nextindexv = indexv + 1;
+				} else {
+					nextindexh = indexh + 1;
+					nextindexv = 0;
+				}
+
+				messageData = {
+					notes : notes ? notes.innerHTML : '',
+					indexh : indexh,
+					indexv : indexv,
+					nextindexh : nextindexh,
+					nextindexv : nextindexv,
+					markdown : notes ? typeof notes.getAttribute( 'data-markdown' ) === 'string' : false
+				};
+			}
+			else if( eventType === 'fragmentshown' ) {
+				messageData = {
+					fragment : 'next'
+				};
+			}
+			else if( eventType === 'fragmenthidden' ) {
+				messageData = {
+					fragment : 'prev'
+				};
+			}
+
+			notesPopup.postMessage( JSON.stringify( messageData ), '*' );
+		}
+
+		// Navigate to the current slide when the notes are loaded
+		notesPopup.addEventListener( 'load', function( event ) {
+			post('slidechanged');
+		}, false );
+	}
+
+	// If the there's a 'notes' query set, open directly
+	if( window.location.search.match( /(\?|\&)notes/gi ) !== null ) {
+		openNotes();
+	}
+
+	// Open the notes when the 's' key is hit
+	document.addEventListener( 'keydown', function( event ) {
+		// Disregard the event if the target is editable or a
+		// modifier is present
+		if ( document.querySelector( ':focus' ) !== null || event.shiftKey || event.altKey || event.ctrlKey || event.metaKey ) return;
+
+		if( event.keyCode === 83 ) {
+			event.preventDefault();
+			openNotes();
+		}
+	}, false );
+
+	return { open: openNotes };
+})();

src/main/webapp/static/echarts-2.2.7/doc/slide/plugin/postmessage/example.html

@@ -0,0 +1,39 @@
+<html>
+	<body>
+
+		<iframe id="reveal" src="../../index.html" style="border: 0;" width="500" height="500"></iframe>
+
+		<div>
+			<input id="back" type="button" value="go back"/>
+			<input id="ahead" type="button" value="go ahead"/>
+			<input id="slideto" type="button" value="slideto 2-2"/>
+		</div>
+
+		<script>
+
+			(function (){
+
+				var back = document.getElementById( 'back' ),
+						ahead = document.getElementById( 'ahead' ),
+						slideto = document.getElementById( 'slideto' ),
+						reveal =  window.frames[0];
+
+					back.addEventListener( 'click', function () {
+						
+					reveal.postMessage( JSON.stringify({method: 'prev', args: []}), '*' );
+				}, false );
+
+				ahead.addEventListener( 'click', function (){
+					reveal.postMessage( JSON.stringify({method: 'next', args: []}), '*' );
+				}, false );
+
+				slideto.addEventListener( 'click', function (){
+					reveal.postMessage( JSON.stringify({method: 'slide', args: [2,2]}), '*' );
+				}, false );
+
+			}());
+
+		</script>
+
+	</body>
+</html>

src/main/webapp/static/echarts-2.2.7/doc/slide/plugin/postmessage/postmessage.js

@@ -0,0 +1,42 @@
+/*
+
+	simple postmessage plugin
+
+	Useful when a reveal slideshow is inside an iframe.
+	It allows to call reveal methods from outside.
+
+	Example:
+		 var reveal =  window.frames[0];
+
+		 // Reveal.prev(); 
+		 reveal.postMessage(JSON.stringify({method: 'prev', args: []}), '*');
+		 // Reveal.next(); 
+		 reveal.postMessage(JSON.stringify({method: 'next', args: []}), '*');
+		 // Reveal.slide(2, 2); 
+		 reveal.postMessage(JSON.stringify({method: 'slide', args: [2,2]}), '*');
+
+	Add to the slideshow:
+
+		dependencies: [
+			...
+			{ src: 'plugin/postmessage/postmessage.js', async: true, condition: function() { return !!document.body.classList; } }
+		]
+
+*/
+
+(function (){
+
+	window.addEventListener( "message", function ( event ) {
+		var data = JSON.parse( event.data ),
+				method = data.method,
+				args = data.args;
+
+		if( typeof Reveal[method] === 'function' ) {
+			Reveal[method].apply( Reveal, data.args );
+		}
+	}, false);
+
+}());
+
+
+

src/main/webapp/static/echarts-2.2.7/doc/slide/plugin/print-pdf/print-pdf.js

@@ -0,0 +1,44 @@
+/**
+ * phantomjs script for printing presentations to PDF.
+ *
+ * Example:
+ * phantomjs print-pdf.js "http://lab.hakim.se/reveal-js?print-pdf" reveal-demo.pdf
+ *
+ * By Manuel Bieh (https://github.com/manuelbieh)
+ */
+
+// html2pdf.js
+var page = new WebPage();
+var system = require( 'system' );
+
+page.viewportSize  = {
+	width: 1024,
+	height: 768
+};
+
+page.paperSize = {
+	format: 'letter',
+	orientation: 'landscape',
+	margin: {
+		left: '0',
+		right: '0',
+		top: '0',
+		bottom: '0'
+	}
+};
+
+var revealFile = system.args[1] || 'index.html?print-pdf';
+var slideFile = system.args[2] || 'slides.pdf';
+
+if( slideFile.match( /\.pdf$/gi ) === null ) {
+	slideFile += '.pdf';
+}
+
+console.log( 'Printing PDF...' );
+
+page.open( revealFile, function( status ) {
+	console.log( 'Printed succesfully' );
+	page.render( slideFile );
+	phantom.exit();
+} );
+

src/main/webapp/static/echarts-2.2.7/doc/slide/plugin/remotes/remotes.js

@@ -0,0 +1,39 @@
+/**
+ * Touch-based remote controller for your presentation courtesy 
+ * of the folks at http://remotes.io
+ */
+
+(function(window){
+
+    /**
+     * Detects if we are dealing with a touch enabled device (with some false positives)
+     * Borrowed from modernizr: https://github.com/Modernizr/Modernizr/blob/master/feature-detects/touch.js   
+     */
+    var hasTouch  = (function(){
+        return ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch;
+    })();
+
+    /**
+     * Detects if notes are enable and the current page is opened inside an /iframe
+     * this prevents loading Remotes.io several times
+     */
+    var remotesAndIsNotes = (function(){
+      return !(window.RevealNotes && self == top);
+    })();
+
+    if(!hasTouch && !remotesAndIsNotes){
+        head.ready( 'remotes.ne.min.js', function() {
+            new Remotes("preview")
+                .on("swipe-left", function(e){ Reveal.right(); })
+                .on("swipe-right", function(e){ Reveal.left(); })
+                .on("swipe-up", function(e){ Reveal.down(); })
+                .on("swipe-down", function(e){ Reveal.up(); })
+                .on("tap", function(e){ Reveal.next(); })
+                .on("zoom-out", function(e){ Reveal.toggleOverview(true); })
+                .on("zoom-in", function(e){ Reveal.toggleOverview(false); })
+            ;
+        } );
+
+        head.js('https://raw.github.com/Remotes/Remotes/master/dist/remotes.ne.min.js');
+    }
+})(window);

src/main/webapp/static/echarts-2.2.7/doc/slide/plugin/zoom-js/zoom.js

@@ -0,0 +1,256 @@
+// Custom reveal.js integration
+(function(){
+	var isEnabled = true;
+
+	document.querySelector( '.reveal' ).addEventListener( 'mousedown', function( event ) {
+		if( event.altKey && isEnabled ) {
+			event.preventDefault();
+			zoom.to({ element: event.target, pan: false });
+		}
+	} );
+
+	Reveal.addEventListener( 'overviewshown', function() { isEnabled = false; } );
+	Reveal.addEventListener( 'overviewhidden', function() { isEnabled = true; } );
+})();
+
+/*!
+ * zoom.js 0.2 (modified version for use with reveal.js)
+ * http://lab.hakim.se/zoom-js
+ * MIT licensed
+ *
+ * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
+ */
+var zoom = (function(){
+
+	// The current zoom level (scale)
+	var level = 1;
+
+	// The current mouse position, used for panning
+	var mouseX = 0,
+		mouseY = 0;
+
+	// Timeout before pan is activated
+	var panEngageTimeout = -1,
+		panUpdateInterval = -1;
+
+	var currentOptions = null;
+
+	// Check for transform support so that we can fallback otherwise
+	var supportsTransforms = 	'WebkitTransform' in document.body.style ||
+								'MozTransform' in document.body.style ||
+								'msTransform' in document.body.style ||
+								'OTransform' in document.body.style ||
+								'transform' in document.body.style;
+
+	if( supportsTransforms ) {
+		// The easing that will be applied when we zoom in/out
+		document.body.style.transition = 'transform 0.8s ease';
+		document.body.style.OTransition = '-o-transform 0.8s ease';
+		document.body.style.msTransition = '-ms-transform 0.8s ease';
+		document.body.style.MozTransition = '-moz-transform 0.8s ease';
+		document.body.style.WebkitTransition = '-webkit-transform 0.8s ease';
+	}
+
+	// Zoom out if the user hits escape
+	document.addEventListener( 'keyup', function( event ) {
+		if( level !== 1 && event.keyCode === 27 ) {
+			zoom.out();
+		}
+	}, false );
+
+	// Monitor mouse movement for panning
+	document.addEventListener( 'mousemove', function( event ) {
+		if( level !== 1 ) {
+			mouseX = event.clientX;
+			mouseY = event.clientY;
+		}
+	}, false );
+
+	/**
+	 * Applies the CSS required to zoom in, prioritizes use of CSS3
+	 * transforms but falls back on zoom for IE.
+	 *
+	 * @param {Number} pageOffsetX
+	 * @param {Number} pageOffsetY
+	 * @param {Number} elementOffsetX
+	 * @param {Number} elementOffsetY
+	 * @param {Number} scale
+	 */
+	function magnify( pageOffsetX, pageOffsetY, elementOffsetX, elementOffsetY, scale ) {
+
+		if( supportsTransforms ) {
+			var origin = pageOffsetX +'px '+ pageOffsetY +'px',
+				transform = 'translate('+ -elementOffsetX +'px,'+ -elementOffsetY +'px) scale('+ scale +')';
+
+			document.body.style.transformOrigin = origin;
+			document.body.style.OTransformOrigin = origin;
+			document.body.style.msTransformOrigin = origin;
+			document.body.style.MozTransformOrigin = origin;
+			document.body.style.WebkitTransformOrigin = origin;
+
+			document.body.style.transform = transform;
+			document.body.style.OTransform = transform;
+			document.body.style.msTransform = transform;
+			document.body.style.MozTransform = transform;
+			document.body.style.WebkitTransform = transform;
+		}
+		else {
+			// Reset all values
+			if( scale === 1 ) {
+				document.body.style.position = '';
+				document.body.style.left = '';
+				document.body.style.top = '';
+				document.body.style.width = '';
+				document.body.style.height = '';
+				document.body.style.zoom = '';
+			}
+			// Apply scale
+			else {
+				document.body.style.position = 'relative';
+				document.body.style.left = ( - ( pageOffsetX + elementOffsetX ) / scale ) + 'px';
+				document.body.style.top = ( - ( pageOffsetY + elementOffsetY ) / scale ) + 'px';
+				document.body.style.width = ( scale * 100 ) + '%';
+				document.body.style.height = ( scale * 100 ) + '%';
+				document.body.style.zoom = scale;
+			}
+		}
+
+		level = scale;
+
+		if( level !== 1 && document.documentElement.classList ) {
+			document.documentElement.classList.add( 'zoomed' );
+		}
+		else {
+			document.documentElement.classList.remove( 'zoomed' );
+		}
+	}
+
+	/**
+	 * Pan the document when the mosue cursor approaches the edges
+	 * of the window.
+	 */
+	function pan() {
+		var range = 0.12,
+			rangeX = window.innerWidth * range,
+			rangeY = window.innerHeight * range,
+			scrollOffset = getScrollOffset();
+
+		// Up
+		if( mouseY < rangeY ) {
+			window.scroll( scrollOffset.x, scrollOffset.y - ( 1 - ( mouseY / rangeY ) ) * ( 14 / level ) );
+		}
+		// Down
+		else if( mouseY > window.innerHeight - rangeY ) {
+			window.scroll( scrollOffset.x, scrollOffset.y + ( 1 - ( window.innerHeight - mouseY ) / rangeY ) * ( 14 / level ) );
+		}
+
+		// Left
+		if( mouseX < rangeX ) {
+			window.scroll( scrollOffset.x - ( 1 - ( mouseX / rangeX ) ) * ( 14 / level ), scrollOffset.y );
+		}
+		// Right
+		else if( mouseX > window.innerWidth - rangeX ) {
+			window.scroll( scrollOffset.x + ( 1 - ( window.innerWidth - mouseX ) / rangeX ) * ( 14 / level ), scrollOffset.y );
+		}
+	}
+
+	function getScrollOffset() {
+		return {
+			x: window.scrollX !== undefined ? window.scrollX : window.pageXOffset,
+			y: window.scrollY !== undefined ? window.scrollY : window.pageXYffset
+		}
+	}
+
+	return {
+		/**
+		 * Zooms in on either a rectangle or HTML element.
+		 *
+		 * @param {Object} options
+		 *   - element: HTML element to zoom in on
+		 *   OR
+		 *   - x/y: coordinates in non-transformed space to zoom in on
+		 *   - width/height: the portion of the screen to zoom in on
+		 *   - scale: can be used instead of width/height to explicitly set scale
+		 */
+		to: function( options ) {
+			// Due to an implementation limitation we can't zoom in
+			// to another element without zooming out first
+			if( level !== 1 ) {
+				zoom.out();
+			}
+			else {
+				options.x = options.x || 0;
+				options.y = options.y || 0;
+
+				// If an element is set, that takes precedence
+				if( !!options.element ) {
+					// Space around the zoomed in element to leave on screen
+					var padding = 20;
+
+					options.width = options.element.getBoundingClientRect().width + ( padding * 2 );
+					options.height = options.element.getBoundingClientRect().height + ( padding * 2 );
+					options.x = options.element.getBoundingClientRect().left - padding;
+					options.y = options.element.getBoundingClientRect().top - padding;
+				}
+
+				// If width/height values are set, calculate scale from those values
+				if( options.width !== undefined && options.height !== undefined ) {
+					options.scale = Math.max( Math.min( window.innerWidth / options.width, window.innerHeight / options.height ), 1 );
+				}
+
+				if( options.scale > 1 ) {
+					options.x *= options.scale;
+					options.y *= options.scale;
+
+					var scrollOffset = getScrollOffset();
+
+					if( options.element ) {
+						scrollOffset.x -= ( window.innerWidth - ( options.width * options.scale ) ) / 2;
+					}
+
+					magnify( scrollOffset.x, scrollOffset.y, options.x, options.y, options.scale );
+
+					if( options.pan !== false ) {
+
+						// Wait with engaging panning as it may conflict with the
+						// zoom transition
+						panEngageTimeout = setTimeout( function() {
+							panUpdateInterval = setInterval( pan, 1000 / 60 );
+						}, 800 );
+
+					}
+				}
+
+				currentOptions = options;
+			}
+		},
+
+		/**
+		 * Resets the document zoom state to its default.
+		 */
+		out: function() {
+			clearTimeout( panEngageTimeout );
+			clearInterval( panUpdateInterval );
+
+			var scrollOffset = getScrollOffset();
+
+			if( currentOptions && currentOptions.element ) {
+				scrollOffset.x -= ( window.innerWidth - ( currentOptions.width * currentOptions.scale ) ) / 2;
+			}
+
+			magnify( scrollOffset.x, scrollOffset.y, 0, 0, 1 );
+
+			level = 1;
+		},
+
+		// Alias
+		magnify: function( options ) { this.to( options ) },
+		reset: function() { this.out() },
+
+		zoomLevel: function() {
+			return level;
+		}
+	}
+
+})();
+

src/main/webapp/static/echarts-2.2.7/doc/slide/whyEcharts-en.html

@@ -0,0 +1,674 @@
+<!doctype html>
+<html>
+
+    <head>
+        <meta charset="utf-8">
+
+        <title>Why ECharts</title>
+
+        <meta name="description" content="Why echarts?">
+        <meta name="author" content="kener.linfeng@gmail.com">
+
+        <meta name="apple-mobile-web-app-capable" content="yes" />
+        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+
+        <link rel="stylesheet" href="css/reveal.min.css">
+        <link rel="stylesheet" href="css/theme/default.css" id="theme">
+
+        <!-- For syntax highlighting -->
+        <link rel="stylesheet" href="lib/css/zenburn.css">
+
+        <link rel="stylesheet" href="css/echarts-slide.css">
+        
+        <!-- Fav and touch icons -->
+        <link rel="shortcut icon" href="../asset/ico/favicon.png">
+
+        <!--[if lt IE 9]>
+        <script src="lib/js/html5shiv.js"></script>
+        <![endif]-->
+        <style type="text/css">
+            * {
+                font-family:'微软雅黑' !important;
+            }
+            .main, .main2 {
+                background-color: #fff;
+                background: url('./img/big_load.gif') #fff no-repeat 50% 50%;
+                height: 400px;
+                overflow: hidden;
+                padding : 10px !important;
+                border: 1px solid #e3e3e3;
+                -webkit-border-radius: 4px;
+                   -moz-border-radius: 4px;
+                        border-radius: 4px;
+                -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
+                   -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
+                        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
+            }
+            .noLoading {
+                background: #fff;
+            }
+            .main canvas {
+               left:0;
+               top:0;
+            }
+            .main div {
+                text-align: left !important;
+            }
+            .echarts-dataview p {
+                font-size: 16px !important;
+                color:#333;
+                text-align: left;
+            }
+            p, h4 {
+                text-align: left !important;
+                text-transform: none !important;
+            }
+            h5 strong, small strong{
+                color: #9acd32;
+                font-weight: normal !important;
+            }
+            td,th {
+                text-align: center !important;
+                font-size: 0.7em !important;
+            }
+            .reveal small,.reveal a.roll {
+                line-height: 1.5em;
+            }
+            .reveal blockquote {
+                width:100%;
+            }
+            .reveal blockquote small{
+                line-height: 1.5em;
+            }
+            .reveal img.echarts-icon {
+                margin:0;
+                padding:7px;
+                border:0;
+                background:none
+            }
+            .reveal img {
+                max-width:100%;
+                max-height:100%;
+            }
+            .reveal .slides>section, .reveal .slides>section>section {
+                padding:0;
+            }
+            .reveal ul ul li {
+                font-size:20px;
+                color:#78B9E6
+            }
+        </style>
+    </head>
+
+    <body>
+        <a href="https://github.com/ecomfe/echarts" target="_blank">
+            <img style="position:absolute;top:0;right:0;border:0;z-index:1000" src="img/fork.png" alt="Fork me on GitHub">
+        </a>
+        <div class="reveal">
+            <!-- Any section element inside of this container is displayed as a slide -->
+            <div class="slides">
+                <section>
+                    <h1 style="margin:-10px 0 0 0">
+                        <img src="./img/echarts_logo.png" style="margin:0;background:rgba(0,0,0,0);border-width: 0;box-shadow: 0 0 0px rgba(0, 0, 0, 0);"/>
+                    </h1>
+                    <h5>It's time to redefine the chart!</h5><br/>
+                    <div>
+                        <small>Open source from Baidu SSG Data Visualization Team</small><br/>
+                        <small>Created by <a href="http://weibo.com/kenerlinfeng" target="_blank">@Kener-林峰</a></small>
+                    </div>
+                </section>
+                
+                <section>
+                    <h4>Innumerable charts library!</h4>
+                    <div class="fragment" style="text-align:right;">
+                        <hr/>Why <strong style="color:#9acd32">ECharts</strong> ?
+                    </div>
+                </section>
+                
+                <section>
+                    <h4 style="color:#9acd32">Data Interactive Visualization</h4>
+                        <p><small>
+                            <br/>Data visualization with an <strong>interactive graphical user interface (GUI)</strong>. 
+                            Data's visual presentation is <strong>not only for statement</strong>, bug also for <strong>data mining, integration</strong> to the data presented. 
+                            Make data visualization to be a way of people's <strong>visual thinking</strong>.
+                        </small></p>
+                        <br/>
+                     <div class="fragment" style="text-align:right;">
+                        <hr>
+                        <small>Let's find out what <a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a> has done for this purpose?<br/>
+                            <small>* The following content is recommended full-screen (F11)</small>
+                        </small>
+                    </div>
+                </section>
+
+                <section>
+                    <section>
+                        <h4>[ Drag-Recalculate ] Data reorganized</h4>
+                        <p>
+                            <small>The default classification of chart can't always meet the needs of everyone. 
+                                <br/>Look at the following example: if you want to know the combined proportion that IE 6, IE 7, and IE 8 represent, what will you do? Mental arithmetic or take out a pen?
+                            </small>
+                        </p>
+                        <p class="fragment">
+                            <small>This is <a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>, try to <strong>drag</strong> the desired items on top of each other to combine them!</small>
+                        </p>
+                        <div class="main" optionKey="calculable1"></div>
+                    </section>
+    
+                    <section>
+                        <h4>[ Drag-Recalculate ] Deal with outliers</h4>
+                        <p>
+                            <small>There are often outliers in our data. Look at the following sales data in Chinese Single Day (11-11). Except the sales peak on Single Day, can you find something else?
+                            </small>
+                        </p>
+                        <p class="fragment">
+                            <small>This is <a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>, try to <strong>drag</strong> the outlier out!
+                                <br/>Wow, after dragging that out, can you find some trend which is not optimistic?
+                            </small>
+                        </p>
+                        <div class="main" optionKey="calculable2"></div>
+                    </section>
+                </section>
+
+                <section>
+                    <h4>[ Data View ] Sometimes we need the original data</h4>
+                    <p>
+                        <small>If the data presented is important to the users, then they will not satisfied to see a visual chart.</small>
+                    </p>
+                    <p class="fragment">
+                        <small>This is <a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>, Try to <strong>click</strong><img src="./img/iconDataView.png" class="echarts-icon"/>!
+                            <br/>You can even <strong>edit</strong> your data and update the chart! Compared with Drag-Recalculate, this is batch operation!
+                        </small>
+                    </p>
+                    <div class="main" optionKey="dataView"></div>
+                </section>
+
+                <section>
+                    <section>
+                        <h4>[ Magic Switch ] Try different charts at once</h4>
+                        <p>
+                            <small>We can use different charts to express the same data. However it's hard to make an always-good choice since their performance depends on data, personal preference etc. For example, choose a bar chart or a line chart ?
+                            </small>
+                        </p>
+                        <p class="fragment">
+                            <small>This is <a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>, you can switch the chart magicly!
+                                Try to <strong>switch</strong> the bar chart<img src="./img/iconBarChart.png" class="echarts-icon"/>to the line chart<img src="./img/iconLineChart.png" class="echarts-icon"/>, or from stack to tiled<img src="./img/iconStack.png" class="echarts-icon"/>, maybe you will have more interpretation of this data.</small>
+                        </p>
+                        <div class="main" optionKey="magicType"></div>
+                    </section>
+                    <section>
+                        <h4>[ Magic Switch ] Try different charts at once</h4>
+                        <p>
+                            <small>We can use different charts to express the same data. However it's hard to make an always-good choice since their performance depends on data, personal preference etc. For example, choose a bar chart or a line chart ?
+                            </small>
+                        </p>
+                        <p>
+                            <small>This is <a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>, you can switch the chart magicly! Maybe you will have more interpretation of this data.</small>
+                        </p>
+                        <div class="main" optionKey="magicType2"></div>
+                    </section>
+                    <section>
+                        <h4>[ Magic Switch ] Try different charts at once</h4>
+                        <p>
+                            <small>We can use different charts to express the same data. However it's hard to make an always-good choice since their performance depends on data, personal preference etc. For example, choose a bar chart or a line chart ?
+                            </small>
+                        </p>
+                        <p>
+                            <small>This is <a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>, you can switch the chart magicly! Maybe you will have more interpretation of this data.</small>
+                        </p>
+                        <div class="main" optionKey="legendSelected"></div>
+                    </section>
+                </section>
+
+                <section>
+                    <h4>[ Scale Roaming ] Focus on the interested data</h4>
+                    <p>
+                        <small>We can use different colors in Coordinate based charts (like map or scatter) to show the distribution of the data vividly.
+                            <br/>But how can I focus on the data that I am interesting in? For example, how to look over the top 10% area? Find pen again?
+                        </small>
+                    </p>
+                    <p class="fragment">
+                        <small>This is <a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>, You can do scale roaming: try to <strong>drag</strong> the color scale up or down.
+                            <br/>The mean of this doesn't need more explanation.<br/>
+                        </small>
+                    </p>
+                    <div class="main" optionKey="dataRange1"></div>
+                </section>
+
+                <section>
+                    <h4>[ Space Zoom ] Focus on the interested data</h4>
+                    <p>
+                        <small>Display space is always limited, so we need Space Zoom, you can zoom the space easily.</small>
+                    </p>
+                    <p class="fragment">
+                        <small>This is <a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>, you can use the <strong>drag chooser</strong> at the bottom or the <strong>block chooser</strong><img src="./img/iconDataZoom.png" class="echarts-icon"/> to zoom in or <strong>back</strong><img src="./img/iconDataZoomReset.png" class="echarts-icon"/>! Of course, they are always in lockstep.
+                            <br/>Maybe you have found the <strong>Extreme MarkPoint</strong> and the <strong>Average MarkLine</strong> are also in lockstep.<br/>
+                        </small>
+                    </p>
+                    <div class="main" optionKey="dataZoom1"></div>
+                </section>
+                
+                <section>
+                    <h4>[ Linkage ] More powerful tool for data correlation analysis </h4>
+                    <p>
+                        <small>
+                            Sometimes, multi-series data in one chart would be confusing. However, they are associated and can't be separated?
+                        </small>
+                    </p>
+                    <p class="fragment">
+                        <small>This is <a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>, we provide a capability called "Linkage".</small>
+                    </p>
+                    <div class="main" optionKey="multiCharts" style='height:210px;padding-bottom:0;border-bottom-width:0'></div>
+                    <div id="mcMain2" class="main2" style='height:140px;padding:1px 10px;border-width:0 1px;'></div>
+                    <div id="mcMain3" class="main2" style='height:100px;padding-top:1px;border-top-width:0'></div>
+                </section>
+                
+                <section>
+                    <section>
+                        <h4>[ Mixed Timeline ] Expand the dimension of time </h4>
+                        <p>
+                            <small>Time data analysis is a very important direction in information visualization!</small>
+                        </p>
+                        <p>
+                            <small>This is <a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>, we provide a timeline control which can be mixed with any charts to show the spatio-temporal data changes.
+                            </small>
+                        </p>
+                        <div class="main" optionKey="timeline1"></div>
+                    </section>
+                    <section>
+                        <h4>[ Mixed Timeline ] Expand the dimension of time </h4>
+                        <p>
+                            <small>Time data analysis is a very important direction in information visualization!</small>
+                        </p>
+                        <p>
+                            <small>This is <a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>, we provide a timeline control which can be mixed with any charts to show the spatio-temporal data changes.
+                            </small>
+                        </p>
+                        <div class="main" optionKey="timeline2"></div>
+                    </section>
+                </section>
+                
+                <section>
+                    <h4>[ Large-scale ] Show the charm of big data</h4>
+                    <p>
+                        <small>How to show hundreds of discrete data in order to identify their distribution and clustering?<br/>
+                            <span class="fragment">Oh, sorry should be <strong>hundred thousand, event million</strong> data! In addition to professional statistical tools(Such as MATLAB), it seems we have no choice, especially on the web!
+                            </span>
+                        </small>
+                    </p>
+                    <p class="fragment">
+                        <small>This is <a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>, we can show 200,000 data in one second.
+                        </small>
+                    </p>
+                    <div class="main" optionKey="scatter"></div>
+                </section>
+
+                <section>
+                    <section>
+                        <h4>[ Force-directed layout ] Elegant display of networks</h4>
+                        <p>
+                            <small>This is <a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>, we provide Force-directed layout to show network data.
+                                <br/>For example, social networks of <strong>Job</strong>!</small>
+                        </p>
+                        <div class="main" optionKey="force1"></div>
+                    </section>
+                    <section>
+                        <h4>[ Force-directed layout ] Elegant display of networks</h4>
+                        <p>
+                            <small>This is <a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>, we provide Force-directed layout to show network data.
+                                <br/>Let's check a more complicated example: <strong>class depends relationship of Webkit Kernel</strong>!</small>
+                        </p>
+                        <div class="main" optionKey="force2" style="height:500px"></div>
+                    </section>
+                </section>
+
+                <section>
+                    <h4>[ Dynamically Addition ] Show your realtime data</h4>
+                    <p>
+                        <small>New data comes every second, we should keep up with the rhythm.<br/></small>
+                    </p>
+                    <p class="fragment">
+                        <small>This is <a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>, we provide dynamic data interface to add new data!<br/></small>
+                    </p>
+                    <div class="main" optionKey="dynamic"></div>
+                </section>
+                
+                <section>
+                    <h4>[ Legend Switch ] Switch to the interested data</h4>
+                    <p>
+                        <small>Multi-series data show us many things, however somtimes we are just interested in some part of them. how to do ?</small>
+                    </p>
+                    <p class="fragment">
+                        <small>This is <a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>, we create some boxes to achieve this feature.
+                        <br/>Just <strong>click</strong> on those legends, the meaning need no explanation !</small>
+                    </p>
+                    <div class="main" optionKey="legendSelected"></div>
+                </section>
+
+                <section>
+                    <h4>[ Multi-dimensional Stacking ] More expressive chart</h4>
+                    <p>
+                        <small>Sometimes the multi-dimensional stacking chart shows more expressively than a single stacking chart. However, we know that most of the charts don't support it.
+                        </small>
+                    </p>
+                    <p class="fragment">
+                        <small>This is <a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>, supported!<br/></small>
+                    </p>
+                    <div class="main" optionKey="stack"></div>
+                </section>
+                
+                <section>
+                    <h4>[ BI Component ] Some widely used business chart</h4>
+                    <p>
+                        <small>The most common use of gauge chart is to display the key indicators for performance management.
+                        And the funnel plot is widely used in marketing analysis.</small>
+                    </p>
+                    <p class="fragment">
+                        <small>This is <a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>, we provide two highly customizable chart for this: <strong>Gauge</strong> and <strong>Funnel</strong>!<br/></small>
+                    </p>
+                    <div class="main" optionKey="gf"></div>
+                </section>
+
+                <section>
+                    <section>
+                        <h4>[ Mixed Charts ] Show the best mashup to your data</h4>
+                        <p>
+                            <small>Sometimes the mixed charts will be more expressive and more interesting!
+                                <small>This is <a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>, the chart we provided(11 types) can be mixed freely.<br/></small>
+                            </small>
+                        </p>
+                        <img src="../asset/img/doc/charts.jpg" style="width:100%;max-width:100%;margin:0;">
+                    </section>
+    
+                    <section>
+                        <h4>[ Mixed Charts ] Show the best mashup to your data</h4>
+                        <p>
+                            <small>This is <a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>, the chart we provided can be mixed freely.<br/></small>
+                        </p>
+                        <div class="main" optionKey="mix1"></div>
+                    </section>
+    
+                    <section>
+                        <h4>[ Mixed Charts ] Show the best mashup to your data</h4>
+                        <p>
+                            <small>This is <a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>, the chart we provided can be mixed freely.<br/></small>
+                        </p>
+                        <div class="main" optionKey="mix2"></div>
+                    </section>
+    
+                    <section>
+                        <h4>[ Mixed Charts ] Show the best mashup to your data</h4>
+                        <p>
+                            <small>This is <a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>, the chart we provided can be mixed freely.
+                                <br/>With the event handler you can event create an interactive system!
+                                <br/>try <strong>click</strong> the map and you will find more fun.
+                            </small>
+                        </p>
+                        <div class="main" optionKey="mix3"></div>
+                    </section>
+    
+                    <section>
+                        <h4>[ Mixed Charts ] Show the best mashup to your data</h4>
+                        <p>
+                            <small>This is <a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>, the chart we provided can be mixed freely.
+                                <br/>Perhaps you can also play a bit of whimsy? Generally speaking, pie(radar) chart is not suitable for showing trends in data, how about lots of pie(radar)?
+                                <br/>We call this multilayer nested as "<a onclick="functionMap['lasagna']()" style="cursor:pointer">lasagna</a>" or "<a onclick="functionMap['wormhole']()" style="cursor:pointer">wormhole</a>"!<br/>
+                            </small>
+                        </p>
+                        <div class="main" optionKey="lasagna"></div>
+                    </section>
+                </section>
+
+                <section>
+                    <h4>[ Highly Customizable Capabilities] Creativity</h4>
+                    <p>
+                        <small>Do not limit your creativity because of the chart ability. <a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a> has more than <strong>600</strong> configured items, with a <strong>multi-level control</strong> system which make it has a highly customizable capabilities.</small>
+                    </p>
+                    <img src="../asset/img/creativity.jpg" style="width:100%;max-width:100%;margin:0;">
+                </section>
+
+                <section>
+                    <section>
+                        <h4>[ Glare Effect ] Ability to attract the eye</h4>
+                        <p>
+                            <small>We know that many times we need to be cool. 
+                                <br/><a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a> has <strong>Glare Effects</strong>，especially use it on the map: <strong>Migration</strong>
+                                <br/>And when you have a lots of data, you can try our <strong>Large-scale Glare MarkPoint Effects</strong>
+                            </small>
+                        </p>
+                        <div class="main" style="height:500px;background-color:transparent" optionKey="effect1"></div>
+                    </section>
+                    <section>
+                        <h4>[ Glare Effect ] Ability to attract the eye</h4>
+                        <p>
+                            <small>We know that many times we need to be cool. 
+                                <br/><a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a> has <strong>Glare Effects</strong>，especially use it on the map: <strong>Migration</strong>
+                                <br/>And when you have a lots of data, you can try our <strong>Large-scale Glare MarkPoint Effects</strong>
+                            </small>
+                        </p>
+                        <div class="main" style="height:500px;background-color:transparent" optionKey="effect2"></div>
+                    </section>
+                    <section>
+                        <h4>[ Glare Effect ] Ability to attract the eye</h4>
+                        <p>
+                            <small>We know that many times we need to be cool. 
+                                <br/><a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a> has <strong>Glare Effects</strong>，especially use it on the map: <strong>Migration</strong>
+                                <br/>And when you have a lots of data, you can try our <strong>Large-scale Glare MarkPoint Effects</strong>
+                            </small>
+                        </p>
+                        <div class="main" style="height:500px;background-color:transparent" optionKey="effect3"></div>
+                    </section>
+                </section>
+                
+                <section>
+                    <section>
+                        <h4>Application - Baidu</h4>
+                        <div>
+                            <img src="./img/usage1.png" width="100%"/>
+                        </div>
+                    </section>
+                    <section>
+                        <h4>Application - Others</h4>
+                        <div>
+                            <img src="./img/usage2.png" width="100%"/>
+                        </div>
+                    </section>
+                </section>
+                
+                <section>
+                    <h4>ECharts VS Excel</h4>
+                    <p>
+                        <small>Although those chart provided by Excel have no interaction at all, but its rich chart type and configuration, easy to use, Excel is the most commonly data statistics tools.</small>
+                    </p>    
+                    <table class="fragment table table-striped table-bordered table-hover">
+                        <thead>
+                            <tr><th>#</th><th>ECharts</th><th>Excel</th></tr>
+                        </thead>
+                        <tbody>
+                            <tr><td>Histogram</td><td>Yes</td><td>Yes</td></tr>
+                            <tr><td>Bar</td><td>Yes</td><td>Yes</td></tr>
+                            <tr><td>Line</td><td>Yes</td><td>Yes</td></tr>
+                            <tr><td>Area</td><td>Yes</td><td>Yes</td></tr>
+                            <tr><td>Scatter</td><td>Yes</td><td>Yes</td></tr>
+                            <tr><td>Bubble</td><td>Yes</td><td>Yes</td></tr>
+                            <tr><td>K</td><td>Yes</td><td>Yes</td></tr>
+                            <tr><td>Pie</td><td>Yes</td><td>Yes</td></tr>
+                            <tr><td>Doughnut</td><td>Yes</td><td>Yes</td></tr>
+                            <tr><td>Radar</td><td>Yes</td><td>Yes</td></tr>
+                            <tr><td>Force</td><td>Yes</td><td class='error'>No</td></tr>
+                            <tr><td>Chord</td><td>Yes</td><td class='error'>No</td></tr>
+                            <tr><td>Surface</td><td class='error'>No</td><td>Yes</td></tr>
+                            <tr><td>Map</td><td>Yes</td><td class='error'>No</td></tr>
+                            <tr><td>EventRiver</td><td>Yes</td><td class='error'>No</td></tr>
+                        </tbody>
+                    </table>
+                </section>
+
+                <section>
+                    <section>
+                        <h4>ECharts VS Highcharts (1)</h4>
+                        <p>
+                            <small>The industry has countless JS chart, many outstanding representative, like chartjs, FusionCharts, amCharts, flot, RGraph, jqPlot, gRaphaël etc. Some are free and even open source, while others are commercial, you can find them easily.</small>
+                        </p>
+                        <p class="fragment">
+                            <small>Unable to compare with them all, let's choose <a href="http://www.highcharts.com/" target="_blank">Highcharts</a>, an excellent, mature business chart library which is widely known in the world.
+                                <br/>First about the <strong>charts type</strong>?
+                            </small>
+                        </p>    
+                        <table class="fragment table table-striped table-bordered table-hover">
+                            <thead>
+                                <tr><th>#</th><th>ECharts</th><th>Highcharts</th></tr>
+                            </thead>
+                            <tbody>
+                                <tr><td>Histogram（Bar）</td><td>Yes</td><td>Yes</td></tr>
+                                <tr><td>Line（Area）</td><td>Yes</td><td>Yes</td></tr>
+                                <tr><td>Pie（Doughnut）</td><td>Yes</td><td>Yes</td></tr>
+                                <tr><td>Scatter（Bubble）</td><td>Yes</td><td>Yes</td></tr>
+                                <tr><td>Radar</td><td>Yes</td><td>Yes</td></tr>
+                                <tr><td>K</td><td>Yes</td><td class='success'>Highstock</td></tr>
+                                <tr><td>Force</td><td>Yes</td><td class='error'>No</td></tr>
+                                <tr><td>Chord</td><td>Yes</td><td class='error'>No</td></tr>
+                                <tr><td>Map</td><td>Yes</td><td class='success'>Highmap</td></tr>
+                                <tr><td>EventRiver</td><td>Yes</td><td class='error'>No</td></tr>
+                                <tr><td>Special（Gauge, Funnel）</td><td>Yes</td><td>Yes</td></tr>
+                            </tbody>
+                        </table>
+                    </section>
+    
+                    <section>
+                        <h4>ECharts VS Highcharts (2)</h4>
+                        <p>
+                            <small>Let's look at the <strong>features</strong>?</small>
+                        </p>    
+                        <table class="table table-striped table-bordered table-hover">
+                            <thead>
+                                <tr><th>#</th><th>ECharts</th><th>Highcharts</th></tr>
+                            </thead>
+                            <tbody>
+                                <tr><td>Drag-Recalculate</td><td>Yes</td><td class='error'>No</td></tr>
+                                <tr><td>Data View</td><td>Yes</td><td class='error'>No</td></tr>
+                                <tr><td>Magic Switch</td><td>Yes</td><td class='error'>No</td></tr>
+                                <tr><td>Scale Roaming</td><td>Yes</td><td class='error'>No</td></tr>
+                                <tr><td>Large-scale Data</td><td>Yes</td><td class='error'>No</td></tr>
+                                <tr><td>Glare Effect</td><td>Yes</td><td class='error'>No</td></tr>
+                                <tr><td>Linkage</td><td>Yes</td><td class='error'>No</td></tr>
+                                <tr><td>Space Zoom</td><td>Yes</td><td>Yes</td></tr>
+                                <tr><td>Legend Switch</td><td>Yes</td><td>Yes</td></tr>
+                                <tr><td>Multi-dimensional Stacking</td><td>Yes</td><td>Yes</td></tr>
+                                <tr><td>Mixed Charts</td><td>Yes</td><td>Yes</td></tr>
+                                <tr><td>Image Export</td><td>Yes</td><td>Yes</td></tr>
+                                <tr>
+                                    <td><br/>License &amp; Pricing</td>
+                                    <td class='success'>Free<br/><a href="https://github.com/ecomfe/echarts/blob/master/LICENSE.txt" target="_blank">Baidu BSD</a></td>
+                                    <td class='success'>Non-commercial free under CC3.0<br/><br/>Commercial licenses $90~$3600</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </section>
+                </section>
+
+                <section>
+                    <h4>This is ECharts</h4>
+                    <p class="fragment">
+                        <small>We just try our best to show the <span style="color:#f50">real</span> data for you,</small>
+                    </p>
+                    <p class="fragment">
+                        <small>and provides an intuitive, easy-to-use interactive way to help you to deal with <span style="color:#f50">data mining, extraction, correction or consolidation</span>, <br/><strong>（Drag-Recalculate, Data View）</strong></small>
+                    </p>
+                    <p class="fragment">
+                        <small>so that you can <span style="color:#f50">focus on</span> what you care about,<br/><strong>（Legend Switch, Space Zoom, Scale Roaming）</strong></small>
+                    </p>
+                    <p class="fragment">
+                        <small>have <span style="color:#f50">different interpretation</span> to the same data in different ways.<br/><strong>（Magic Switch, Multi-dimensional Stacking, Linkage, Mixed Charts）</strong></small>
+                    </p>
+                    <div class="fragment">
+                        <hr/>
+                        <p>
+                            <small><strong>Time to re-define the chart</strong>, browse the charts outputed by ECharts, you no longer just a "reader", you can participate. This is <a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>, an powerfull data visualizaiont tool with interactive graphical user interface.</small>
+                    </p>
+                    </div>
+                </section>
+
+                <section>
+                    <h4>Acknowledgement</h4>
+                    <p><small>
+                        <a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a> cann't grow up without their excellent contributions :<br/>
+                        <a href="http://weibo.com/kenerlinfeng" target="_blank">@Kener-林峰</a>
+                        <a href="http://weibo.com/pissang" target="_blank">@pissang</a>
+                        <a href="http://weibo.com/errorrik" target="_blank">@errorrik</a>
+                        <a href="http://weibo.com/forain" target="_blank">@diysimon</a>
+                        <a href="http://weibo.com/u/2113446991" target="_blank">@宿爽</a>
+                        <a href="http://weibo.com/u/2810393271" target="_blank">@邓红启</a>
+                        <a href="http://weibo.com/wind108369" target="_blank">@杨骥wind108369</a>
+                        <a href="http://weibo.com/loutongbing" target="_blank">@娄同兵</a>
+                    </small></p><br/>
+                    <p>
+                        <small>With their encouragement and support :<br/>
+                        <a href="http://weibo.com/taiyun" target="_blank">@cloud_wei</a>
+                        <a href="http://weibo.com/u/2042635201" target="_blank">@李湛lizhan</a>
+                        <a href="http://weibo.com/wfsr" target="_blank">@i我佛山人</a>
+                        <a href="http://weibo.com/firede" target="_blank">@赵雷_Firede</a>
+                        <a href="http://weibo.com/zhouyummy" target="_blank">@Yummy_zhou</a>
+                    </small></p><br/>
+                    <p>
+                        <small>Also, it's nice being with you...<br/>
+                        <a href="http://weibo.com/u/2006785117" target="_blank">@财财某</a>
+                        <a href="http://weibo.com/shenhaolaoshi" target="_blank">@沈浩老师</a>
+                        <a href="http://weibo.com/cosname" target="_blank">@统计之都</a>
+                        <a href="http://weibo.com/u/1494921451" target="_blank">@大数据文摘</a>
+                    </small></p><br/>
+                    <p class="fragment">
+                        <small>Finally, you'd be welcome to <a href="https://github.com/ecomfe/echarts" target="_blank">join us</a>~</small>
+                    </p>
+                </section>
+
+                <section>
+                    <h1>THE END</h1>
+                    <h5>Thank you</h5>
+                    <br/>
+                    <div>
+                        <small>Created by <a href="http://weibo.com/kenerlinfeng" target="_blank">@Kener-林峰</a></small>
+                    </div>
+                </section>
+
+            </div>
+
+        </div>
+
+        <script src="lib/js/head.min.js"></script>
+        <script src="js/reveal.min.js"></script>
+
+        <script>
+            // Full list of configuration options available here:
+            // https://github.com/hakimel/reveal.js#configuration
+            Reveal.initialize({
+                controls: true,
+                progress: true,
+                history: true,
+                center: true,
+                height: '100%',
+
+                theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
+                transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none
+
+                // Optional libraries used to extend on reveal.js
+                dependencies: [
+                    { src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
+                    { src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
+                    { src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
+                    { src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
+                    //{ src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
+                    { src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
+                    // { src: 'plugin/search/search.js', async: true, condition: function() { return !!document.body.classList; } }
+                    // { src: 'plugin/remotes/remotes.js', async: true, condition: function() { return !!document.body.classList; } }
+                ]
+            });
+
+        </script>
+        <script src="../example/www/js/echarts.js"></script>
+        <script src="js/whyEcharts-en.js"></script>
+        <script src="js/timelineOption.js"></script>
+    </body>
+</html>

src/main/webapp/static/echarts-2.2.7/doc/slide/whyEcharts-m-en.html

@@ -0,0 +1,271 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+    <title>Why Echarts?</title>
+    <link rel="stylesheet" href="css/why-echarts-m.css">
+    <script src="../asset/js/jquery.min.js"></script>
+    <script src="js/dist/echarts.js"></script>
+    <style type="text/css">
+        .error {
+            color: #f66;
+        }
+        .success {
+            color: orange;
+        }
+        .echarts-tooltip {
+            text-align: left;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="page">
+        <div id="p-up" class="page-up disabled">《 Last</div>
+        <div id="p-down" class="page-down">Next 》</div>
+    </div>
+    <div id="content">
+        <section class="section active" style="left:0" id="first">
+            <img src="../asset/img/about/HelloWorld2.png" alt="ECharts" style="max-width:100%;max-height:100%;margin-bottom:10px;">
+            <h1>- ECharts Mobile Launch -</h1>
+            <small style="line-height:38px;">ECharts-m 1.0.0 ( beta )</small>
+        </section>
+
+        <section class="section">
+            <h1 style="padding:20px 0">Innumerable charts library!</h1>
+            <hr/>
+            <h2 style="padding:20px 0">
+                Why <strong style="color:#9acd32">ECharts</strong> ?
+            </2>
+        </section>  
+        
+        <section class="section">
+            <h1 style="padding:20px 0">Data Interactive Visualization</h1>
+            <p class="fragment">
+                <small>
+                    <br/>Data visualization with an <strong>interactive graphical user interface (GUI)</strong>. 
+                    Data's visual presentation is <strong>not only for statement</strong>, bug also for <strong>data mining, integration</strong> to the data presented. 
+                    Make data visualization to be a way of people's <strong>visual thinking</strong>.
+                </small>
+            </p>
+            <br/>
+            <hr>
+            <p style="padding:20px 0">
+                <small>Let's find out what <a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a> has done for this purpose?</small>
+            </p>
+        </section>
+
+        <section class="section">
+            <div class="main"  optionKey="calculable"></div>
+        </section>
+        
+        <section class="section">
+            <div class="main" optionKey="magicType"></div>
+        </section>
+
+        <section class="section">
+            <div class="main" optionKey="dataRange"></div>
+        </section>
+
+        <section class="section">
+            <div class="main" optionKey="dataZoom"></div>
+        </section>
+
+
+        <section class="section">
+            <div class="main" optionKey="timeline"></div>
+        </section>
+
+        <section class="section">
+            <div class="main" optionKey="scatter"></div>
+        </section>
+
+        <section class="section">
+            <div class="main" optionKey="force"></div>
+        </section>
+
+        <section class="section">
+            <div class="main" optionKey="gauge"></div>
+        </section>
+
+        <section class="section">
+            <div class="main" optionKey="funnel"></div>
+        </section>
+
+        <section class="section">
+            <div class="main" optionKey="mix"></div>
+        </section>
+
+        <section class="section">
+            <div class="main" style="height:500px;background-color:transparent" optionKey="effect2"></div>
+        </section>
+
+        <section class="section">
+            <div class="main" style="height:500px;background-color:transparent" optionKey="effect3"></div>
+        </section>
+
+        <section class="section">
+            <h4>ECharts VS Excel</h4>
+            <p class="fragment">
+                <small>Although those chart provided by Excel have no interaction at all, but its rich chart type and configuration, easy to use, Excel is the most commonly data statistics tools.</small>
+            </p>
+            <div>
+                <table style="margin-top:20px;">
+                    <thead>
+                        <tr><th>#</th><th>ECharts</th><th>Excel</th></tr>
+                    </thead>
+                    <tbody>
+                        <tr><td>Histogram</td><td>Yes</td><td>Yes</td></tr>
+                        <tr><td>Bar</td><td>Yes</td><td>Yes</td></tr>
+                        <tr><td>Line</td><td>Yes</td><td>Yes</td></tr>
+                        <tr><td>Area</td><td>Yes</td><td>Yes</td></tr>
+                        <tr><td>Scatter</td><td>Yes</td><td>Yes</td></tr>
+                        <tr><td>Bubble</td><td>Yes</td><td>Yes</td></tr>
+                        <tr><td>K</td><td>Yes</td><td>Yes</td></tr>
+                        <tr><td>Pie</td><td>Yes</td><td>Yes</td></tr>
+                        <tr><td>Doughnut</td><td>Yes</td><td>Yes</td></tr>
+                        <tr><td>Radar</td><td>Yes</td><td>Yes</td></tr>
+                        <tr><td>Force</td><td>Yes</td><td class='error'>No</td></tr>
+                        <tr><td>Chord</td><td>Yes</td><td class='error'>No</td></tr>
+                        <tr><td>Surface</td><td class='error'>No</td><td>Yes</td></tr>
+                        <tr><td>Map</td><td>Yes</td><td class='error'>No</td></tr>
+                        <tr><td>EventRiver</td><td>Yes</td><td class='error'>No</td></tr>
+                    </tbody>
+                </table>
+            </div>
+        </section>
+
+        <section class="section">
+            <h4>ECharts VS Highcharts (1)</h4>
+            <p class="fragment">
+                 <small>The industry has countless JS chart, many outstanding representative, like chartjs, FusionCharts, amCharts, flot, RGraph, jqPlot, gRaphaël etc. Some are free and even open source, while others are commercial, you can find them easily.</small>
+                <br/>
+                <small>Unable to compare with them all, let's choose Highcharts, an excellent, mature business chart library which is widely known in the world.
+                    <br/>First about the <strong>charts type</strong>?
+                </small>
+            </p>
+            <div>
+                <table>
+                    <thead>
+                        <tr><th>#</th><th>ECharts</th><th>Highcharts</th></tr>
+                    </thead>
+                    <tbody>
+                        <tr><td>Histogram（Bar）</td><td>Yes</td><td>Yes</td></tr>
+                        <tr><td>Line（Area）</td><td>Yes</td><td>Yes</td></tr>
+                        <tr><td>Pie（Doughnut）</td><td>Yes</td><td>Yes</td></tr>
+                        <tr><td>Scatter（Bubble）</td><td>Yes</td><td>Yes</td></tr>
+                        <tr><td>Radar</td><td>Yes</td><td>Yes</td></tr>
+                        <tr><td>K</td><td>Yes</td><td class='success'>Highstock</td></tr>
+                        <tr><td>Force</td><td>Yes</td><td class='error'>No</td></tr>
+                        <tr><td>Chord</td><td>Yes</td><td class='error'>No</td></tr>
+                        <tr><td>Map</td><td>Yes</td><td class='success'>Highmap</td></tr>
+                        <tr><td>EventRiver</td><td>Yes</td><td class='error'>No</td></tr>
+                        <tr><td>Special（Gauge, Funnel）</td><td>Yes</td><td>Yes</td></tr>
+                    </tbody>
+                </table>
+            </div>
+        </section>
+
+        <section class="section">
+            <h4>ECharts VS Highcharts (2)</h4>
+            <p class="fragment">
+                <small>Let's look at the <strong>features</strong>?</small>
+            </p>
+            <div>
+                <table style="width:105%">
+                    <thead>
+                        <tr><th>#</th><th>ECharts</th><th>Highcharts</th></tr>
+                    </thead>
+                    <tbody>
+                        <tr><td>Drag-Recalculate</td><td>Yes</td><td class='error'>No</td></tr>
+                        <tr><td>Data View</td><td>Yes</td><td class='error'>No</td></tr>
+                        <tr><td>Magic Switch</td><td>Yes</td><td class='error'>No</td></tr>
+                        <tr><td>Scale Roaming</td><td>Yes</td><td class='error'>No</td></tr>
+                        <tr><td>Large-scale Data</td><td>Yes</td><td class='error'>No</td></tr>
+                        <tr><td>Glare Effect</td><td>Yes</td><td class='error'>No</td></tr>
+                        <tr><td>Linkage</td><td>Yes</td><td class='error'>No</td></tr>
+                        <tr><td>Space Zoom</td><td>Yes</td><td>Yes</td></tr>
+                        <tr><td>Legend Switch</td><td>Yes</td><td>Yes</td></tr>
+                        <tr><td>Multi-dimensional Stacking</td><td>Yes</td><td>Yes</td></tr>
+                        <tr><td>Mixed Charts</td><td>Yes</td><td>Yes</td></tr>
+                        <tr><td>Image Export</td><td>Yes</td><td>Yes</td></tr>
+                        <tr>
+                            <td>License<br/>&amp;<br/>Pricing</td>
+                            <td class='success'>Baidu<br/><a href="https://github.com/ecomfe/echarts/blob/master/LICENSE.txt" target="_blank">BSD</a><br/>Free</td>
+                            <td class='success'>Non-commercial<br/>free under CC3.0<br/>Commercial licenses<br/>$90~$3600</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </section>
+
+        <section class="section">
+            <h4>This is ECharts</h4>
+            <p class="fragment">
+                <small>We just try our best to show the <span style="color:#f50">real</span> data for you,</small>
+            </p>
+            <p class="fragment">
+                <small>and provides an intuitive, easy-to-use interactive way to help you to deal with <span style="color:#f50">data mining, extraction, correction or consolidation</span>, <br/><strong>（Drag-Recalculate, Data View）</strong></small>
+            </p>
+            <p class="fragment">
+                <small>so that you can <span style="color:#f50">focus on</span> what you care about,<br/><strong>（Legend Switch, Space Zoom, Scale Roaming）</strong></small>
+            </p>
+            <p class="fragment">
+                <small>have <span style="color:#f50">different interpretation</span> to the same data in different ways.<br/><strong>（Magic Switch, Multi-dimensional Stacking, Linkage, Mixed Charts）</strong></small>
+            </p>
+            <div class="fragment">
+                <hr/>
+                <p>
+                    <small><strong>Time to re-define the chart</strong>, browse the charts outputed by ECharts, you no longer just a "reader", you can participate. This is <a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>, an powerfull data visualizaiont tool with interactive graphical user interface.</small>
+            </p>
+            </div>
+        </section>
+
+        <section class="section">
+            <h4>Acknowledgement</h4>
+            <p class="fragment"><small>
+                <a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a> cann't grow up without their excellent contributions :<br/>
+                <a href="http://weibo.com/kenerlinfeng" target="_blank">@Kener-林峰</a>
+                <a href="http://weibo.com/pissang" target="_blank">@pissang</a>
+                <a href="http://weibo.com/errorrik" target="_blank">@errorrik</a>
+                <a href="http://weibo.com/forain" target="_blank">@diysimon</a>
+                <a href="http://weibo.com/u/2113446991" target="_blank">@宿爽</a>
+                <a href="http://weibo.com/u/2810393271" target="_blank">@邓红启</a>
+                <a href="http://weibo.com/wind108369" target="_blank">@杨骥wind108369</a>
+                <a href="http://weibo.com/loutongbing" target="_blank">@娄同兵</a>
+            </small></p><br/>
+            <p class="fragment">
+                <small>With their encouragement and support :<br/>
+                <a href="http://weibo.com/taiyun" target="_blank">@cloud_wei</a>
+                <a href="http://weibo.com/u/2042635201" target="_blank">@李湛lizhan</a>
+                <a href="http://weibo.com/wfsr" target="_blank">@i我佛山人</a>
+                <a href="http://weibo.com/firede" target="_blank">@赵雷_Firede</a>
+                <a href="http://weibo.com/zhouyummy" target="_blank">@Yummy_zhou</a>
+            </small></p><br/>
+            <p class="fragment">
+                <small>Also, it's nice being with you...<br/>
+                <a href="http://weibo.com/u/2006785117" target="_blank">@财财某</a>
+                <a href="http://weibo.com/shenhaolaoshi" target="_blank">@沈浩老师</a>
+                <a href="http://weibo.com/cosname" target="_blank">@统计之都</a>
+                <a href="http://weibo.com/u/1494921451" target="_blank">@大数据文摘</a>
+            </small></p><br/>
+            <p class="fragment">
+                <small>Finally, you'd be welcome to <a href="https://github.com/ecomfe/echarts" target="_blank">join us</a>~</small>
+            </p>
+        </section>
+
+        <section class="section">
+        <img src="../asset/img/echarts-logo2.png" alt="ECharts" style="width:100px;margin-top:50px;">
+            <h1 style="padding:50px 0 20px;">- THE END -</h1>
+            <p>Thank you</p>
+            <br/>
+            <div>
+                <small>Created by <a href="http://weibo.com/kenerlinfeng" target="_blank">@Kener-林峰</a></small>
+            </div>
+            
+        </section>
+    </div>
+    <script src="./js/why-echarts-m-en.js"></script>
+</body>
+</html>

src/main/webapp/static/echarts-2.2.7/doc/slide/whyEcharts-m.html

@@ -0,0 +1,269 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+    <title>Why Echarts?</title>
+    <link rel="stylesheet" href="css/why-echarts-m.css">
+    <script src="../asset/js/jquery.min.js"></script>
+    <script src="js/dist/echarts.js"></script>
+    <style type="text/css">
+        .error {
+            color: #f66;
+        }
+        .success {
+            color: orange;
+        }
+        .echarts-tooltip {
+            text-align: left;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="page">
+        <div id="p-up" class="page-up disabled">《 上一页</div>
+        <div id="p-down" class="page-down">下一页 》</div>
+    </div>
+    <div id="content">
+        <section class="section active" style="left:0" id="first">
+            <img src="../asset/img/about/HelloWorld2.png" alt="ECharts" style="max-width:100%;max-height:100%;margin-bottom:10px;">
+            <h1>- ECharts Mobile Launch -</h1>
+            <small style="line-height:38px;">ECharts-m 1.0.0 ( beta )</small>
+        </section>
+
+        <section class="section">
+            <h1 style="padding:20px 0">业界已经有多如牛毛的图表库了！</h1>
+            <hr/>
+            <h2 style="padding:20px 0">
+                Why <strong style="color:#9acd32">ECharts</strong> ?
+            </2>
+        </section>  
+        
+        <section class="section">
+            <h1 style="padding:20px 0">深度数据互动可视化</h1>
+            <p class="fragment">
+                <small>打破单纯的视觉呈现，拥有<strong>互动图形用户界面（GUI）</strong>的数据可视化。数据呈现<strong>不仅是诉说</strong>，而是允许用户对所呈现数据进行<strong>挖掘、整合</strong>，让可视化成为<strong>辅助人们进行视觉化思考</strong>的方式。
+            </small>
+            </p>
+            <br/>
+            <hr>
+            <p style="padding:20px 0">
+                <small>让我们看看<a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>为此目标做了什么？</small>
+            </p>
+        </section>
+
+        <section class="section">
+            <div class="main"  optionKey="calculable"></div>
+        </section>
+        
+        <section class="section">
+            <div class="main" optionKey="magicType"></div>
+        </section>
+
+        <section class="section">
+            <div class="main" optionKey="dataRange"></div>
+        </section>
+
+        <section class="section">
+            <div class="main" optionKey="dataZoom"></div>
+        </section>
+
+
+        <section class="section">
+            <div class="main" optionKey="timeline"></div>
+        </section>
+
+        <section class="section">
+            <div class="main" optionKey="scatter"></div>
+        </section>
+
+        <section class="section">
+            <div class="main" optionKey="force"></div>
+        </section>
+
+        <section class="section">
+            <div class="main" optionKey="gauge"></div>
+        </section>
+
+        <section class="section">
+            <div class="main" optionKey="funnel"></div>
+        </section>
+
+        <section class="section">
+            <div class="main" optionKey="mix"></div>
+        </section>
+
+        <section class="section">
+            <div class="main" style="height:500px;background-color:transparent" optionKey="effect2"></div>
+        </section>
+
+        <section class="section">
+            <div class="main" style="height:500px;background-color:transparent" optionKey="effect3"></div>
+        </section>
+
+        <section class="section">
+            <h4>ECharts VS Excel</h4>
+            <p class="fragment">
+                <small>虽说Excel输出的图表毫无交互性可言，但其丰富的图表类型和配置项，简单易用，无疑是最常用的制作数据统计的工具。那看看ECharts和Excel都支持哪些图表类型？</small>
+            </p>
+            <div>
+                <table style="margin-top:20px;">
+                    <thead>
+                        <tr><th>#</th><th>ECharts</th><th>Excel</th></tr>
+                    </thead>
+                    <tbody>
+                        <tr><td>柱状图</td><td>Yes</td><td>Yes</td></tr>
+                        <tr><td>条形图</td><td>Yes</td><td>Yes</td></tr>
+                        <tr><td>折线图</td><td>Yes</td><td>Yes</td></tr>
+                        <tr><td>面积图</td><td>Yes</td><td>Yes</td></tr>
+                        <tr><td>散点图</td><td>Yes</td><td>Yes</td></tr>
+                        <tr><td>气泡图</td><td>Yes</td><td>Yes</td></tr>
+                        <tr><td>K线图</td><td>Yes</td><td>Yes</td></tr>
+                        <tr><td>饼图</td><td>Yes</td><td>Yes</td></tr>
+                        <tr><td>环形图</td><td>Yes</td><td>Yes</td></tr>
+                        <tr><td>雷达图</td><td>Yes</td><td>Yes</td></tr>
+                        <tr><td>力导布局图</td><td>Yes</td><td class='error'>No</td></tr>
+                        <tr><td>和弦图</td><td>Yes</td><td class='error'>No</td></tr>
+                        <tr><td>曲面图</td><td class='error'>No</td><td>Yes</td></tr>
+                        <tr><td>地图</td><td>Yes</td><td class='error'>No</td></tr>
+                        <tr><td>事件河流图</td><td>Yes</td><td class='error'>No</td></tr>
+                    </tbody>
+                </table>
+            </div>
+        </section>
+
+        <section class="section">
+            <h4>ECharts VS Highcharts (1)</h4>
+            <p class="fragment">
+                <small>业界有无数js图表库，不乏优秀的代表，如chartjs，amCharts，FusionCharts，flot，gRaphaël等等。有的是免费甚至开源的，有的则是商业的，百度一下就能找到他们。</small>
+                <br/>
+                <small>无法跟他们一一对比，在这选择了知名度很高的Highcharts，一个优秀，成熟的商业图表库。
+                    <br/>先看看ECharts和Highcharts都支持哪些图表类型？
+                </small>
+            </p>
+            <div>
+                <table>
+                    <thead>
+                        <tr><th>#</th><th>ECharts</th><th>Highcharts</th></tr>
+                    </thead>
+                    <tbody>
+                        <tr><td>柱状图（条形图）</td><td>Yes</td><td>Yes</td></tr>
+                        <tr><td>折线图（面积图）</td><td>Yes</td><td>Yes</td></tr>
+                        <tr><td>饼图（环形图）</td><td>Yes</td><td>Yes</td></tr>
+                        <tr><td>散点图（气泡图）</td><td>Yes</td><td>Yes</td></tr>
+                        <tr><td>雷达图</td><td>Yes</td><td>Yes</td></tr>
+                        <tr><td>K线图</td><td>Yes</td><td class='success'>Highstock</td></tr>
+                        <tr><td>力导布局图</td><td>Yes</td><td class='error'>No</td></tr>
+                        <tr><td>和弦图</td><td>Yes</td><td class='error'>No</td></tr>
+                        <tr><td>地图</td><td>Yes</td><td class='success'>Highmap</td></tr>
+                        <tr><td>事件河流图</td><td>Yes</td><td class='error'>No</td></tr>
+                        <tr><td>特色图表（如仪表盘）</td><td>Yes</td><td>Yes</td></tr>
+                    </tbody>
+                </table>
+            </div>
+        </section>
+
+        <section class="section">
+            <h4>ECharts VS Highcharts (2)</h4>
+            <p class="fragment">
+                <small>再来看看ECharts和Highcharts都有哪些特性？</small>
+            </p>
+            <div>
+                <table style="width:105%">
+                    <thead>
+                        <tr><th>#</th><th>ECharts</th><th>Highcharts</th></tr>
+                    </thead>
+                    <tbody>
+                        <tr><td>拖拽重计算</td><td>Yes</td><td class='error'>No</td></tr>
+                        <tr><td>数据视图</td><td>Yes</td><td class='error'>No</td></tr>
+                        <tr><td>动态类型切换</td><td>Yes</td><td class='error'>No</td></tr>
+                        <tr><td>值域漫游</td><td>Yes</td><td class='error'>No</td></tr>
+                        <tr><td>大规模散点</td><td>Yes</td><td class='error'>No</td></tr>
+                        <tr><td>炫光特效</td><td>Yes</td><td class='error'>No</td></tr>
+                        <tr><td>多图联动</td><td>Yes</td><td class='error'>No</td></tr>
+                        <tr><td>数据区域缩放</td><td>Yes</td><td>Yes</td></tr>
+                        <tr><td>图例开关</td><td>Yes</td><td>Yes</td></tr>
+                        <tr><td>多维度堆积</td><td>Yes</td><td>Yes</td></tr>
+                        <tr><td>混搭</td><td>Yes</td><td>Yes</td></tr>
+                        <tr><td>图片导出</td><td>Yes</td><td>Yes</td></tr>
+                        <tr>
+                            <td>License<br/>&amp;<br/>Pricing</td>
+                            <td class='success'>Baidu<br/><a href="https://github.com/ecomfe/echarts/blob/master/LICENSE.txt" target="_blank">BSD</a><br/>Free</td>
+                            <td class='success'>Non-commercial<br/>free under CC3.0<br/>Commercial licenses<br/>$90~$3600</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </section>
+
+        <section class="section">
+            <h4>这就是ECharts</h4>
+            <p class="fragment">
+                <small>我们只是尽我们所能为你呈现数据<span style="color:#f50">真实</span>的一面，</small>
+            </p>
+            <p class="fragment">
+                <small>并且提供了一些直观、易用的交互方式以方便你对所展现数据进行<span style="color:#f50">挖掘、提取、修正或整合</span>，<br/><strong>（拖拽重计算、数据视图）</strong></small>
+            </p>
+            <p class="fragment">
+                <small>让你可以更加<span style="color:#f50">专注</span>于你所关心地方，无论是系列选择、区域缩放还是数值筛选，<br/><strong>（图例开关、数据区域缩放、值域漫游）</strong></small>
+            </p>
+            <p class="fragment">
+                <small>让你可以有<span style="color:#f50">不同的方式解读同样的数据</span>。<br/><strong>（动态类型切换，多维度堆积，多图联动，混搭）</strong></small>
+            </p>
+            <hr/>
+            <div class="fragment">
+                <p>
+                    <small><strong>重新定义数据图表的时候到了</strong>，浏览ECharts所输出的图表，你不再只是个“读者”，你可以参与其中。
+                        <br/><br/>这就是<a href="http://ecomfe.github.io/echarts/" target="_blank" sdtyle="margin:0">ECharts</a>，我们正在打造的一个拥有<strong>互动图形用户界面（GUI）</strong>的数据可视化工具。</small>
+            </p>
+            </div>
+        </section>
+
+        <section class="section">
+            <h4>致谢</h4>
+            <p class="fragment"><small>
+                <a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>的发展离不开他们的卓越贡献：<br/>
+                <a href="http://weibo.com/kenerlinfeng" target="_blank">@Kener-林峰</a>
+                <a href="http://weibo.com/pissang" target="_blank">@pissang</a>
+                <a href="http://weibo.com/errorrik" target="_blank">@errorrik</a>
+                <a href="http://weibo.com/forain" target="_blank">@diysimon</a>
+                <a href="http://weibo.com/u/2113446991" target="_blank">@宿爽</a>
+                <a href="http://weibo.com/u/2810393271" target="_blank">@邓红启</a>
+                <a href="http://weibo.com/wind108369" target="_blank">@杨骥wind108369</a>
+                <a href="http://weibo.com/loutongbing" target="_blank">@娄同兵</a>
+            </small></p><br/>
+            <p class="fragment">
+                <small>以及他们的摇旗呐喊、推波助澜、煽风点火...<br/>
+                <a href="http://weibo.com/taiyun" target="_blank">@cloud_wei</a>
+                <a href="http://weibo.com/u/2042635201" target="_blank">@李湛lizhan</a>
+                <a href="http://weibo.com/wfsr" target="_blank">@i我佛山人</a>
+                <a href="http://weibo.com/firede" target="_blank">@赵雷_Firede</a>
+                <a href="http://weibo.com/zhouyummy" target="_blank">@Yummy_zhou</a>
+            </small></p><br/>
+            <p class="fragment">
+                <small>还有，能得到你们的支持，真好...<br/>
+                <a href="http://weibo.com/u/2006785117" target="_blank">@财财某</a>
+                <a href="http://weibo.com/shenhaolaoshi" target="_blank">@沈浩老师</a>
+                <a href="http://weibo.com/cosname" target="_blank">@统计之都</a>
+                <a href="http://weibo.com/u/1494921451" target="_blank">@大数据文摘</a>
+            </small></p><br/>
+            <p class="fragment">
+                <small>当然，我们期待你的<a href="https://github.com/ecomfe/echarts" target="_blank">加入</a>~</small>
+            </p>
+        </section>
+
+        <section class="section">
+        <img src="../asset/img/echarts-logo2.png" alt="ECharts" style="width:100px;margin-top:50px;">
+            <h1 style="padding:50px 0 20px;">- THE END -</h1>
+            <p>Thank you</p>
+            <br/>
+            <div>
+                <small>Created by <a href="http://weibo.com/kenerlinfeng" target="_blank">@Kener-林峰</a></small>
+            </div>
+            
+        </section>
+    </div>
+    <script src="./js/why-echarts-m.js"></script>
+</body>
+</html>