<html lang="en">

<meta charset="utf-8">

<title>ECharts</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta name="description" content="ECharts">

<meta name="author" content="linzhifeng@baidu.com">

<script src="../asset/js/esl/esl.js"></script>

<script src="../asset/js/codemirror.js"></script>

<script src="../asset/js/javascript.js"></script>

<link href="../asset/css/bootstrap.css" rel="stylesheet">

<link href="../asset/css/bootstrap-responsive.css" rel="stylesheet">

<link href="../asset/css/codemirror.css" rel="stylesheet">

<link href="../asset/css/monokai.css" rel="stylesheet">

<link href="../asset/css/echartsHome.css" rel="stylesheet">

<link rel="shortcut icon" href="../asset/ico/favicon.png">

<!-- NAVBAR

<div class="navbar navbar-inverse navbar-fixed-top">

<div class="navbar-inner">

<div class="container">

<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

<a class="brand" href="../../index.html">ECharts</a>

<div class="nav-collapse collapse">

<a id="forkme_banner" href="https://github.com/ecomfe/echarts">View on GitHub</a>

<ul class="nav">

<li><a href="../../index.html"><i class="icon-home icon-white"></i> Home</a></li>

<li class="active"><a href="../example.html" class="active">Example</a></li>

<li><a href="../doc.html" >API &amp; Doc</a></li>

<li class="dropdown">

<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-download-alt icon-white"></i>Download <b class="caret"></b></a>

<ul class="dropdown-menu">

<li><a id="last-release-link" href=""> </a></li>

<li><a href="https://github.com/ecomfe/echarts/archive/master.zip">ZIP (Latest)</a></li>

</ul>

</li>

<li class="dropdown">

<a href="#" class="dropdown-toggle" data-toggle="dropdown">Link <b class="caret"></b></a>

<ul class="dropdown-menu">

<li><a href="https://github.com/ecomfe" target="_blank">Ecom-FE</a></li>

<li><a href="http://fe.baidu.com/doc/ecom/tech/topic/dv/index.html" target="_blank">Data Visualization</a></li>

<li class="divider"></li>

<!--li class="nav-header">Library</li-->

<li><a href="http://ecomfe.github.io/zrender/index.html" target="_blank">ZRender</a></li>

</ul>

</li>

</ul>

</div><!--/.nav-collapse -->

</div><!-- /.container -->

</div><!-- /.navbar-inner -->

</div><!-- /.navbar-wrapper -->

<div class="container-fluid">

<div class="row-fluid">

<div id="sidebar-code" class="span4">

<div class="well sidebar-nav">

<div class="nav-header"><a href="#" onclick="autoResize()" class="icon-resize-full" id ="icon-resize" ></a>option</div>

<textarea id="code" name="code">

option = {

tooltip : {

trigger: 'axis'

},

legend: {

data:['最高','最低']

},

toolbox: {

show : true,

feature : {

mark : true,

dataView : {readOnly:false},

magicType:['line', 'bar'],

restore : true,

saveAsImage : true

}

},

calculable : true,

dataZoom : {

show : true,

realtime : true,

start : 40,

end : 60

},

xAxis : [

{

type : 'category',

boundaryGap : true,

data : function(){

var list = [];

for (var i = 1; i <= 30; i++) {

list.push('2013-03-' + i);

}

return list;

}()

}

],

yAxis : [

{

type : 'value',

splitArea : {show : true}

}

],

series : [

{

name:'最高',

type:'line',

data:function(){

var list = [];

for (var i = 1; i <= 30; i++) {

list.push(Math.round(Math.random()* 30) + 30);

}

return list;

}()

},

{

name:'最低',

type:'bar',

data:function(){

var list = [];

for (var i = 1; i <= 30; i++) {

list.push(Math.round(Math.random()* 10));

}

return list;

}()

}

]

};

var ecConfig = require('echarts/config');

function eConsole(param) {

var mes = '【' + param.type + '】';

if (typeof param.seriesIndex != 'undefined') {

mes += ' seriesIndex : ' + param.seriesIndex;

mes += ' dataIndex : ' + param.dataIndex;

}

if (param.type == 'hover') {

document.getElementById('hover-console').innerHTML = 'Event Console : ' + mes;

}

else {

document.getElementById('console').innerHTML = mes;

}

console.log(param);

}

/*

REFRESH: 'refresh',

RESTORE: 'restore',

RESIZE: 'resize',

CLICK: 'click',

HOVER: 'hover',

MOUSEWHEEL: 'mousewheel',

// -------业务交互逻辑

DATA_CHANGED: 'dataChanged',

DATA_ZOOM: 'dataZoom',

DATA_RANGE: 'dataRange',

LEGEND_SELECTED: 'legendSelected',

MAP_SELECTED: 'mapSelected',

PIE_SELECTED: 'pieSelected',

MAGIC_TYPE_CHANGED: 'magicTypeChanged',

DATA_VIEW_CHANGED: 'dataViewChanged',

MAP_ROAM : 'mapRoam',

*/

myChart.on(ecConfig.EVENT.CLICK, eConsole);

//myChart.on(ecConfig.EVENT.HOVER, eConsole);

myChart.on(ecConfig.EVENT.DATA_ZOOM, eConsole);

myChart.on(ecConfig.EVENT.LEGEND_SELECTED, eConsole);

myChart.on(ecConfig.EVENT.MAGIC_TYPE_CHANGED, eConsole);

myChart.on(ecConfig.EVENT.DATA_VIEW_CHANGED, eConsole);

</textarea>

</div><!--/.well -->

</div><!--/span-->

<div id="graphic" class="span8">

<div id="main" class="main"></div>

<div>

<button onclick="refresh(true)">Refresh ~</button>

<span id='wrong-message' style="color:red"></span>

<span id='hover-console' style="color:#1e90ff"></span>

<span id='console' style="color:#1e90ff">Event Console</span>

</div>

</div><!--/span-->

</div><!--/row-->

<hr>

<!-- FOOTER -->

<footer>

<p class="pull-right"><a href="#">Back to top</a></p>

<p>&copy; 2014 <a href="http://efe.baidu.com" target="_blank">EFE</a> &middot; <a href="https://github.com/ecomfe/echarts/blob/master/LICENSE.txt" target="_blank">License</a> &middot; <a href="../changelog.html" target="_blank">Changelog</a></p>

</footer>

</div><!--/.fluid-container-->

<script src="../asset/js/jquery.js"></script>

<script src="../asset/js/bootstrap-transition.js"></script>

<script src="../asset/js/bootstrap-alert.js"></script>

<script src="../asset/js/bootstrap-modal.js"></script>

<script src="../asset/js/bootstrap-dropdown.js"></script>

<script src="../asset/js/bootstrap-scrollspy.js"></script>

<script src="../asset/js/bootstrap-tab.js"></script>

<script src="../asset/js/bootstrap-tooltip.js"></script>

<script src="../asset/js/bootstrap-popover.js"></script>

<script src="../asset/js/bootstrap-button.js"></script>

<script src="../asset/js/bootstrap-collapse.js"></script>

<script src="../asset/js/bootstrap-carousel.js"></script>

<script src="../asset/js/bootstrap-typeahead.js"></script>

<script src="../asset/js/echartsExample.js"></script>