| <!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="linzhifeng@baidu.com"> | |
| <title>ECharts · Example</title> | |
| <link rel="shortcut icon" href="./asset/ico/favicon.png"> | |
| <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/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-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/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--> | |
| </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/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/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/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/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/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/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/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/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/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/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/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/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="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/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="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/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--> | |
| <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/wormhole.html"><img src="asset/img/example/cache.png"> | |
| <span><strong>虫洞</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/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/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/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-plain.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> | |
| </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"> | |
| $(window).load(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> |