Browse Source

代码修改

yeshijie 7 years ago
parent
commit
7dba2650e3
23 changed files with 3621 additions and 0 deletions
  1. 31 0
      patient-co-manage/redis-cache/src/main/webapp/static/develop/browser/lib/echarts-2.2.7/doc/slide/plugin/highlight/highlight.js
  2. 97 0
      patient-co-manage/redis-cache/src/main/webapp/static/develop/browser/lib/echarts-2.2.7/doc/slide/plugin/markdown/example.html
  3. 29 0
      patient-co-manage/redis-cache/src/main/webapp/static/develop/browser/lib/echarts-2.2.7/doc/slide/plugin/markdown/example.md
  4. 190 0
      patient-co-manage/redis-cache/src/main/webapp/static/develop/browser/lib/echarts-2.2.7/doc/slide/plugin/markdown/markdown.js
  5. 37 0
      patient-co-manage/redis-cache/src/main/webapp/static/develop/browser/lib/echarts-2.2.7/doc/slide/plugin/markdown/marked.js
  6. 13 0
      patient-co-manage/redis-cache/src/main/webapp/static/develop/browser/lib/echarts-2.2.7/doc/slide/plugin/multiplex/client.js
  7. 56 0
      patient-co-manage/redis-cache/src/main/webapp/static/develop/browser/lib/echarts-2.2.7/doc/slide/plugin/multiplex/index.js
  8. 50 0
      patient-co-manage/redis-cache/src/main/webapp/static/develop/browser/lib/echarts-2.2.7/doc/slide/plugin/multiplex/master.js
  9. 57 0
      patient-co-manage/redis-cache/src/main/webapp/static/develop/browser/lib/echarts-2.2.7/doc/slide/plugin/notes-server/client.js
  10. 59 0
      patient-co-manage/redis-cache/src/main/webapp/static/develop/browser/lib/echarts-2.2.7/doc/slide/plugin/notes-server/index.js
  11. 142 0
      patient-co-manage/redis-cache/src/main/webapp/static/develop/browser/lib/echarts-2.2.7/doc/slide/plugin/notes-server/notes.html
  12. 253 0
      patient-co-manage/redis-cache/src/main/webapp/static/develop/browser/lib/echarts-2.2.7/doc/slide/plugin/notes/notes.html
  13. 100 0
      patient-co-manage/redis-cache/src/main/webapp/static/develop/browser/lib/echarts-2.2.7/doc/slide/plugin/notes/notes.js
  14. 39 0
      patient-co-manage/redis-cache/src/main/webapp/static/develop/browser/lib/echarts-2.2.7/doc/slide/plugin/postmessage/example.html
  15. 42 0
      patient-co-manage/redis-cache/src/main/webapp/static/develop/browser/lib/echarts-2.2.7/doc/slide/plugin/postmessage/postmessage.js
  16. 44 0
      patient-co-manage/redis-cache/src/main/webapp/static/develop/browser/lib/echarts-2.2.7/doc/slide/plugin/print-pdf/print-pdf.js
  17. 39 0
      patient-co-manage/redis-cache/src/main/webapp/static/develop/browser/lib/echarts-2.2.7/doc/slide/plugin/remotes/remotes.js
  18. 196 0
      patient-co-manage/redis-cache/src/main/webapp/static/develop/browser/lib/echarts-2.2.7/doc/slide/plugin/search/search.js
  19. 256 0
      patient-co-manage/redis-cache/src/main/webapp/static/develop/browser/lib/echarts-2.2.7/doc/slide/plugin/zoom-js/zoom.js
  20. 674 0
      patient-co-manage/redis-cache/src/main/webapp/static/develop/browser/lib/echarts-2.2.7/doc/slide/whyEcharts-en.html
  21. 271 0
      patient-co-manage/redis-cache/src/main/webapp/static/develop/browser/lib/echarts-2.2.7/doc/slide/whyEcharts-m-en.html
  22. 269 0
      patient-co-manage/redis-cache/src/main/webapp/static/develop/browser/lib/echarts-2.2.7/doc/slide/whyEcharts-m.html
  23. 677 0
      patient-co-manage/redis-cache/src/main/webapp/static/develop/browser/lib/echarts-2.2.7/doc/slide/whyEcharts.html

File diff suppressed because it is too large
+ 31 - 0
patient-co-manage/redis-cache/src/main/webapp/static/develop/browser/lib/echarts-2.2.7/doc/slide/plugin/highlight/highlight.js


+ 97 - 0
patient-co-manage/redis-cache/src/main/webapp/static/develop/browser/lib/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>

+ 29 - 0
patient-co-manage/redis-cache/src/main/webapp/static/develop/browser/lib/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

+ 190 - 0
patient-co-manage/redis-cache/src/main/webapp/static/develop/browser/lib/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();
})();

File diff suppressed because it is too large
+ 37 - 0
patient-co-manage/redis-cache/src/main/webapp/static/develop/browser/lib/echarts-2.2.7/doc/slide/plugin/markdown/marked.js


+ 13 - 0
patient-co-manage/redis-cache/src/main/webapp/static/develop/browser/lib/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');
	});
}());

+ 56 - 0
patient-co-manage/redis-cache/src/main/webapp/static/develop/browser/lib/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 );

+ 50 - 0
patient-co-manage/redis-cache/src/main/webapp/static/develop/browser/lib/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 );
}());

+ 57 - 0
patient-co-manage/redis-cache/src/main/webapp/static/develop/browser/lib/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);
	} );
}());

+ 59 - 0
patient-co-manage/redis-cache/src/main/webapp/static/develop/browser/lib/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" );

+ 142 - 0
patient-co-manage/redis-cache/src/main/webapp/static/develop/browser/lib/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>

+ 253 - 0
patient-co-manage/redis-cache/src/main/webapp/static/develop/browser/lib/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>

+ 100 - 0
patient-co-manage/redis-cache/src/main/webapp/static/develop/browser/lib/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 };
})();

+ 39 - 0
patient-co-manage/redis-cache/src/main/webapp/static/develop/browser/lib/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>

+ 42 - 0
patient-co-manage/redis-cache/src/main/webapp/static/develop/browser/lib/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);
}());

+ 44 - 0
patient-co-manage/redis-cache/src/main/webapp/static/develop/browser/lib/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();
} );

+ 39 - 0
patient-co-manage/redis-cache/src/main/webapp/static/develop/browser/lib/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);

File diff suppressed because it is too large
+ 196 - 0
patient-co-manage/redis-cache/src/main/webapp/static/develop/browser/lib/echarts-2.2.7/doc/slide/plugin/search/search.js


+ 256 - 0
patient-co-manage/redis-cache/src/main/webapp/static/develop/browser/lib/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;
		}
	}
})();

+ 674 - 0
patient-co-manage/redis-cache/src/main/webapp/static/develop/browser/lib/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>

+ 271 - 0
patient-co-manage/redis-cache/src/main/webapp/static/develop/browser/lib/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>

+ 269 - 0
patient-co-manage/redis-cache/src/main/webapp/static/develop/browser/lib/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>

File diff suppressed because it is too large
+ 677 - 0
patient-co-manage/redis-cache/src/main/webapp/static/develop/browser/lib/echarts-2.2.7/doc/slide/whyEcharts.html