/
builder.jade
192 lines (163 loc) · 8.68 KB
/
builder.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
extends ../layouts/basic
block extra_head
- var isCN = ecWWWLang == 'zh';
<title>#{isCN ? 'ECharts 在线构建' : 'ECharts Online Builder'}</title>
block content
- var isCN = ecWWWLang == 'zh';
nav(class='navbar navbar-default navbar-fixed-top')
if isCN
include ./nav
else
include ../en/nav
block vars
#builder
.page-info
#title.container
h1 #{isCN ? '在线定制' : 'Online Builder'}
if isCN
p 可自由选择所需图表、坐标系、组件进行打包下载，并且可对渲染引擎、兼容及压缩问题进行设置
else
p Pack and download the needed charts, coordinates or components<br>with the appropriate settings about rendering engine, compatibility and compression.
div.download-version (version: #{downloadVersion})
.page-content
#configuration.container
if isCN
if isECharts4
a(href='builder3.html', style="float: right") 前往定制 3.x 版本
else
a(href='builder.html', style="float: right") 前往定制 4.x 版本
section#charts
h3 #{isCN ? '图表' : 'Chart'}
span #{isCN ? 'chart' : ''}
p.desc #{isCN ? '选择要打包的图表' : 'Select the charts needed to be packed'}
if isCN
span.warn （注：开发环境建议不压缩代码，代码压缩会去掉大部分常见的警告和错误提示）
else
br
span.warn (The warnings and hints will not be printed on the browser console if using "Code Compression")
ul
each names, key in charts
li(class=names[2] ? 'checked' : '')
img(src="images/builder/chart/#{key}.svg", alt="")
input(type="checkbox" name="#{key}")
<h5>#{isCN ? names[0] : ''} <div>#{names[1]}</div></h5>
section#coords
h3 #{isCN ? '坐标系' : 'Coordinate Systems'}
span #{isCN ? 'coordinate systems' : ''}
if isCN
p.desc 选择要打包的坐标系，有些图表像散点图，折线图可以被应用到多个坐标系上
else
p.desc Select coordinate systems needed to be packed. Some of the charts like "scatter", "line", "graph", "custom" can layout on multiple coordiante systems.
ul
each names, key in coords
li(class=names[2] ? 'checked' : '')
img(src="images/builder/component/#{key}.svg", alt="")
input(type="checkbox" name="#{key}")
<h5>#{isCN ? names[0] : ''} <div>#{names[1]}</div></h5>
section#components
h3 #{isCN ? '组件' : 'Component'}
span #{isCN ? 'component' : ''}
if isCN
p.desc 选择要打包的组件
else
p.desc Select components needed to be packed.
ul
each names, key in components
li(class=names[2] ? 'checked' : '')
img(src="images/builder/component/#{key}.svg", alt="")
input(type="checkbox" name="#{names[3] || key}")
<h5>#{isCN ? names[0] : ''} <div>#{names[1]}</div></h5>
section#other
h3 #{isCN ? '其它选项' : 'Others'}
span #{isCN ? 'others' : ''}
div.other-option
input(type="checkbox" id="svg" name="svg")
label(for="svg") #{isCN ? 'SVG 渲染' : 'SVG Renderer'}
if isCN
p.desc 是否包括 SVG 渲染器，从而能支持使用 SVG 来绘制图表
else
p.desc Whether to include the SVG Renderer, which enables rendering based on SVG.
div.other-option
input(type="checkbox" id="vml" name="vml")
label(for="vml") #{isCN ? '兼容 IE8' : 'Available on IE8 (VML Renderer)'}
if isCN
p.desc 是否包括对 IE8 的兼容代码
else
p.desc Whether to include the VML Renderer to support rendering on IE8.
div.other-option
input(type="checkbox" id="api" name="api" checked="checked")
label(for="api") #{isCN ? '工具集' : 'Utilities'}
if isCN
p.desc 是否在 echarts 对象上挂载常用工具集。一般都会挂载，除非对生成的文件的体积有苛求，并且不需要用这些工具集。
else
p.desc Whether to mount utilities on the echarts namespace. Utilities are usually included, unless requiring minimum bundle size and not need them.
div.other-option
input(type="checkbox" id="compress" name="compress" checked="checked")
label(for="compress") #{isCN ? '代码压缩' : 'Code Compression'}
if isCN
p.desc 是否使用 UglifyJS 压缩后的代码，开发环境建议不压缩代码，代码压缩会去掉大部分常见的警告和错误提示。
else
p.desc Whether to Compress code. It is recommended not to compress code in the development environment, because warnings and hints will be removed after compressing.
#action
if isCN
p 感谢对ECharts关注与支持，为了更好地为您提供关于 ECharts 的相关资讯，您可以留下您的电子邮箱
else
p Thank you for your concern and support to ECharts. <br>For deep exchanges or providing more infomation about echarts for you, would you please leave your email:
div
input(type="text" name="email" id="email" placeholder="someone@email.com")
.clear
div
a.btn.btn-thirdary#build(href="javascript:;") #{isCN ? '下载' : 'Download'}
if isCN
include ./footer
else
include ../en/footer
block extra_js
- var buildVersion = isECharts4 ? '4' : '3';
script.
function updateCheckbox() {
$('#charts input, #components input, #coords input').each(function () {
$(this).attr('checked', $(this).parent().hasClass('checked'));
});
}
$('#charts li, #components li, #coords li').click(function () {
$(this).toggleClass('checked');
updateCheckbox();
});
updateCheckbox();
// Build
$("#build").click(function () {
var charts = [];
$('#charts .checked input').each(function () {
charts.push($(this).attr('name'));
});
var components = [];
$('#coords .checked input').each(function () {
components.push($(this).attr('name'));
});
$('#components .checked input').each(function () {
components.push($(this).attr('name'));
});
var parameters = 'charts=' + charts.join(',') + '&components=' + components.join(',');
if (!$('#compress').prop('checked')) {
parameters += '&source=true';
}
if ($('#vml').prop('checked')) {
parameters += '&vml=true';
}
if ($('#svg').prop('checked')) {
parameters += '&svg=true';
}
if ($('#api').prop('checked')) {
parameters += '&api=true';
}
parameters += '&version=#{buildVersion}'
+ '&versionCode=#{downloadVersion}';
var email = $('#email').val();
var log = parameters;
if (email) {
log += '&email=' + email;
}
_hmt.push(['_trackEvent', 'builder', 'build', '#{downloadVersion}', log]);
window.open('builder/echarts.html?' + parameters);
});