wangdaping
/
wp


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974
							<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="ECharts">
    <meta name="author" content="kener.linfeng@gmail.com">
    <title>ECharts · Example</title>

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

    <link href="./asset/css/font-awesome.min.css" rel="stylesheet">
    <link href="./asset/css/bootstrap.css" rel="stylesheet">
    <link href="./asset/css/carousel.css" rel="stylesheet">
    <link href="./asset/css/echartsHome.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
        .affix {
            width:160px;
        }
        .affix li {
            list-style-type : none;
            height : 35px;
            line-height:35px;
            vertical-align:middle;
        }
        ul.slides li{
            width : 33.3%;
            overflow:hidden;
            float : left;
            border:0px solid #ccc;
            margin: 15px 0;
            list-style-type : none;
            position:relative;
        }
        ul.slides li a {
            padding:5px;
            display:block;
        }
        ul.slides li a strong{
            font-size:15px;
            color : #1e90ff;
        }
        ul.slides li a:hover {
            background-color:#eee;
            text-decoration:none;
        }
        ul.slides li img {
            width:60%;
        }
        ul.slides li span {
            color:#666;
            width:36%;
            vertical-align:top;
            display:inline-block;
            *zoom:1;
        }
        .col-md-10 h3 {
            clear:both;
            margin:10px 0;
            padding-bottom:10px;
            border-bottom:1px solid #ccc;
        }
        .col-md-10 h3 a {
            display:inline-block;
            *zoom:1;
            padding-top:63px;
        }
        #chartsTypeNav ul li {
            transition: background-color 0.3s;
            -moz-transition: background-color 0.3s;
            -webkit-transition: background-color 0.3s;
            -o-transition: background-color 0.3s;
            padding-left:10px;
        }
    </style>
</head>

<body>
    <!-- Fixed navbar -->
    <div class="navbar navbar-default navbar-fixed-top" role="navigation" id="head"></div>

    <div class="container" style="padding-top:10px;">
        <div class="row-fluid">
            <div class="col-md-2">
                <div class = 'affix' style="margin-left:-20px;" id="chartsTypeNav">
                    <ul style="padding:5px 0;">
                        <li><i class="ec-icon ec-icon-line"></i> <a href="#line">折线（面积）图</a></li>
                        <li><i class="ec-icon ec-icon-bar"></i> <a href="#bar">柱状（条形）图</a></li>
                        <li><i class="ec-icon ec-icon-scatter"></i> <a href="#scatter">散点（气泡）图</a></li>
                        <li><i class="ec-icon ec-icon-k"></i> <a href="#k">K线图</a></li>
                        <li><i class="ec-icon ec-icon-pie"></i> <a href="#pie">饼（圆环）图</a></li>
                        <li><i class="ec-icon ec-icon-radar"></i> <a href="#radar">雷达（面积）图</a></li>
                        <li><i class="ec-icon ec-icon-chord"></i> <a href="#chord">和弦图</a></li>
                        <li><i class="ec-icon ec-icon-force"></i> <a href="#force">力导向布局图</a></li>
                        <li><i class="ec-icon ec-icon-map"></i> <a href="#map">地图</a></li>
                        <li><i class="ec-icon ec-icon-gauge"></i> <a href="#gauge">仪表盘</a></li>
                        <li><i class="ec-icon ec-icon-funnel"></i> <a href="#funnel">漏斗图</a></li>
                        <li><i class="ec-icon ec-icon-heatmap"></i> <a href="#heatmap">热力图</a></li>
                        <li><i class="ec-icon ec-icon-eventRiver"></i> <a href="#eventRiver">事件河流图</a></li>
                        <li><i class="ec-icon ec-icon-venn"></i> <a href="#venn">韦恩图</a></li>
                        <li><i class="ec-icon ec-icon-treemap"></i> <a href="#treemap">矩形树图</a></li>
                        <li><i class="ec-icon ec-icon-tree"></i> <a href="#tree">树图</a></li>
                        <li><i class="ec-icon ec-icon-wordCloud"></i> <a href="#wordCloud">字符云</a></li>
                        <li><i class="ec-icon ec-icon-mix"></i> <a href="#mix">混搭</a></li>
                        <li><i class="ec-icon ec-icon-component"></i> <a href="#component">组件</a></li>
                        <li><i class="ec-icon ec-icon-other"></i> <a href="#other">其他</a></li>
                        <li><i class="ec-icon ec-icon-theme"></i> <a href="#theme">主题</a></li>
                        <li><i class="ec-icon ec-icon-topic"></i> <a href="#topic">专题</a></li>
                    </ul>
                </div>
            </div>
            <div class="col-md-10">
                <p style="margin:10px 0 -30px 0">
                    <a href="./start.html" target="_blank" style="margin-right: 50px;">入门教程 ( Getting started ) »</a>
                    <a href="https://github.com/ecomfe/echarts/issues?page=1&state=open" target="_blank">Any feedback or question ? »</a>
                </p>
                <div>
                    <h3>折线图<a name="line"> </a></h3>
                    <div class="section">
                        <div class="thumb3">
                          <ul class="slides">
                            <li data-thumb="asset/img/example/line1.png">
                              <a href="example/line1.html"><img src="asset/img/example/line1.png" >
                              <span><strong>标准折线图</strong><br/>标注，标线，个性化线条阴影</span></a>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/line2.html"><img src="asset/img/example/cache.png">
                              <span><strong>堆积折线图</strong><br/>任意系列多维度堆积</span></a>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/line5.html"><img src="asset/img/example/cache.png">
                              <span><strong>标准折线图</strong><br/>横纵坐标轴互换，平滑曲线</span></a>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/line3.html"><img src="asset/img/example/cache.png">
                              <span><strong>标准面积图</strong><br/>填充样式，平滑曲线<br/></span></a>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/line4.html"><img src="asset/img/example/cache.png">
                              <span><strong>堆积面积图</strong><br/>任意系列多维度堆积</span></a>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/line7.html"><img src="asset/img/example/cache.png">
                              <span><strong>不等距折线图</strong><br/>双数值轴</span></a>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/line8.html"><img src="asset/img/example/cache.png">
                              <span><strong>不等距折线图</strong><br/>时间坐标轴折线图</span></a>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/line6.html"><img src="asset/img/example/cache.png">
                              <span><strong>面积图</strong><br/>反向数值轴</span></a>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/line.html"><img src="asset/img/example/cache.png">
                              <span><strong>折线图</strong><br/>多级控制，个性化，填充、线条、拐点样式等</span></a>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/line9.html"><img src="asset/img/example/cache.png">
                              <span><strong>对数轴</strong><br/>log数轴</span></a>
                            </li><!--/li-->
                          </ul>
                        </div>
                    </div>
                </div>
                <div>
                    <h3>柱状图<a name="bar"> </a></h3>
                    <div class="section">
                        <div class="thumb4">
                          <ul class="slides">
                            <li data-thumb="asset/img/example/bar1.png">
                              <a href="example/bar1.html"><img src="asset/img/example/bar1.png">
                              <span><strong>标准柱状图</strong><br/>标注，标线</span></a>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/bar2.html"><img src="asset/img/example/cache.png">
                              <span><strong>堆积柱状图</strong><br/>标线，任意系列多维度堆积</span></a>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/bar10.html"><img src="asset/img/example/cache.png">
                              <span><strong>温度计式图表</strong><br/>个性化样式，文本标签显示</span></a>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/bar7.html"><img src="asset/img/example/cache.png">
                              <span><strong>组成瀑布图</strong><br/>个性化样式，文本标签显示，透明数据驱动样式</span></a>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/bar6.html"><img src="asset/img/example/cache.png">
                              <span><strong>变化瀑布图</strong><br/>个性化样式，文本标签显示，透明数据驱动样式</span></a>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/bar12.html"><img src="asset/img/example/cache.png">
                              <span><strong>多系列层叠</strong><br/>个性化样式</span></a>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/bar3.html"><img src="asset/img/example/cache.png">
                              <span><strong>标准条形图</strong><br/>横纵坐标轴互换</span></a>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/bar4.html"><img src="asset/img/example/cache.png">
                              <span><strong>堆积条形图</strong><br/>任意系列多维度堆积</span></a>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/bar9.html"><img src="asset/img/example/cache.png">
                              <span><strong>多维条形图</strong><br/>个性化样式，文本标签显示，透明数据驱动样式</span></a>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/bar5.html"><img src="asset/img/example/cache.png">
                              <span><strong>旋风条形图</strong><br/>正负值混合</span></a>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/bar8.html"><img src="asset/img/example/cache.png">
                              <span><strong>旋风条形图</strong><br/>正负值混合，交错正负轴标签</span></a>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/bar13.html"><img src="asset/img/example/cache.png">
                              <span><strong>不等距柱形图</strong><br/>双数值轴</span></a>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/bar11.html"><img src="asset/img/example/cache.png">
                              <span><strong>搭配时间轴</strong><br/>时空维度的数据展现</span></a>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/bar14.html"><img src="asset/img/example/cache.png">
                              <span><strong>彩虹柱形图</strong><br/>个性化</span></a>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/bar15.html"><img src="asset/img/example/cache.png">
                              <span><strong>多系列彩虹柱形图</strong><br/>个性化</span></a>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/bar.html"><img src="asset/img/example/cache.png">
                              <span><strong>柱状图</strong><br/>个性化，柱形宽度，填充、高亮、文本样式等</span></a>
                            </li><!--/li-->
                          </ul>
                        </div>
                    </div>
                </div>
                <div>
                    <h3>散点图<a name="scatter"> </a></h3>
                    <div class="section">
                        <div class="thumb4">
                          <ul class="slides">
                            <li data-thumb="asset/img/example/scatter1.png">
                              <a href="example/scatter1.html"><img src="asset/img/example/scatter1.png">
                              <span><strong>标准散点图</strong><br/>标注，标线</span></a>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                               <a href="example/scatter2.html"><img src="asset/img/example/cache.png">
                              <span><strong>标准气泡图</strong><br/>气泡大小计算</span></a>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                               <a href="example/scatter3.html"><img src="asset/img/example/cache.png">
                              <span><strong>大规模散点图</strong><br/>启用设置</span></a>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/scatter5.html"><img src="asset/img/example/cache.png">
                              <span><strong>类目散点图</strong><br/>搭配数据区域缩放</span></a>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/scatter6.html"><img src="asset/img/example/cache.png">
                              <span><strong>时间坐标</strong><br/>时间坐标轴</span></a>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/scatter4.html"><img src="asset/img/example/cache.png">
                              <span><strong>搭配时间轴</strong><br/>时空维度数据展现，Gapminder</span></a>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/dataRange1.html"><img src="asset/img/example/cache.png">
                              <span><strong>搭配值域漫游</strong><br/>基本使用</span></a>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/scatter.html"><img src="asset/img/example/cache.png">
                              <span><strong>散点图</strong><br/>多级控制，个性化图形样式，大小等</span></a>
                            </li><!--/li-->
                          </ul>
                        </div>
                    </div>
                </div>
                <div>
                    <h3>K线图<a name="k"> </a></h3>
                    <div class="section">
                        <div class="thumb4">
                          <ul class="slides">
                            <li data-thumb="asset/img/example/k1.png">
                              <a href="example/k1.html"><img src="asset/img/example/k1.png">
                              <span><strong>标准K线图</strong><br/>标注，标线，数据区域缩放</span></a>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/k.html"><img src="asset/img/example/cache.png">
                              <span><strong>K线图</strong><br/>多级控制，个性化，柱形阴阳图形样式等</span></a>
                            </li><!--/li-->
                          </ul>
                        </div>
                    </div>
                </div>
                <div>
                    <h3>饼图<a name="pie"> </a></h3>
                    <div class="section">
                        <div class="thumb4">
                            <ul class="slides">
                                <li data-thumb="asset/img/example/cache.png">
                                  <a href="example/pie1.html"><img src="asset/img/example/cache.png">
                                  <span><strong>标准饼图</strong><br/>中心，半径设置</span></a>
                                </li><!--/li-->
                                <li data-thumb="asset/img/example/cache.png">
                                  <a href="example/pie2.html"><img src="asset/img/example/cache.png">
                                  <span><strong>标准环形图</strong><br/>中心，半径设置，文本标签显示</span></a>
                                </li><!--/li-->
                                <li data-thumb="asset/img/example/cache.png">
                                  <a href="example/pie3.html"><img src="asset/img/example/cache.png">
                                  <span><strong>嵌套饼图</strong><br/>多个饼图，中心，半径设置，文本标签显示</span></a>
                                </li><!--/li-->
                                <li data-thumb="asset/img/example/cache.png">
                                  <a href="example/pie4.html"><img src="asset/img/example/cache.png">
                                  <span><strong>南丁格尔玫瑰图</strong><br/>半径、面积玫瑰图样式</span></a>
                                </li><!--/li-->
                                <li data-thumb="asset/img/example/cache.png">
                                  <a href="example/pie5.html"><img src="asset/img/example/cache.png">
                                  <span><strong>环形图</strong><br/>信息图样式，文本标签技巧</span></a>
                                </li><!--/li-->
                                <li data-thumb="asset/img/example/cache.png">
                                  <a href="example/pie6.html"><img src="asset/img/example/cache.png">
                                  <span><strong>环形图</strong><br/>信息图样式，额外内容添加，文本标签技巧</span></a>
                                </li><!--/li-->
                                <li data-thumb="asset/img/example/cache.png">
                                  <a href="example/pie7.html"><img src="asset/img/example/cache.png">
                                  <span><strong>搭配时间轴</strong><br/>时空维度数据展现</span></a>
                                </li><!--/li-->
                                <li data-thumb="asset/img/example/cache.png">
                                  <a href="example/lasagna.html"><img src="asset/img/example/cache.png">
                                  <span><strong>千层饼</strong><br/>多层嵌套环形图</span></a>
                                </li><!--/li-->
                                <li data-thumb="asset/img/example/cache.png">
                                  <a href="example/pie.html"><img src="asset/img/example/cache.png">
                                  <span><strong>饼图</strong><br/>多级控制，个性化填充、标签文本、视觉引导线样式等</span></a>
                                </li><!--/li-->
                            </ul>
                        </div>
                      </div>
                </div>
                <div>
                    <h3>雷达图<a name="radar"> </a></h3>
                    <div class="section">
                        <div class="thumb4">
                            <ul class="slides">
                                <li data-thumb="asset/img/example/cache.png">
                                  <a href="example/radar1.html"><img src="asset/img/example/cache.png">
                                  <span><strong>标准雷达图</strong><br/>极坐标设置</span></a>
                                </li><!--/li-->
                                <li data-thumb="asset/img/example/cache.png">
                                  <a href="example/radar2.html"><img src="asset/img/example/cache.png">
                                  <span><strong>标准填充雷达图</strong><br/>极坐标设置，填充样式</span></a>
                                </li><!--/li-->
                                <li data-thumb="asset/img/example/cache.png">
                                  <a href="example/radar3.html"><img src="asset/img/example/cache.png">
                                  <span><strong>多雷达图</strong><br/>多个极坐标</span></a>
                                </li><!--/li-->
                                <li data-thumb="asset/img/example/cache.png">
                                  <a href="example/wormhole.html"><img src="asset/img/example/cache.png">
                                  <span><strong>虫洞</strong><br/>多层嵌套雷达图</span></a>
                                </li><!--/li-->
                                <li data-thumb="asset/img/example/cache.png">
                                  <a href="example/radar.html"><img src="asset/img/example/cache.png">
                                  <span><strong>雷达图</strong><br/>多级控制，个性化线条，拐点，填充样式</span></a>
                                </li><!--/li-->
                            </ul>
                        </div>
                    </div>
                </div>
                <div>
                    <h3>和弦图<a name="chord"> </a></h3>
                    <div class="section">
                        <div class="thumb3">
                            <ul class="slides">
                                <li data-thumb="asset/img/example/cache.png">
                                  <a href="example/chord1.html"><img src="asset/img/example/cache.png">
                                  <span><strong>标准和弦图</strong><br/>数据格式，排序</span></a>
                                </li><!--/li-->
                                <li data-thumb="asset/img/example/cache.png">
                                  <a href="example/chord2.html"><img src="asset/img/example/cache.png">
                                  <span><strong>多系列和弦图</strong><br/>多维图例选择</span></a>
                                </li><!--/li-->
                                <li data-thumb="asset/img/example/cache.png">
                                  <a href="example/chord3.html"><img src="asset/img/example/cache.png">
                                  <span><strong>标准和弦图</strong><br/>数据格式，排序</span></a>
                                </li><!--/li-->
                                <li data-thumb="asset/img/example/cache.png">
                                  <a href="example/chord4.html"><img src="asset/img/example/cache.png">
                                  <span><strong>非缎带和弦图</strong><br/>数据格式，排序</span></a>
                                </li><!--/li-->
                                <li data-thumb="asset/img/example/cache.png">
                                  <a href="example/webkit-dep2.html"><img src="asset/img/example/cache.png">
                                  <span><strong>复杂关系网络</strong><br/>Webkit内核依赖</span></a>
                                </li><!--/li-->
                                <li data-thumb="asset/img/example/cache.png">
                                  <a href="example/chord.html"><img src="asset/img/example/cache.png">
                                  <span><strong>和弦图</strong><br/>多级控制，个性化填充、标签文本、线条样式等</span></a>
                                </li><!--/li-->
                            </ul>
                        </div>
                    </div>
                </div>
                <div>
                    <h3>力导向布局图<a name="force"> </a></h3>
                    <div class="section">
                        <div class="thumb3">
                            <ul class="slides">
                                <li data-thumb="asset/img/example/cache.png">
                                  <a href="example/force1.html"><img src="asset/img/example/cache.png">
                                  <span><strong>简单关系网络</strong><br/>数据格式</span></a>
                                </li><!--/li-->
                                <li data-thumb="asset/img/example/cache.png">
                                  <a href="example/force2.html"><img src="asset/img/example/cache.png">
                                  <span><strong>树状关系网络</strong><br/>数据格式</span></a>
                                </li><!--/li-->
                                <li data-thumb="asset/img/example/cache.png">
                                  <a href="example/force4.html"><img src="asset/img/example/cache.png">
                                  <span><strong>树状关系网络</strong><br/>数据格式</span></a>
                                </li><!--/li-->
                                <li data-thumb="asset/img/example/cache.png">
                                  <a href="example/webkit-dep.html"><img src="asset/img/example/cache.png">
                                  <span><strong>复杂关系网络</strong><br/>Webkit内核依赖</span></a>
                                </li><!--/li-->
                                <li data-thumb="asset/img/example/cache.png">
                                  <a href="example/force.html"><img src="asset/img/example/cache.png">
                                  <span><strong>力导向布局</strong><br/>个性化，节点样式，线条样式</span></a>
                                </li><!--/li-->
                            </ul>
                        </div>
                    </div>
                </div>
                <div>
                    <h3>地图<a name="map"> </a></h3>
                    <div class="section">
                        <div class="thumb4">
                            <ul class="slides">
                                <li data-thumb="asset/img/example/cache.png">
                                  <a href="example/map1.html"><img src="asset/img/example/cache.png">
                                  <span><strong>标准地图</strong><br/>中国地图，多系列，值域漫游</span></a>
                                </li><!--/li-->
                                <li data-thumb="asset/img/example/cache.png">
                                  <a href="example/map2.html"><img src="asset/img/example/cache.png">
                                  <span><strong>标准地图</strong><br/>中国地图，地域选择器</span></a>
                                </li><!--/li-->
                                <li data-thumb="asset/img/example/cache.png">
                                  <a href="example/map3.html"><img src="asset/img/example/cache.png">
                                  <span><strong>标准地图</strong><br/>事件响应，切换，全国34个省市自治区</span></a>
                                </li><!--/li-->
                                <li data-thumb="asset/img/example/cache.png">
                                  <a href="example/map4.html"><img src="asset/img/example/cache.png">
                                  <span><strong>标准地图</strong><br/>世界地图，值域漫游</span></a>
                                </li><!--/li-->
                                <li data-thumb="asset/img/example/cache.png">
                                  <a href="example/map5.html"><img src="asset/img/example/cache.png">
                                  <span><strong>标准地图</strong><br/>世界地图，地域选择器</span></a>
                                </li><!--/li-->
                                <li data-thumb="asset/img/example/cache.png">
                                  <a href="example/mix5.html"><img src="asset/img/example/cache.png">
                                  <span><strong>多地图</strong><br/>数据驱动，省市级下钻</span></a>
                                </li><!--/li-->
                                <li data-thumb="asset/img/example/cache.png">
                                  <a href="example/map20.html"><img src="asset/img/example/cache.png">
                                  <span><strong>地图扩展</strong><br/>标准geoJson格式扩展地图-全国主要城市</span></a>
                                </li><!--/li-->
                                <li data-thumb="asset/img/example/cache.png">
                                  <a href="example/map6.html"><img src="asset/img/example/cache.png">
                                  <span><strong>地图扩展</strong><br/>标准geoJson格式扩展地图类型-香港</span></a>
                                </li><!--/li-->
                                <li data-thumb="asset/img/example/cache.png">
                                  <a href="example/map7.html"><img src="asset/img/example/cache.png">
                                  <span><strong>地图扩展</strong><br/>标准geoJson格式扩展地图类型-美国</span></a>
                                </li><!--/li-->
                                <li data-thumb="asset/img/example/cache.png">
                                  <a href="example/map13.html"><img src="asset/img/example/cache.png">
                                  <span><strong>地图扩展</strong><br/>标准geoJson格式扩展地图类型-大洲</span></a>
                                </li><!--/li-->
                                <li data-thumb="asset/img/example/bmap1.png">
                                  <a href="../extension/BMap/doc/BMap.html"><img src="asset/img/example/bmap1.png" >
                                  <span><strong>ECharts扩展</strong><br/>百度地图扩展BMap</span></a>
                                </li><!--/li-->
                                <li data-thumb="asset/img/example/bmap2.png">
                                  <a href="../extension/BMap/doc/example.html"><img src="asset/img/example/bmap2.png" >
                                  <span><strong>ECharts扩展</strong><br/>百度地图扩展BMap</span></a>
                                </li><!--/li-->
                                <li data-thumb="asset/img/example/cache.png">
                                  <a href="example/map10.html"><img src="asset/img/example/cache.png">
                                  <span><strong>地图标线</strong><br/>markLine<br/>多系列</span></a>
                                </li><!--/li-->
                                <li data-thumb="asset/img/example/cache.png">
                                  <a href="example/map9.html"><img src="asset/img/example/cache.png">
                                  <span><strong>地图标注</strong><br/>markPoint<br/>值域漫游</span></a>
                                </li><!--/li-->
                                <li data-thumb="asset/img/example/cache.png">
                                  <a href="example/map8.html"><img src="asset/img/example/cache.png">
                                  <span><strong>子区域模式</strong><br/>子区域模式使用，值域漫游</span></a>
                                </li><!--/li-->
                                <li data-thumb="asset/img/example/cache.png">
                                  <a href="example/map11.html"><img src="asset/img/example/cache.png">
                                  <span><strong>地图标线</strong><br/>markLine<br/>炫光特效，模拟百度迁徙</span></a>
                                </li><!--/li-->
                                <li data-thumb="asset/img/example/cache.png">
                                  <a href="example/map21.html"><img src="asset/img/example/cache.png">
                                  <span><strong>地图标线</strong><br/>markLine<br/>炫光特效，不等弧度</span></a>
                                </li><!--/li-->
                                <li data-thumb="asset/img/example/cache.png">
                                  <a href="example/map12.html"><img src="asset/img/example/cache.png">
                                  <span><strong>地图标线</strong><br/>markLine<br/>炫光特效，中国铁路干线</span></a>
                                </li><!--/li-->
                                <li data-thumb="asset/img/example/cache.png">
                                  <a href="example/map22.html"><img src="asset/img/example/cache.png">
                                  <span><strong>地图标线</strong><br/>markLine<br/>大规模标线 + 边捆绑</span></a>
                                </li><!--/li-->
                                <li data-thumb="asset/img/example/cache.png">
                                  <a href="example/map15.html"><img src="asset/img/example/cache.png">
                                  <span><strong>地图标注</strong><br/>大规模炫光特效，百度人气</span></a>
                                </li><!--/li-->
                                <li data-thumb="asset/img/example/cache.png">
                                  <a href="example/map16.html"><img src="asset/img/example/cache.png">
                                  <span><strong>地图扩展</strong><br/>SVG扩展-人体组成</span></a>
                                </li><!--/li-->
                                <li data-thumb="asset/img/example/cache.png">
                                  <a href="example/map17.html"><img src="asset/img/example/cache.png">
                                  <span><strong>地图扩展</strong><br/>SVG扩展-足球场</span></a>
                                </li><!--/li-->
                                <li data-thumb="asset/img/example/cache.png">
                                  <a href="example/map18.html"><img src="asset/img/example/cache.png">
                                  <span><strong>地图扩展</strong><br/>SVG扩展-室内空间数据分析</span></a>
                                </li><!--/li-->
                                <li data-thumb="asset/img/example/cache.png">
                                  <a href="example/map14.html"><img src="asset/img/example/cache.png">
                                  <span><strong>搭配时间轴</strong><br/>时空维度数据展现</span></a>
                                </li><!--/li-->
                                <li data-thumb="asset/img/example/cache.png">
                                  <a href="example/map19.html"><img src="asset/img/example/cache.png">
                                  <span><strong>搭配时间轴，地图扩展</strong><br/>2014世界杯进球还原</span></a>
                                </li><!--/li-->
                                <li data-thumb="asset/img/example/cache.png">
                                  <a href="example/map.html"><img src="asset/img/example/cache.png">
                                  <span><strong>地图</strong><br/>多级控制，个性化填充、标签文本、线条样式等</span></a>
                                </li><!--/li-->
                                <li data-thumb="asset/img/example/cache.png">
                                  <a href="example/dataRange2.html"><img src="asset/img/example/cache.png">
                                  <span><strong>值域控件</strong><br/>自定义不等距分割</span></a>
                                </li><!--/li-->
                            </ul>
                        </div>
                    </div>
                </div>
                <div>
                    <h3>仪表盘<a name="gauge"> </a></h3>
                    <div class="section">
                        <div class="thumb4">
                          <ul class="slides">
                            <li data-thumb="asset/img/example/gauge1.png">
                              <a href="example/gauge1.html"><img src="asset/img/example/gauge1.png">
                              <span><strong>标准仪表盘</strong><br/>个性化</span></a>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                               <a href="example/gauge2.html"><img src="asset/img/example/cache.png">
                              <span><strong>标准仪表盘</strong><br/>个性化</span></a>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                               <a href="example/gauge3.html"><img src="asset/img/example/cache.png">
                              <span><strong>标准仪表盘</strong><br/>个性化</span></a>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/gauge4.html"><img src="asset/img/example/cache.png">
                              <span><strong>多仪表盘</strong><br/>个性化</span></a>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/gauge5.html"><img src="asset/img/example/cache.png">
                              <span><strong>多仪表盘</strong><br/>个性化</span></a>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/gauge.html"><img src="asset/img/example/cache.png">
                              <span><strong>标准仪表盘</strong><br/>个性化</span></a>
                            </li><!--/li-->
                          </ul>
                        </div>
                    </div>
                </div>
                <div>
                    <h3>漏斗图<a name="funnel"> </a></h3>
                    <div class="section">
                        <div class="thumb4">
                          <ul class="slides">
                            <li data-thumb="asset/img/example/funnel1.png">
                              <a href="example/funnel1.html"><img src="asset/img/example/funnel1.png">
                              <span><strong>标准漏斗图</strong><br/>个性化</span></a>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                               <a href="example/funnel2.html"><img src="asset/img/example/cache.png">
                              <span><strong>多漏斗图</strong><br/>个性化</span></a>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                               <a href="example/funnel3.html"><img src="asset/img/example/cache.png">
                              <span><strong>多漏斗图</strong><br/>个性化，排序</span></a>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                               <a href="example/funnel4.html"><img src="asset/img/example/cache.png">
                              <span><strong>多漏斗图</strong><br/>个性化，水平对齐样式</span></a>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/funnel.html"><img src="asset/img/example/cache.png">
                              <span><strong>标准漏斗图</strong><br/>个性化</span></a>
                            </li><!--/li-->
                          </ul>
                        </div>
                    </div>
                </div>
                <div>
                    <h3>热力图<a name="heatmap"> </a></h3>
                    <div class="section">
                        <div class="thumb4">
                          <ul class="slides">
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/heatmap.html"><img src="asset/img/example/cache.png">
                              <span><strong>热力图</strong><br/>个性化</span></a>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                               <a href="example/heatmap2.html"><img src="asset/img/example/cache.png">
                              <span><strong>热力图</strong></span></a>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                               <a href="example/heatmap_map.html"><img src="asset/img/example/cache.png">
                              <span><strong>热力图</strong><br/>结合地图</span></a>
                            </li><!--/li-->
                          </ul>
                        </div>
                    </div>
                </div>
                <div>
                    <h3>事件河流图<a name="eventRiver"> </a></h3>
                    <div class="section">
                        <div class="thumb4">
                          <ul class="slides">
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/eventRiver1.html"><img src="asset/img/example/cache.png">
                              <span><strong>事件河流图</strong><br/>个性化</span></a>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                               <a href="example/eventRiver2.html"><img src="asset/img/example/cache.png">
                              <span><strong>事件河流图</strong><br/>个性化</span></a>
                            </li><!--/li-->
                          </ul>
                        </div>
                    </div>
                </div>
                <div>
                    <h3>韦恩图<a name="venn"> </a></h3>
                    <div class="section">
                        <div class="thumb4">
                          <ul class="slides">
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/venn.html"><img src="asset/img/example/cache.png">
                              <span><strong>韦恩图</strong><br/>个性化</span></a>
                            </li><!--/li-->
                          </ul>
                        </div>
                    </div>
                </div>
                <div>
                    <h3>矩形树图<a name="treemap"> </a></h3>
                    <div class="section">
                        <div class="thumb4">
                          <ul class="slides">
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/treemap.html"><img src="asset/img/example/cache.png">
                              <span><strong>矩形树图</strong><br/>最简配置</span></a>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/treemap1.html"><img src="asset/img/example/cache.png">
                              <span><strong>矩形树图</strong><br/>数据下钻</span></a>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/treemap2.html"><img src="asset/img/example/cache.png">
                              <span><strong>矩形树图</strong><br/>个性化</span></a>
                            </li><!--/li-->
                          </ul>
                        </div>
                    </div>
                </div>
                <div>
                    <h3>树图<a name="tree"> </a></h3>
                    <div class="section">
                        <div class="thumb4">
                          <ul class="slides">
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/tree.html"><img src="asset/img/example/cache.png">
                              <span><strong>树图</strong><br/>最简配置</span></a>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/tree2.html"><img src="asset/img/example/cache.png">
                              <span><strong>树图</strong><br/>冰桶挑战</span></a>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/tree1.html"><img src="asset/img/example/cache.png">
                              <span><strong>树图</strong><br/>个性化</span></a>
                            </li><!--/li-->
                          </ul>
                        </div>
                    </div>
                </div>
                <div>
                    <h3>字符云<a name="wordCloud"> </a></h3>
                    <div class="section">
                        <div class="thumb4">
                          <ul class="slides">
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/wordCloud.html"><img src="asset/img/example/cache.png">
                              <span><strong>字符云</strong></a>
                            </li><!--/li-->
                          </ul>
                        </div>
                    </div>
                </div>
                <div>
                    <h3>混搭<a name="mix"> </a></h3>
                    <div class="section">
                        <div class="thumb4">
                            <ul class="slides">
                                <li data-thumb="asset/img/example/cache.png">
                                  <a href="example/mix1.html"><img src="asset/img/example/cache.png">
                                  <span><strong>折柱混搭</strong><br/>双数值轴</span></a>
                                </li><!--/li-->
                                <li data-thumb="asset/img/example/cache.png">
                                  <a href="example/mix6.html"><img src="asset/img/example/cache.png">
                                  <span><strong>折柱混搭</strong><br/>数据驱动，模拟范围图</span></a>
                                </li><!--/li-->
                                <li data-thumb="asset/img/example/cache.png">
                                  <a href="example/mix2.html"><img src="asset/img/example/cache.png">
                                  <span><strong>柱状饼混搭</strong><br/>数据驱动，饼图中心定义</span></a>
                                </li><!--/li-->
                                <li data-thumb="asset/img/example/cache.png">
                                  <a href="example/mix4.html"><img src="asset/img/example/cache.png">
                                  <span><strong>折线散点混搭</strong><br/>数值轴与类目轴坐标同步</span></a>
                                </li><!--/li-->
                                <li data-thumb="asset/img/example/cache.png">
                                  <a href="example/mix7.html"><img src="asset/img/example/cache.png">
                                  <span><strong>散饼图</strong><br/>用饼图代替气泡图中的散点，多系列</span></a>
                                </li><!--/li-->
                                <li data-thumb="asset/img/example/cache.png">
                                  <a href="example/mix10.html"><img src="asset/img/example/cache.png">
                                  <span><strong>折线K线混搭</strong><br/>双数值轴，多系列</span></a>
                                </li><!--/li-->
                                <li data-thumb="asset/img/example/cache.png">
                                  <a href="example/mix12.html"><img src="asset/img/example/cache.png">
                                  <span><strong>折线饼图混搭</strong><br/>趋势，百分比高效混合模式</span></a>
                                </li><!--/li-->
                                <li data-thumb="asset/img/example/cache.png">
                                  <a href="example/mix3.html"><img src="asset/img/example/cache.png">
                                  <span><strong>地图饼图混搭</strong><br/>地图作为地域选择器</span></a>
                                </li><!--/li-->
                                <li data-thumb="asset/img/example/cache.png">
                                  <a href="example/mix9.html"><img src="asset/img/example/cache.png">
                                  <span><strong>多图联动</strong><br/>简单connect，图例，工具箱共享，多系列</span></a>
                                </li><!--/li-->
                                <li data-thumb="asset/img/example/cache.png">
                                  <a href="example/mix8.html"><img src="asset/img/example/cache.png">
                                  <span><strong>多图联动</strong><br/>直角系多图联动，多系列</span></a>
                                </li><!--/li-->
                                <li data-thumb="asset/img/example/cache.png">
                                  <a href="example/mix11.html"><img src="asset/img/example/cache.png">
                                  <span><strong>商业BI类图表</strong><br/>仪表盘、嵌套漏斗图</span></a>
                                </li><!--/li-->
                            </ul>
                        </div>
                    </div>
                </div>
                <div>
                    <h3>组件<a name="component"> </a></h3>
                    <div class="section">
                        <div class="thumb3">
                            <ul class="slides">
                                <li data-thumb="asset/img/example/cache.png">
                                  <a href="example/axis.html"><img src="asset/img/example/cache.png">
                                  <span><strong>坐标系</strong><br/>多级控制，个性化标签文字、间隔线样式等</span></a>
                                </li><!--/li-->
                                <li data-thumb="asset/img/doc/legend.png">
                                  <a href="example/legend.html"><img src="asset/img/doc/legend.png">
                                  <span><strong>图例</strong><br/>个性化</span></a>
                                </li><!--/li-->
                                <li data-thumb="asset/img/example/cache.png">
                                  <a href="example/dataZoom1.html"><img src="asset/img/example/cache.png">
                                  <span><strong>数据区域缩放</strong><br/>基本使用</span></a>
                                </li><!--/li-->
                                <li data-thumb="asset/img/example/cache.png">
                                  <a href="example/dataZoom.html"><img src="asset/img/example/cache.png">
                                  <span><strong>数据区域控件</strong><br/>个性化布局，数据阴影、背景、拖拽手柄样式等</span></a>
                                </li><!--/li-->
                                <li data-thumb="asset/img/example/cache.png">
                                  <a href="example/tooltip.html"><img src="asset/img/example/cache.png">
                                  <span><strong>提示框</strong><br/>多级控制，个性化文字样式、边框、背景等</span></a>
                                </li><!--/li-->
                                <li data-thumb="asset/img/example/cache.png">
                                  <a href="example/dataRange.html"><img src="asset/img/example/cache.png">
                                  <span><strong>值域控件</strong><br/>个性化布局，背景、拖拽手柄样式等</span></a>
                                </li><!--/li-->
                            </ul>
                        </div>
                    </div>
                </div>
                <div>
                    <h3>其他<a name="other"> </a></h3>
                    <div class="section">
                        <div class="thumb4">
                            <ul class="slides">
                                <li data-thumb="asset/img/example/cache.png">
                                  <a href="example/dynamicLineBar.html"><img src="asset/img/example/cache.png">
                                  <span><strong>动态数据</strong><br/>折线图、柱状图</span></a>
                                </li><!--/li-->
                                <li data-thumb="asset/img/example/cache.png">
                                  <a href="example/dynamicScatterK.html"><img src="asset/img/example/cache.png">
                                  <span><strong>动态数据</strong><br/>散点图、K线图</span></a>
                                </li><!--/li-->
                                <li data-thumb="asset/img/example/cache.png">
                                  <a href="example/dynamicPieRadar.html"><img src="asset/img/example/cache.png">
                                  <span><strong>动态数据</strong><br/>饼图、雷达图</span></a>
                                </li><!--/li-->
                                <li data-thumb="asset/img/example/cache.png">
                                  <a href="example/loading.html"><img src="asset/img/example/cache.png">
                                  <span><strong>过渡动画</strong><br/>加载中，Loading</span></a>
                                </li><!--/li-->
                                <li data-thumb="asset/img/example/import.png">
                                  <a href="example/www/index.html"><img src="asset/img/example/import.png">
                                  <span><strong>单文件引入</strong><br/>模块化单文件echarts.js</span></a>
                                </li><!--/li-->
                                <li data-thumb="asset/img/example/import.png">
                                  <a href="example/www2/index.html"><img src="asset/img/example/import.png">
                                  <span><strong>单文件引入</strong><br/>标签式（非模块化）单文件echarts-all.js</span></a>
                                </li><!--/li-->
                                <li data-thumb="asset/img/example/cache.png">
                                  <a href="example/event.html"><img src="asset/img/example/cache.png">
                                  <span><strong>事件交互</strong><br/>可捕获的用户交互和数据变化事件，实现图表与外界的联动</span></a>
                                </li><!--/li-->
                            </ul>
                        </div>
                    </div>
                </div>
                <div>
                    <h3>主题<a name="theme"> </a></h3>
                    <p>主题预览 <a href='example/theme.html' target="_blank">ECharts Theme »</a>，主题定制调试工具 <a href='example/themeDesigner.html' target="_blank">ECharts Theme Designer »</a></p>
                    <p><small>ps:别太依赖代码编辑区，没做本地缓存，页面刷新就没了，建议使用一个本地编辑器编辑主题，只用代码区作为主题定制调试工具。主题写好试试顶部的SaveAsImage（IE8-不支持），会把所有图表合并到一张图中，这是默认样式，期待与我们联系，show出你的主题，让你的设计成为ECharts内置甚至默认主题随时有可能，我们将为您献上一份小礼品同时你的名字将被永留在贡献者名单中。</small></p>
                    <a href="example/theme.html" target="_blank"><img src="asset/img/example/theme.png" style="max-width:100%"></a>
                <div>
                </div>
                    <h3>专题<a name="topic"></a></h3>
                    <p><small>专题页没做低版本IE兼容性处理，请用IE9+、chrome、safari、firefox或opear等现代浏览器。</small></p>
                    <ul>
                        <li><a href="example/topic/aqi-china/index.html" target="_blank">中国主要城市空气质量实况 </a> by <a href="http://weibo.com/wfsr" target="_blank">大佛</a>（百度） · <a href="http://weibo.com/kenerlinfeng" target="_blank">林峰</a>（百度）</li>
                        <li><a href="example/topic/10-me-china/index.html" target="_blank">中国经济十年时空漫游（2002-2011）</a> by 于博（新华社） · 吴楚茵（南方都市报） · <a href="http://weibo.com/kenerlinfeng" target="_blank">林峰</a>（百度）</li>
                        <li><a href="example/topic/24-population-china/index.html" target="_blank">中国人口流动大潮（1987-2011）</a> by 孟立昕（腾讯）· 王飞宇（证券时报） · 颜冬（视觉中国） · <a href="http://weibo.com/kenerlinfeng" target="_blank">林峰</a>（百度）</li>
                        <li><a href="http://hijiangtao.github.io/variety-show-hot-spot-vis/" target="_blank">融合社交网络数据挖掘的综艺节目可视化评价系统 </a> by <a href="http://hijiangtao.github.io/variety-show-hot-spot-vis/about/" target="_blank">Data.BIT团队</a>（北京理工大学软件学院）</li>
                        <li><a href="http://echarts.baidu.com/doc/example/topic/sino-japanese-war-1895/index.html" target="_blank">甲午之殇：纪念甲午战争120周年 </a> by <a href="http://weibo.com/u/3798120772" target="_blank">付建海</a>（CSDN开源夏令营）</li>
                        <li><a href="http://www.thinkgis.cn/public/sina/" target="_blank">2014新浪微博签到数据信息图</a> by <a href="http://www.weibo.com/u/1707284737" target="_blank">ThinkingGIS </a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div> <!-- /container -->

    <footer id="footer"></footer>
    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="./asset/js/jquery.min.js"></script>
    <script type="text/javascript" src="./asset/js/echartsHome.js"></script>
    <script src="./asset/js/bootstrap.min.js"></script>
    <script type="text/javascript">
    $(function (){
      var section = $('[class=section]');
      function loadImage(i) {
          setTimeout(function (){
              var list = $('div>ul>li>a', section[i]);
              var nav = $('ol>li>img', section[i]);
              var href;
              var src;
              if (list.length > 0) {
                  for (var j = 0, k = list.length; j < k; j++) {
                      list[j].target = '_blank';
                      href = list[j].href.slice(list[j].href.lastIndexOf('/') + 1, -5);
                      src = list[j].firstChild.src.replace(
                          'cache', href
                      );
                      list[j].firstChild.alt = 'ECharts ' + href;
                      list[j].firstChild.src = src;
                  }
              }
          }, i * 100);
      }
      for (var i = 0, l = section.length; i < l; i++) {
          loadImage(i);
      }

    var chartsTypeNav = document.getElementById('chartsTypeNav');
    function _scroll() {
        var navHeight = chartsTypeNav.offsetHeight;
        var viewHeight = document.documentElement.clientHeight;
        var scrollHeight = document.documentElement.scrollTop
                           || document.body.scrollTop;
        var offsetHeight = document.body.offsetHeight;
        var footHole = offsetHeight - scrollHeight - viewHeight;
        var maxHeight = viewHeight - (230 - footHole) - 80;
        if (footHole < 320 && maxHeight < navHeight) {
            // 见footer
            //chartsTypeNav.style.marginTop = footHole - 150 + 'px';
            chartsTypeNav.style.marginTop = maxHeight - navHeight + 'px';
        }
        else {
            // 未见footer
            chartsTypeNav.style.marginTop = 'auto';
        }

        var len = offsetList.length;
        if (scrollHeight > offsetList[len - 3].offsetTop) {
                navDom[len - 2].style.backgroundColor = '#3E98C5';
                $(navDom[len - 2]).children('a')[0].style.color = '#fff';
        }
        else {
            for (var i = 0; i < len - 1; i++) {
                if (Math.abs(scrollHeight - offsetList[i].offsetTop) < 280 && navDom[i]) {
                    navDom[i].style.backgroundColor = '#3E98C5';
                    $(navDom[i]).children('a')[0].style.color = '#fff';
                }
                else {
                    navDom[i].style.backgroundColor = 'transparent';
                    $(navDom[i]).children('a')[0].style.color = '#3E98C5';
                }
            }
        }
    }
    var offsetList = [];
    var navDom = $('#chartsTypeNav>ul>li');
    function _resize() {
        offsetList = [];
        $('h3').each(function(idx, dom){
            offsetList[idx] = {
                name : dom.childNodes[1].name,
                offsetTop : dom.childNodes[1].offsetTop
            };
        });
        offsetList.push({
            name : 'topic',
            offsetTop : 100000
        })
        setTimeout(_scroll, 500);
    }

    function scroll2Pos (idx) {
        return function() {
            $("body,html").animate(
                {scrollTop: offsetList[idx].offsetTop + 30},
                500
            );
            return false;
        }
    }
    $('#chartsTypeNav>ul>li>a').each(function(idx, dom){
        $(dom).on('click', scroll2Pos(idx));
    })
    $(window).on('scroll', _scroll);
    $(window).on('resize', _resize);
    _resize();
    });
    </script>
  </body>
</html>