975 lines
64 KiB
HTML
975 lines
64 KiB
HTML
<!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>
|