/
index.jade
274 lines (248 loc) · 13.5 KB
/
index.jade
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
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
99
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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
html.sr
extends ../layouts/basic
block extra_head
title Apache ECharts
script(src="#{cdnPayRoot}/#{ecWWWLang}/vendors/scrollreveal.js")
script(src="#{cdnPayRoot}/#{ecWWWLang}/asset/lottie/js/lottie.min.js?_v_=#{cdnPayVersion}")
block content
nav(class='navbar navbar-default navbar-fixed-top', role="navigation")
include ../components/nav
.page-main#page-index
#main-content
section#home-section
.home-brand-panel.description.container
.home-info
.home-brand Apache ECharts
.home-subtitle 一个基于 JavaScript 的开源可视化图表库
.home-btn-panel
a.btn.btn-main.btn-index-home(href='./feature.html')
include ../components/svg/index-learn
span 快速入门
a.btn.btn-main.btn-index-home(href='./download.html')
include ../components/svg/index-example
span 所有示例
a.btn.btn-main.btn-index-home.btn-index-github(href='https://github.com/apache/incubator-echarts', target='_blank')
include ../components/svg/github
+svgGithub('#081642')
.home-chart
img(src="images/index-home-pie.png")
script(type='text/javascript').
(function () {
var ua = navigator.userAgent;
var ie = ua.match(/MSIE\s([\d.]+)/) || ua.match(/Trident\/.+?rv:(([\d.]+))/);
var edge = ua.match(/Edge\/([\d.]+)/);
window.supportTouch = 'ontouchstart' in window && !ie && !edge;
})()
section#feature-section
.container
.index-features
h2.reveal 特性
hr.reveal
a.more.reveal(href='#') 查看完整特性
.row
.col-md-6
.index-feature#index-feature-1
.index-feature-left.reveal
.index-feature-icon-bg#bg-icon-1
.index-feature-icon#icon-1
.index-feature-right.reveal
h3.reveal 丰富的图表类型
p.reveal-later 提供开箱即用的 20 多种图表和十几种组件,并且支持各种图表以及组件的任意组合。
.col-md-6
.index-feature#index-feature-2
.index-feature-left.reveal
.index-feature-icon-bg#bg-icon-2
.index-feature-icon#icon-2
.index-feature-right
h3.reveal 强劲的渲染引擎
p.reveal-later Canvas、SVG 双引擎一键切换,增量渲染、流加载等技术实现千万级数据的流畅交互。
.col-md-6
.index-feature#index-feature-3
.index-feature-left.reveal
.index-feature-icon-bg#bg-icon-3
.index-feature-icon#icon-3
.index-feature-right
h3.reveal 专业的数据分析
p.reveal-later 通过数据集管理数据,支持数据过滤、聚类、回归,帮助实现同一份数据的多维度分析。
.col-md-6
.index-feature#index-feature-4
.index-feature-left.reveal
.index-feature-icon-bg#bg-icon-4
.index-feature-icon#icon-4
.index-feature-right
h3.reveal 优雅的可视化设计
p.reveal-later 默认设计遵从可视化原则,支持响应式设计,并且提供了灵活的配置项方便开发者定制。
.col-md-6
.index-feature#index-feature-5
.index-feature-left.reveal
.index-feature-icon-bg#bg-icon-5
.index-feature-icon#icon-5
.index-feature-right
h3.reveal 健康的开源社区
p.reveal-later 活跃的社区用户保证了项目的健康发展,也贡献了丰富的第三方插件满足不同场景的需求。
.col-md-6
.index-feature#index-feature-6
.index-feature-left.reveal
.index-feature-icon-bg#bg-icon-6
.index-feature-icon#icon-6
.index-feature-right
h3.reveal 友好的无障碍访问
p.reveal-later 智能生成的图表描述和贴花图案,帮助视力障碍人士了解图表内容,读懂图表背后的故事。
script(type='text/javascript').
var animationMap = {};
function setLottieAnimatiion(id, path) {
var container = id;
if (typeof(id) === 'string') {
container = document.getElementById(id);
}
animationMap[id] = lottie.loadAnimation({
container, // the dom element that will contain the animation
renderer: 'svg',
loop: false,
autoplay: true,
path, // the path to the animation json
});
}
setLottieAnimatiion('icon-1', 'asset/lottie/json/chart.json');
setLottieAnimatiion('icon-2', 'asset/lottie/json/fly.json');
setLottieAnimatiion('icon-3', 'asset/lottie/json/analysis.json');
setLottieAnimatiion('icon-4', 'asset/lottie/json/compatible.json');
setLottieAnimatiion('icon-5', 'asset/lottie/json/grown.json');
setLottieAnimatiion('icon-6', 'asset/lottie/json/simple.json');
for(var i = 0; i < 6; i++) {
setLottieAnimatiion('bg-icon-' + (i + 1), 'asset/lottie/json/bg_0'+ (i + 1) + '.json');
(function (i) {
//- setTimeout(function () {
console.log(i, '#index-feature-' + (i + 1), $('#index-feature-' + (i + i)))
$('#index-feature-' + (i + 1)).mouseenter(function () {
console.log('hover' + (i + 1));
animationMap['icon-' + (i + 1)].goToAndPlay(0);
});
//- });
})(i);
}
section#publication
.container
#start-line
.paper
.content
h2.reveal-latest ECharts: A Declarative Framework for Rapid Construction of Web-based Visualization
p.note.reveal-latest 如果您在科研项目、产品、学术论文、技术报告、新闻报告、教育、专利以及其他相关活动中使用了 Apache ECharts,欢迎引用本论文。
.single-btn-panel.reveal-latest
a(href="http://www.cad.zju.edu.cn/home/vagblog/VAG_Work/echarts.pdf").pdf.reveal-later Visual Informatics, 2018 [PDF]
.icon
#paper-icon
#end-line
script(type='text/javascript').
(function () {
var hasStartLineShow = false;
var hasPaperShow = false;
var hasEndLineShow = false;
setLottieAnimatiion('paper-icon', 'asset/lottie/json/paper.json');
$('#page-index').scroll(function () {
var startLine = $("#start-line").offset().top;
var endLine = $("#end-line").offset().top;
if (startLine >= $(window).scrollTop() && startLine < ($(window).scrollTop() + $(window).height() - 200)) {
if (!hasStartLineShow) {
$('#publication').css('opacity', 1);
if (animationMap['start-line']) {
animationMap['start-line'].goToAndPlay(0);
}
else {
setLottieAnimatiion('start-line', 'asset/lottie/json/start_line.json');
}
if (animationMap['paper-icon']) {
animationMap['paper-icon'].goToAndPlay(0);
}
else {
setLottieAnimatiion('paper-icon', 'asset/lottie/json/paper.json');
}
hasStartLineShow = true;
hasPaperShow = true;
}
}
else {
if (!hasStartLineShow) {
hasStartLineShow = false;
}
}
if (endLine <= 400) {
if (!hasEndLineShow) {
if (animationMap['end-line']) {
animationMap['end-line'].goToAndPlay(0);
}
else {
setLottieAnimatiion('end-line', 'asset/lottie/json/end_line.json');
}
hasEndLineShow = true;
}
}
else {
if (!hasEndLineShow) {
hasEndLineShow = false;
}
}
});
})()
section.normal#about-section.reveal-about
.container
h3 关注我们
hr
p 关注我们以及时获得更多最新动态
.btn-panel.row
.col-lg-3.col-sm-6
a#btn-github(href='https://github.com/apache/incubator-echarts')
.btn-content
.btn-logo
include ../components/svg/github
+svgGithub('#081642')
span GitHub
.icon-v-right
.col-lg-3.col-sm-6
a#btn-weixin
.btn-content.zh
.btn-logo
include ../components/svg/wechart
span 公众号
.weixin-code
img(src="images/ercode.jpg")
.col-lg-3.col-sm-6
a#btn-weibo(href='https://weibo.com/echarts')
.btn-content
.btn-logo
include ../components/svg/weibo
span 微博
.icon-v-right
.col-lg-3.col-sm-6
a#btn-twitter(href='https://twitter.com/ApacheECharts')
.btn-content
.btn-logo
include ../components/svg/twitter
span Twitter
.icon-v-right
script(type='text/javascript').
ScrollReveal().reveal('.reveal', {
container: '#page-index',
delay: 300
});
ScrollReveal().reveal('.reveal-later', {
container: '#page-index',
delay: 600
});
ScrollReveal().reveal('.reveal-latest', {
container: '#page-index',
delay: 1200
});
ScrollReveal().reveal('.reveal-about', {
container: '#page-index',
delay: 600
});
include ../components/footer
block extra_js
script.
window.lazyLoadOptions = {
elements_selector: ".lazy"
};
script(src='https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.0.0/dist/lazyload.min.js')
script(src='#{cdnPayRoot}/#{ecWWWLang}/js/index.js?_v_=#{homeVersion}')
<script async defer src="https://buttons.github.io/buttons.js"></script>