Skip to content

I
incubator-echarts

半栈学徒 / incubator-echarts
与 Fork 源项目一致

从无法访问的项目Fork

通知 5
Star 0
Fork 0
I
incubator-echarts

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

切换分支/标签
查找文件 普通视图历史永久链接Permalink
example.html 20.2 KB
Newer Older
K
release 1.0.0  
kener 已提交
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 
<!DOCTYPE html>
<html lang="en">
  <head>
    <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>

    <!-- Le styles -->
    <link href="asset/css/bootstrap.css" rel="stylesheet">
    <link href="asset/css/bootstrap-responsive.css" rel="stylesheet">
    <link href="asset/css/echartsHome.css" rel="stylesheet">
K
1.1.2 release  
kener 已提交
16 
    <link href="asset/css/flexslider.css" rel="stylesheet"/>
K
release 1.0.0  
kener 已提交
17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 

    <!-- Fav and touch icons -->
    <link rel="shortcut icon" href="asset/ico/favicon.png">
  </head>

  <body>

    <!-- 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">
K
1.1.1 release  
kener 已提交
44 
                    <li><a id="last-release-link" href=""> </a></li>
K
release 1.0.0  
kener 已提交
45 46 47 48 49 50 51 52 53 54 55 
                    <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>
K
1.1.1 release  
kener 已提交
56
K
release 1.0.0  
kener 已提交
57 58 59 60 61 62 63 64 65 66 
                  </ul>
                </li>
              </ul>
           </div><!--/.nav-collapse -->
        </div><!-- /.container -->
      </div><!-- /.navbar-inner -->
    </div><!-- /.navbar-wrapper -->

    <div class="container">
        <div class="row-fluid">
K
1.1.2 release  
kener 已提交
67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 
            <div class="span6">
                <h1>折线图</h1>
                <section class="slider">
                    <div class="flexslider thumb3">
                      <ul class="slides">
                        <li data-thumb="asset/img/example/line1.png">
                          <a href="example/line1.html"><img src="asset/img/example/line1.png" ></a>
                          <p>标准折线图</p>
                        </li><!--/li-->
                        <li data-thumb="asset/img/example/line2.png">
                          <a href="example/line2.html"><img src="asset/img/example/line2.png"></a>
                          <p>堆积折线图，支持任意系列堆积</p>
                        </li><!--/li-->
                        <li data-thumb="asset/img/example/line5.png">
                          <a href="example/line5.html"><img src="asset/img/example/line5.png"></a>
                          <p>标准折线图，横纵坐标轴互换</p>
                        </li><!--/li-->
                        <li data-thumb="asset/img/example/line3.png">
                          <a href="example/line3.html"><img src="asset/img/example/line3.png"></a>
                          <p>标准面积图</p>
                        </li><!--/li-->
                        <li data-thumb="asset/img/example/line4.png">
                          <a href="example/line4.html"><img src="asset/img/example/line4.png"></a>
                          <p>堆积面积图，支持任意系列堆积</p>
                        </li><!--/li-->
                        <li data-thumb="asset/img/example/line.png">
                          <a href="example/line.html"><img src="asset/img/example/line.png"></a>
                          <p>折线图：【个性化】填充、线条、拐点样式等~</p>
                        </li><!--/li-->
                      </ul>
                    </div>
                  </section>
K
release 1.0.0  
kener 已提交
99 
            </div>
K
1.1.2 release  
kener 已提交
100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 
            <div class="span6">
                <h1>柱状图</h1>
                <section class="slider">
                    <div class="flexslider thumb3">
                      <ul class="slides">
                        <li data-thumb="asset/img/example/bar2.png">
                          <a href="example/bar1.html"><img src="asset/img/example/bar1.png"></a>
                          <p>标准柱状图。</p>
                        </li><!--/li-->
                        <li data-thumb="asset/img/example/bar2.png">
                          <a href="example/bar2.html"><img src="asset/img/example/bar2.png"></a>
                          <p>堆积柱状图，支持任意系列堆积。</p>
                        </li><!--/li-->
                        <li data-thumb="asset/img/example/bar3.png">
                          <a href="example/bar3.html"><img src="asset/img/example/bar3.png"></a>
                          <p>标准条状图。</p>
                        </li><!--/li-->
                        <li data-thumb="asset/img/example/bar4.png">
                          <a href="example/bar4.html"><img src="asset/img/example/bar4.png"></a>
                          <p>堆积条状图，支持任意系列堆积。</p>
                        </li><!--/li-->
                        <li data-thumb="asset/img/example/bar5.png">
                          <a href="example/bar5.html"><img src="asset/img/example/bar5.png"></a>
                          <p>标准条状图，正负值混合。</p>
                        </li><!--/li-->
                        <li data-thumb="asset/img/example/bar.png">
                          <a href="example/bar.html"><img src="asset/img/example/bar.png"></a>
                          <p>柱状图：【个性化】柱形宽度，填充、高亮样式等~</p>
                        </li><!--/li-->
                      </ul>
                    </div>
                  </section>
K
release 1.0.0  
kener 已提交
132 
            </div>
K
1.1.2 release  
kener 已提交
133 
            <hr>
K
release 1.0.0  
kener 已提交
134 135 
        </div>
        <div class="row-fluid">
K
1.1.2 release  
kener 已提交
136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 
            <div class="span6">
                <h1>散点图</h1>
                <section class="slider">
                    <div class="flexslider thumb4">
                      <ul class="slides">
                        <li data-thumb="asset/img/example/scatter1.png">
                          <a href="example/scatter1.html"><img src="asset/img/example/scatter1.png"></a>
                          <p>标准散点图</p>
                        </li><!--/li-->
                        <li data-thumb="asset/img/example/scatter2.png">
                           <a href="example/scatter2.html"><img src="asset/img/example/scatter2.png"></a>
                          <p>气泡图</p>
                        </li><!--/li-->
                        <li data-thumb="asset/img/example/scatter3.png">
                           <a href="example/scatter3.html"><img src="asset/img/example/scatter3.png"></a>
                          <p>大规模散点图（IE8-不支持）</p>
                        </li><!--/li-->
                        <li data-thumb="asset/img/example/scatter.png">
                          <a href="example/scatter.html"><img src="asset/img/example/scatter.png"></a>
                          <p>散点图：【个性化】图形样式，大小等~</p>
                        </li><!--/li-->
                      </ul>
                    </div>
                  </section>
K
release 1.0.0  
kener 已提交
160 
            </div>
K
1.1.2 release  
kener 已提交
161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 
            <div class="span6">
                <h1>K线图</h1>
                <section class="slider">
                    <div class="flexslider thumb4">
                      <ul class="slides">
                        <li data-thumb="asset/img/example/k1.png">
                          <a href="example/k1.html"><img src="asset/img/example/k1.png"></a>
                          <p>标准K线图</p>
                        </li><!--/li-->
                        <li data-thumb="asset/img/example/k.png">
                          <a href="example/k.html"><img src="asset/img/example/k.png"></a>
                          <p>K线图：【个性化】柱形阴阳图形样式等~</p>
                        </li><!--/li-->
                      </ul>
                    </div>
                  </section>
K
release 1.0.0  
kener 已提交
177 178 
            </div>
        </div>
K
文档更新，个性化Example  
kener 已提交
179 
        <div class="row-fluid">
K
1.1.2 release  
kener 已提交
180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 
            <div class="span6">
                <h1>饼图</h1>
                <section class="slider">
                    <div class="flexslider thumb4">
                        <ul class="slides">
                            <li data-thumb="asset/img/example/pie1.png">
                              <a href="example/pie1.html"><img src="asset/img/example/pie1.png"></a>
                              <p>标准饼图</p>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/pie2.png">
                              <a href="example/pie2.html"><img src="asset/img/example/pie2.png"></a>
                              <p>标准环形图</p>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/pie3.png">
                              <a href="example/pie3.html"><img src="asset/img/example/pie3.png"></a>
                              <p>嵌套饼图</p>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/pie.png">
                              <a href="example/pie.html"><img src="asset/img/example/pie.png"></a>
                              <p>饼图：【个性化】填充、标签文本、视觉引导线样式等~</p>
                            </li><!--/li-->
                        </ul>
                    </div>
                  </section>
K
文档更新，个性化Example  
kener 已提交
204 
            </div>
K
1.1.2 release  
kener 已提交
205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 
            <div class="span6">
                <h1>地图</h1>
                <section class="slider">
                    <div class="flexslider thumb4">
                        <ul class="slides">
                            <li data-thumb="asset/img/example/map1.png">
                              <a href="example/map1.html"><img src="asset/img/example/map1.png"></a>
                              <p>标准地图</p>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/map2.png">
                              <a href="example/map2.html"><img src="asset/img/example/map2.png"></a>
                              <p>地域选择器</p>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/map3.png">
                              <a href="example/map3.html"><img src="asset/img/example/map3.png"></a>
                              <p>全国34个省市自治区</p>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/map.png">
                              <a href="example/map.html"><img src="asset/img/example/map.png"></a>
                              <p>地图：【个性化】填充、标签文本、线条样式等~</p>
                            </li><!--/li-->
                        </ul>
                    </div>
                  </section>
K
文档更新，个性化Example  
kener 已提交
229 230 
            </div>
        </div>
K
release 1.0.0  
kener 已提交
231 
        <div class="row-fluid">
K
1.1.2 release  
kener 已提交
232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 
            <div class="span6">
                <h1>力导向布局图</h1>
                <section class="slider">
                    <div class="flexslider thumb3">
                        <ul class="slides">
                            <li data-thumb="asset/img/example/force1.png">
                              <a href="example/force1.html"><img src="asset/img/example/force1.png"></a>
                              <p>简单关系网络。</p>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/webkit-dep.png">
                              <a href="example/webkit-dep.html"><img src="asset/img/example/webkit-dep.png"></a>
                              <p>Webkit内核依赖。</p>
                            </li><!--/li-->
                        </ul>
                    </div>
                  </section>
K
release 1.0.0  
kener 已提交
248 
            </div>
K
1.1.2 release  
kener 已提交
249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 
            <div class="span6">
                <h1>其他</h1>
                <section class="slider">
                    <div class="flexslider thumb3">
                        <ul class="slides">
                            <li data-thumb="asset/img/example/loading.png">
                              <a href="example/loading.html"><img src="asset/img/example/loading.png"></a>
                              <p>加载中（Loading）</p>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/event.png">
                              <a href="example/event.html"><img src="asset/img/example/event.png"></a>
                              <p>事件</p>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/import.png">
                              <a href="example/www/index.html"><img src="asset/img/example/import.png"></a>
                              <p>单文件引入ECharts</p>
                            </li><!--/li-->
                        </ul>
                    </div>
                  </section>
K
文档更新，个性化Example  
kener 已提交
269 270 
            </div>
        </div>
K
增加force example  
kener 已提交
271 
        <div class="row-fluid">
K
1.1.2 release  
kener 已提交
272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 
            <div class="span6">
                <h1>混搭</h1>
                <section class="slider">
                    <div class="flexslider thumb3">
                        <ul class="slides">
                            <li data-thumb="asset/img/example/mix1.png">
                              <a href="example/mix1.html"><img src="asset/img/example/mix1.png"></a>
                              <p>折线图与柱状图混搭，双数值轴</p>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/mix2.png">
                              <a href="example/mix2.html"><img src="asset/img/example/mix2.png"></a>
                              <p>柱状图与饼图混搭</p>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/mix4.png">
                              <a href="example/mix4.html"><img src="asset/img/example/mix4.png"></a>
                              <p>折线图与散点图混合（使用时需要注意同步数值轴与类目轴坐标）</p>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/lasagna.png">
                              <a href="example/lasagna.html"><img src="asset/img/example/lasagna.png"></a>
                              <p>多层嵌套环形图</p>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/mix3.png">
                              <a href="example/mix3.html"><img src="asset/img/example/mix3.png"></a>
                              <p>地图与饼图混搭，地图同时作为地域选择器</p>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/mix5.png">
                              <a href="example/mix5.html"><img src="asset/img/example/mix5.png"></a>
                              <p>数据驱动，省市级下钻</p>
                            </li><!--/li-->
                        </ul>
                    </div>
                  </section>
K
增加force example  
kener 已提交
304 
            </div>
K
1.1.2 release  
kener 已提交
305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 
            <div class="span6">
                <h1>组件</h1>
                <section class="slider">
                    <div class="flexslider thumb3">
                        <ul class="slides">
                            <li data-thumb="asset/img/example/axis.png">
                              <a href="example/axis.html"><img src="asset/img/example/axis.png"></a>
                              <p>坐标系：【个性化】标签文字、间隔线、间隔区域样式等~</p>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/dataZoom1.png">
                              <a href="example/dataZoom1.html"><img src="asset/img/example/datazoom1.png"></a>
                              <p>数据区域缩放</p>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/dataZoom.png">
                              <a href="example/dataZoom.html"><img src="asset/img/example/datazoom.png"></a>
                              <p>数据区域缩放：【个性化】数据阴影、背景、拖拽手柄样式等~</p>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/dataRange1.png">
                              <a href="example/dataRange1.html"><img src="asset/img/example/dataRange1.png"></a>
                              <p>值域漫游</p>
                            </li><!--/li-->
                            <li data-thumb="asset/img/doc/dataRange.png">
                              <a href="example/dataRange.html"><img src="asset/img/doc/dataRange.png"></a>
                              <p>值域控件：【个性化】布局，填充样式样式等~</p>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/tooltip.png">
                              <a href="example/tooltip.html"><img src="asset/img/example/tooltip.png"></a>
                              <p>提示框：【个性化】文字样式、边框、背景、格式器等~</p>
                            </li><!--/li-->
                        </ul>
                    </div>
                  </section>
K
release 1.0.0  
kener 已提交
337 338 339 
            </div>
        </div>
        <hr>
K
1.1.2 release  
kener 已提交
340 341 342 343 
        <footer>
          <p class="pull-right"><a href="#">Back to top</a></p>
          <p>&copy; 2013 ECOM-FE &middot; <a href="https://github.com/ecomfe/echarts/blob/master/LICENSE.txt" target="_blank">Terms</a> &middot; <a href="changelog.html" target="_blank">Changelog</a></p>
        </footer>
K
release 1.0.0  
kener 已提交
344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 
    </div> <!-- /container -->

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <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>
K
1.1.2 release  
kener 已提交
362 363 364 365 366 367 368 369 370 371 
    <!-- FlexSlider -->
    <script defer src="asset/js/jquery.flexslider.js"></script>
    <script type="text/javascript">
    $(window).load(function(){
      $('.flexslider').flexslider({
        animation: "slide",
        controlNav: "thumbnails"
      });
    });
    </script>
K
release 1.0.0  
kener 已提交
372 373 
  </body>
</html>