w-echarts-vue 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (81) hide show
  1. package/.editorconfig +9 -0
  2. package/.eslintignore +3 -0
  3. package/.eslintrc.js +55 -0
  4. package/.jsdoc +25 -0
  5. package/LICENSE +21 -0
  6. package/README.md +130 -0
  7. package/SECURITY.md +5 -0
  8. package/babel.config.js +16 -0
  9. package/dist/w-echarts-vue.umd.js +30 -0
  10. package/dist/w-echarts-vue.umd.js.map +1 -0
  11. package/docs/components_WEchartsVue.vue.html +420 -0
  12. package/docs/examples/app.html +62 -0
  13. package/docs/examples/app.umd.js +31 -0
  14. package/docs/examples/app.umd.js.map +1 -0
  15. package/docs/examples/w-echarts-vue_area.html +1733 -0
  16. package/docs/examples/w-echarts-vue_bar3D.html +1733 -0
  17. package/docs/examples/w-echarts-vue_continuous.html +1733 -0
  18. package/docs/examples/w-echarts-vue_heatmap.html +1733 -0
  19. package/docs/examples/w-echarts-vue_line.html +1733 -0
  20. package/docs/examples/w-echarts-vue_line3D.html +1733 -0
  21. package/docs/examples/w-echarts-vue_parallel.html +1733 -0
  22. package/docs/examples/w-echarts-vue_polar heatmap.html +1733 -0
  23. package/docs/examples/w-echarts-vue_polar.html +1733 -0
  24. package/docs/examples/w-echarts-vue_radar.html +1733 -0
  25. package/docs/examples/w-echarts-vue_resize.html +1746 -0
  26. package/docs/examples/w-echarts-vue_scatter.html +1733 -0
  27. package/docs/examples/w-echarts-vue_stack.html +1733 -0
  28. package/docs/examples/w-echarts-vue_surface.html +1733 -0
  29. package/docs/examples/w-echarts-vue_tree.html +1736 -0
  30. package/docs/examples/w-echarts-vue_treemap.html +1734 -0
  31. package/docs/fonts/Montserrat/Montserrat-Bold.eot +0 -0
  32. package/docs/fonts/Montserrat/Montserrat-Bold.ttf +0 -0
  33. package/docs/fonts/Montserrat/Montserrat-Bold.woff +0 -0
  34. package/docs/fonts/Montserrat/Montserrat-Bold.woff2 +0 -0
  35. package/docs/fonts/Montserrat/Montserrat-Regular.eot +0 -0
  36. package/docs/fonts/Montserrat/Montserrat-Regular.ttf +0 -0
  37. package/docs/fonts/Montserrat/Montserrat-Regular.woff +0 -0
  38. package/docs/fonts/Montserrat/Montserrat-Regular.woff2 +0 -0
  39. package/docs/fonts/Source-Sans-Pro/sourcesanspro-light-webfont.eot +0 -0
  40. package/docs/fonts/Source-Sans-Pro/sourcesanspro-light-webfont.svg +978 -0
  41. package/docs/fonts/Source-Sans-Pro/sourcesanspro-light-webfont.ttf +0 -0
  42. package/docs/fonts/Source-Sans-Pro/sourcesanspro-light-webfont.woff +0 -0
  43. package/docs/fonts/Source-Sans-Pro/sourcesanspro-light-webfont.woff2 +0 -0
  44. package/docs/fonts/Source-Sans-Pro/sourcesanspro-regular-webfont.eot +0 -0
  45. package/docs/fonts/Source-Sans-Pro/sourcesanspro-regular-webfont.svg +1049 -0
  46. package/docs/fonts/Source-Sans-Pro/sourcesanspro-regular-webfont.ttf +0 -0
  47. package/docs/fonts/Source-Sans-Pro/sourcesanspro-regular-webfont.woff +0 -0
  48. package/docs/fonts/Source-Sans-Pro/sourcesanspro-regular-webfont.woff2 +0 -0
  49. package/docs/global.html +281 -0
  50. package/docs/index.html +84 -0
  51. package/docs/js_iniEcharts.mjs.html +104 -0
  52. package/docs/module-WEchartsVue.html +1006 -0
  53. package/docs/scripts/collapse.js +39 -0
  54. package/docs/scripts/commonNav.js +28 -0
  55. package/docs/scripts/linenumber.js +25 -0
  56. package/docs/scripts/nav.js +12 -0
  57. package/docs/scripts/polyfill.js +4 -0
  58. package/docs/scripts/prettify/Apache-License-2.0.txt +202 -0
  59. package/docs/scripts/prettify/lang-css.js +2 -0
  60. package/docs/scripts/prettify/prettify.js +28 -0
  61. package/docs/scripts/search.js +99 -0
  62. package/docs/styles/jsdoc.css +776 -0
  63. package/docs/styles/prettify.css +80 -0
  64. package/package.json +70 -0
  65. package/public/index.html +31 -0
  66. package/script.txt +22 -0
  67. package/src/App.vue +180 -0
  68. package/src/AppZoneWEchartsVue.vue +1171 -0
  69. package/src/components/WEchartsVue.vue +348 -0
  70. package/src/js/iniEcharts.mjs +32 -0
  71. package/src/main.js +8 -0
  72. package/test/all.test.mjs +10 -0
  73. package/toolg/addVersion.mjs +4 -0
  74. package/toolg/cleanFolder.mjs +5 -0
  75. package/toolg/cvCasename.mjs +43 -0
  76. package/toolg/gDistApp.mjs +35 -0
  77. package/toolg/gDistRollupComps.mjs +24 -0
  78. package/toolg/gDocExams.mjs +47 -0
  79. package/toolg/gExtractHtml.mjs +285 -0
  80. package/toolg/modifyReadme.mjs +4 -0
  81. package/vue.config.js +27 -0
package/docs/examples/w-echarts-vue_treemap.html ADDED
@@ -0,0 +1,1734 @@
1
+ <!doctype html>
2
+ <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-tw">
3
+ <head>
4
+ <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
5
+ <meta
6
+ name="viewport"
7
+ content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"
8
+ />
9
+ <meta http-equiv="X-UA-Compatible" content="ie=edge" />
10
+ <title>w-echarts-vue</title>
11
+
12
+ <!-- @babel/polyfill -->
13
+ <script
14
+ nomodule
15
+ src="https://cdn.jsdelivr.net/npm/@babel/polyfill/dist/polyfill.min.js"
16
+ ></script>
17
+
18
+ <!-- vue -->
19
+ <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.min.js"></script>
20
+
21
+ <!-- extractHtml已自動添加@babel/polyfill與vue -->
22
+
23
+ <!-- fontawesome -->
24
+ <link
25
+ href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.2/css/all.min.css"
26
+ rel="stylesheet"
27
+ />
28
+
29
+ <!-- mdi, 各組件使用mdi/js會於轉單頁時改為mdi icon, 故需引用mdi/css -->
30
+ <link
31
+ href="https://cdn.jsdelivr.net/npm/@mdi/font@7.4.47/css/materialdesignicons.min.css"
32
+ rel="stylesheet"
33
+ />
34
+
35
+ <!-- google, 各組件使用mdi/js故不需引用 -->
36
+ <link
37
+ _href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"
38
+ rel="stylesheet"
39
+ />
40
+ <link
41
+ _href="https://fonts.googleapis.com/css?family=Material+Icons"
42
+ rel="stylesheet"
43
+ />
44
+
45
+ <!-- data -->
46
+ <script src="https://cdn.jsdelivr.net/npm/w-demores/res/data/dataAAPL.js"></script>
47
+ <script
48
+ src="https://cdn.jsdelivr.net/npm/w-demores/res/data/dataUSD2EUR.js"
49
+ ></script>
50
+ <script
51
+ src="https://cdn.jsdelivr.net/npm/w-demores/res/data/dataHousePriceArea.js"
52
+ ></script>
53
+ <script src="https://cdn.jsdelivr.net/npm/w-demores/res/data/dataFlare.js"></script>
54
+
55
+ <!-- w-echarts-vue -->
56
+ <script src="https://cdn.jsdelivr.net/npm/w-echarts-vue@1.0.0/dist/w-echarts-vue.umd.js"></script>
57
+
58
+ <style>
59
+ /* 組件所須全域樣式 */
60
+ .item {
61
+ /* 因item位於demolink, 提取各範例html後會刪除demolink, 故得額外補上 */
62
+ border-left: 3px solid #ffba75;
63
+ margin: 5px 5px 8px 0px;
64
+ padding: 3px 3px 5px 10px;
65
+ font-size: 0.9rem;
66
+ display: flex;
67
+ justify-content: flex-start;
68
+ align-items: center;
69
+ }
70
+ .head1 {
71
+ padding: 0px 0px 20px 0px;
72
+ font-size: 2.5rem;
73
+ }
74
+ .bkh {
75
+ /* 寬 */
76
+ padding: 20px;
77
+ }
78
+ @media screen and (max-width: 800px) {
79
+ /* 中 */
80
+ .bkh {
81
+ padding: 10px;
82
+ }
83
+ }
84
+ @media screen and (max-width: 400px) {
85
+ /* 窄 */
86
+ .bkh {
87
+ padding: 5px;
88
+ }
89
+ }
90
+ .bk {
91
+ /* 寬 */
92
+ display: inline-block;
93
+ vertical-align: top;
94
+ padding: 0px 80px 60px 0px;
95
+ }
96
+ @media screen and (max-width: 1000px) {
97
+ /* 中窄 */
98
+ .bk {
99
+ display: block;
100
+ padding: 0px 0px 50px 0px;
101
+ }
102
+ }
103
+ .cpitem {
104
+ transition: all 0.3s;
105
+ padding: 5px 15px;
106
+ cursor: pointer;
107
+ }
108
+ .cpitem-white {
109
+ background: #fff;
110
+ }
111
+ .cpitem-white:hover {
112
+ background: #eee;
113
+ }
114
+ .cpitem-black {
115
+ background: #333;
116
+ }
117
+ .cpitem-black:hover {
118
+ background: #555;
119
+ }
120
+ </style>
121
+ </head>
122
+ <body
123
+ style="font-family:'Microsoft JhengHei','Avenir','Helvetica'; padding:0px; margin:0px;"
124
+ >
125
+ <div id="app" class="bkh" style="font-family:inherit;">
126
+ <div class="head1">
127
+ <span
128
+ style="cursor:pointer;"
129
+ title="open for copy link to view component"
130
+ onclick="window.open('//yuda-lyu.github.io/w-echarts-vue/examples/app.html?cmp='+this.innerText,'_blank')"
131
+ >w-echarts-vue</span>
132
+ </div>
133
+ <div class="bk" style="display:block;">
134
+ <div class="item">treemap</div>
135
+
136
+ <!-- echarts要給寬度否則無法撐開 -->
137
+ <w-echarts-vue
138
+ style="width:100%; height:500px;"
139
+ :options="WEchartsVue.options10"
140
+ ></w-echarts-vue>
141
+ </div>
142
+ </div>
143
+
144
+ <script>
145
+ //install
146
+ Vue.component("w-echarts-vue", window["w-echarts-vue"]);
147
+
148
+ //initialize
149
+ new Vue({
150
+ el: "#app",
151
+
152
+ data: function() {
153
+ let df = function(d) {
154
+ let date = [];
155
+ let data = [];
156
+ for (let i = 0; i < d.length; i++) {
157
+ let v = d[i];
158
+ let now = new Date(v[0]);
159
+ let t = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join(
160
+ "-"
161
+ );
162
+ date.push(t);
163
+ data.push(v[1]);
164
+ }
165
+ return {
166
+ date,
167
+ data
168
+ };
169
+ };
170
+ let rDataAAPL = df(window.dataAAPL);
171
+ let rDataUSD2EUR = df(window.dataUSD2EUR);
172
+ return {
173
+ WEchartsVue: {
174
+ widthOptions1: 620,
175
+ options1: {
176
+ tooltip: {
177
+ trigger: "axis",
178
+ position: function(pt) {
179
+ return [pt[0], "10%"];
180
+ }
181
+ },
182
+ title: {
183
+ left: "center",
184
+ text: "AAPL Stock Price"
185
+ },
186
+ toolbox: {
187
+ feature: {
188
+ dataZoom: {
189
+ yAxisIndex: "none",
190
+ title: {
191
+ zoom: "Zoom",
192
+ back: "Zoom Reset"
193
+ }
194
+ },
195
+ restore: {
196
+ title: "Restore"
197
+ },
198
+ saveAsImage: {
199
+ title: "Download"
200
+ }
201
+ }
202
+ },
203
+ xAxis: {
204
+ type: "category",
205
+ boundaryGap: false,
206
+ data: rDataAAPL.date
207
+ },
208
+ yAxis: {
209
+ type: "value",
210
+ boundaryGap: [0, "100%"]
211
+ },
212
+ dataZoom: [
213
+ {
214
+ type: "inside",
215
+ start: 0,
216
+ end: 100
217
+ },
218
+ {
219
+ start: 0,
220
+ end: 10,
221
+ handleIcon:
222
+ "path://M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z",
223
+ handleSize: "80%",
224
+ handleStyle: {
225
+ color: "#fff",
226
+ shadowBlur: 3,
227
+ shadowColor: "rgba(0, 0, 0, 0.6)",
228
+ shadowOffsetX: 2,
229
+ shadowOffsetY: 2
230
+ }
231
+ }
232
+ ],
233
+ series: [
234
+ {
235
+ name: "Price",
236
+ type: "line",
237
+ itemStyle: {
238
+ color: "rgba(20, 20, 200, 0.5)"
239
+ },
240
+ data: rDataAAPL.data
241
+ }
242
+ ]
243
+ },
244
+ options2: {
245
+ tooltip: {
246
+ trigger: "axis",
247
+ position: function(pt) {
248
+ return [pt[0], "10%"];
249
+ }
250
+ },
251
+ title: {
252
+ left: "center",
253
+ text: "USD to EUR exchange rate over time"
254
+ },
255
+ toolbox: {
256
+ feature: {
257
+ dataZoom: {
258
+ yAxisIndex: "none",
259
+ title: {
260
+ zoom: "Zoom",
261
+ back: "Zoom Reset"
262
+ }
263
+ },
264
+ restore: {
265
+ title: "Restore"
266
+ },
267
+ saveAsImage: {
268
+ title: "Download"
269
+ }
270
+ }
271
+ },
272
+ xAxis: {
273
+ type: "category",
274
+ boundaryGap: false,
275
+ data: rDataUSD2EUR.date
276
+ },
277
+ yAxis: {
278
+ type: "value",
279
+ boundaryGap: [0, "100%"]
280
+ },
281
+ dataZoom: [
282
+ {
283
+ type: "inside",
284
+ start: 0,
285
+ end: 100
286
+ },
287
+ {
288
+ start: 0,
289
+ end: 10,
290
+ handleIcon:
291
+ "path://M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z",
292
+ handleSize: "80%",
293
+ handleStyle: {
294
+ color: "#fff",
295
+ shadowBlur: 3,
296
+ shadowColor: "rgba(0, 0, 0, 0.6)",
297
+ shadowOffsetX: 2,
298
+ shadowOffsetY: 2
299
+ }
300
+ }
301
+ ],
302
+ series: [
303
+ {
304
+ name: "USD to EUR",
305
+ type: "line",
306
+ itemStyle: {
307
+ color: "rgba(200,200,255,1)"
308
+ },
309
+ areaStyle: {
310
+ color: {
311
+ type: "linear",
312
+ x0: 0,
313
+ y0: 0,
314
+ x2: 0,
315
+ y2: 1,
316
+ colorStops: [
317
+ {
318
+ offset: 0,
319
+ color: "rgba(200,200,255,1)"
320
+ },
321
+ {
322
+ offset: 1,
323
+ color: "rgba(200,200,255,0.1)"
324
+ }
325
+ ],
326
+ globalCoord: false
327
+ }
328
+ },
329
+ data: rDataUSD2EUR.data
330
+ }
331
+ ]
332
+ },
333
+ options3: {
334
+ title: {
335
+ left: "center",
336
+ text: "堆叠区域图"
337
+ },
338
+ tooltip: {
339
+ trigger: "axis",
340
+ axisPointer: {
341
+ type: "cross",
342
+ label: {
343
+ backgroundColor: "#6a7985"
344
+ }
345
+ }
346
+ },
347
+ legend: {
348
+ y: 30,
349
+ data: ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"]
350
+ },
351
+ grid: {
352
+ left: "3%",
353
+ right: "4%",
354
+ bottom: "3%",
355
+ containLabel: true
356
+ },
357
+ xAxis: [
358
+ {
359
+ type: "category",
360
+ boundaryGap: false,
361
+ data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
362
+ }
363
+ ],
364
+ yAxis: [
365
+ {
366
+ type: "value"
367
+ }
368
+ ],
369
+ series: [
370
+ {
371
+ name: "邮件营销",
372
+ type: "line",
373
+ stack: "总量",
374
+ areaStyle: {},
375
+ data: [120, 132, 101, 134, 90, 230, 210]
376
+ },
377
+ {
378
+ name: "联盟广告",
379
+ type: "line",
380
+ stack: "总量",
381
+ areaStyle: {},
382
+ data: [220, 182, 191, 234, 290, 330, 310]
383
+ },
384
+ {
385
+ name: "视频广告",
386
+ type: "line",
387
+ stack: "总量",
388
+ areaStyle: {},
389
+ data: [150, 232, 201, 154, 190, 330, 410]
390
+ },
391
+ {
392
+ name: "直接访问",
393
+ type: "line",
394
+ stack: "总量",
395
+ areaStyle: {},
396
+ data: [320, 332, 301, 334, 390, 330, 320]
397
+ },
398
+ {
399
+ name: "搜索引擎",
400
+ type: "line",
401
+ stack: "总量",
402
+ label: {
403
+ show: true,
404
+ position: "top"
405
+ },
406
+ areaStyle: {},
407
+ data: [820, 932, 901, 934, 1290, 1330, 1320]
408
+ }
409
+ ]
410
+ },
411
+ options4: {
412
+ title: {
413
+ left: "center",
414
+ text: "基础雷达图"
415
+ },
416
+ tooltip: {},
417
+ legend: {
418
+ y: 30,
419
+ data: [
420
+ "预算分配（Allocated Budget）",
421
+ "实际开销（Actual Spending）"
422
+ ]
423
+ },
424
+ radar: {
425
+ center: ["50%", "60%"],
426
+ radius: "60%",
427
+ axisName: {
428
+ color: "#fff",
429
+ backgroundColor: "#999",
430
+ borderRadius: 3,
431
+ padding: [3, 5]
432
+ },
433
+ indicator: [
434
+ { name: "销售（sales）", max: 6500 },
435
+ { name: "管理（Administration）", max: 16000 },
436
+ { name: "信息技术（Information Techology）", max: 30000 },
437
+ { name: "客服（Customer Support）", max: 38000 },
438
+ { name: "研发（Development）", max: 52000 },
439
+ { name: "市场（Marketing）", max: 25000 }
440
+ ]
441
+ },
442
+ series: [
443
+ {
444
+ name: "预算 vs 开销（Budget vs spending）",
445
+ type: "radar",
446
+ data: [
447
+ {
448
+ value: [4300, 10000, 28000, 35000, 50000, 19000],
449
+ name: "预算分配（Allocated Budget）"
450
+ },
451
+ {
452
+ value: [5000, 14000, 28000, 31000, 42000, 21000],
453
+ name: "实际开销（Actual Spending）"
454
+ }
455
+ ]
456
+ }
457
+ ]
458
+ },
459
+ options5: {
460
+ title: {
461
+ text: "极坐标双数值轴"
462
+ },
463
+ legend: {
464
+ data: ["line"]
465
+ },
466
+ polar: {
467
+ center: ["50%", "52%"],
468
+ radius: "72%"
469
+ },
470
+ tooltip: {
471
+ trigger: "axis",
472
+ axisPointer: {
473
+ type: "cross"
474
+ }
475
+ },
476
+ angleAxis: {
477
+ type: "value",
478
+ startAngle: 0
479
+ },
480
+ radiusAxis: {},
481
+ series: [
482
+ {
483
+ coordinateSystem: "polar",
484
+ name: "line",
485
+ type: "line",
486
+ data: (function() {
487
+ let data = [];
488
+ for (let i = 0; i <= 100; i++) {
489
+ let theta = (i / 100) * 360;
490
+ let r = 5 * (1 + Math.sin((theta / 180) * Math.PI));
491
+ data.push([r, theta]);
492
+ }
493
+ return data;
494
+ })()
495
+ }
496
+ ]
497
+ },
498
+ options6: {
499
+ tooltip: {
500
+ position: "top"
501
+ },
502
+ grid: {
503
+ height: "70%",
504
+ top: "2%"
505
+ },
506
+ xAxis: {
507
+ type: "category",
508
+ data: [
509
+ "12a",
510
+ "1a",
511
+ "2a",
512
+ "3a",
513
+ "4a",
514
+ "5a",
515
+ "6a",
516
+ "7a",
517
+ "8a",
518
+ "9a",
519
+ "10a",
520
+ "11a",
521
+ "12p",
522
+ "1p",
523
+ "2p",
524
+ "3p",
525
+ "4p",
526
+ "5p",
527
+ "6p",
528
+ "7p",
529
+ "8p",
530
+ "9p",
531
+ "10p",
532
+ "11p"
533
+ ],
534
+ splitArea: {
535
+ show: true
536
+ }
537
+ },
538
+ yAxis: {
539
+ type: "category",
540
+ data: [
541
+ "Saturday",
542
+ "Friday",
543
+ "Thursday",
544
+ "Wednesday",
545
+ "Tuesday",
546
+ "Monday",
547
+ "Sunday"
548
+ ],
549
+ splitArea: {
550
+ show: true
551
+ }
552
+ },
553
+ visualMap: {
554
+ min: 0,
555
+ max: 10,
556
+ calculable: true,
557
+ orient: "horizontal",
558
+ left: "center",
559
+ bottom: "2%"
560
+ },
561
+ series: [
562
+ {
563
+ name: "Punch Card",
564
+ type: "heatmap",
565
+ data: [
566
+ [0, 0, 5],
567
+ [0, 1, 1],
568
+ [0, 2, 0],
569
+ [0, 3, 0],
570
+ [0, 4, 0],
571
+ [0, 5, 0],
572
+ [0, 6, 0],
573
+ [0, 7, 0],
574
+ [0, 8, 0],
575
+ [0, 9, 0],
576
+ [0, 10, 0],
577
+ [0, 11, 2],
578
+ [0, 12, 4],
579
+ [0, 13, 1],
580
+ [0, 14, 1],
581
+ [0, 15, 3],
582
+ [0, 16, 4],
583
+ [0, 17, 6],
584
+ [0, 18, 4],
585
+ [0, 19, 4],
586
+ [0, 20, 3],
587
+ [0, 21, 3],
588
+ [0, 22, 2],
589
+ [0, 23, 5],
590
+ [1, 0, 7],
591
+ [1, 1, 0],
592
+ [1, 2, 0],
593
+ [1, 3, 0],
594
+ [1, 4, 0],
595
+ [1, 5, 0],
596
+ [1, 6, 0],
597
+ [1, 7, 0],
598
+ [1, 8, 0],
599
+ [1, 9, 0],
600
+ [1, 10, 5],
601
+ [1, 11, 2],
602
+ [1, 12, 2],
603
+ [1, 13, 6],
604
+ [1, 14, 9],
605
+ [1, 15, 11],
606
+ [1, 16, 6],
607
+ [1, 17, 7],
608
+ [1, 18, 8],
609
+ [1, 19, 12],
610
+ [1, 20, 5],
611
+ [1, 21, 5],
612
+ [1, 22, 7],
613
+ [1, 23, 2],
614
+ [2, 0, 1],
615
+ [2, 1, 1],
616
+ [2, 2, 0],
617
+ [2, 3, 0],
618
+ [2, 4, 0],
619
+ [2, 5, 0],
620
+ [2, 6, 0],
621
+ [2, 7, 0],
622
+ [2, 8, 0],
623
+ [2, 9, 0],
624
+ [2, 10, 3],
625
+ [2, 11, 2],
626
+ [2, 12, 1],
627
+ [2, 13, 9],
628
+ [2, 14, 8],
629
+ [2, 15, 10],
630
+ [2, 16, 6],
631
+ [2, 17, 5],
632
+ [2, 18, 5],
633
+ [2, 19, 5],
634
+ [2, 20, 7],
635
+ [2, 21, 4],
636
+ [2, 22, 2],
637
+ [2, 23, 4],
638
+ [3, 0, 7],
639
+ [3, 1, 3],
640
+ [3, 2, 0],
641
+ [3, 3, 0],
642
+ [3, 4, 0],
643
+ [3, 5, 0],
644
+ [3, 6, 0],
645
+ [3, 7, 0],
646
+ [3, 8, 1],
647
+ [3, 9, 0],
648
+ [3, 10, 5],
649
+ [3, 11, 4],
650
+ [3, 12, 7],
651
+ [3, 13, 14],
652
+ [3, 14, 13],
653
+ [3, 15, 12],
654
+ [3, 16, 9],
655
+ [3, 17, 5],
656
+ [3, 18, 5],
657
+ [3, 19, 10],
658
+ [3, 20, 6],
659
+ [3, 21, 4],
660
+ [3, 22, 4],
661
+ [3, 23, 1],
662
+ [4, 0, 1],
663
+ [4, 1, 3],
664
+ [4, 2, 0],
665
+ [4, 3, 0],
666
+ [4, 4, 0],
667
+ [4, 5, 1],
668
+ [4, 6, 0],
669
+ [4, 7, 0],
670
+ [4, 8, 0],
671
+ [4, 9, 2],
672
+ [4, 10, 4],
673
+ [4, 11, 4],
674
+ [4, 12, 2],
675
+ [4, 13, 4],
676
+ [4, 14, 4],
677
+ [4, 15, 14],
678
+ [4, 16, 12],
679
+ [4, 17, 1],
680
+ [4, 18, 8],
681
+ [4, 19, 5],
682
+ [4, 20, 3],
683
+ [4, 21, 7],
684
+ [4, 22, 3],
685
+ [4, 23, 0],
686
+ [5, 0, 2],
687
+ [5, 1, 1],
688
+ [5, 2, 0],
689
+ [5, 3, 3],
690
+ [5, 4, 0],
691
+ [5, 5, 0],
692
+ [5, 6, 0],
693
+ [5, 7, 0],
694
+ [5, 8, 2],
695
+ [5, 9, 0],
696
+ [5, 10, 4],
697
+ [5, 11, 1],
698
+ [5, 12, 5],
699
+ [5, 13, 10],
700
+ [5, 14, 5],
701
+ [5, 15, 7],
702
+ [5, 16, 11],
703
+ [5, 17, 6],
704
+ [5, 18, 0],
705
+ [5, 19, 5],
706
+ [5, 20, 3],
707
+ [5, 21, 4],
708
+ [5, 22, 2],
709
+ [5, 23, 0],
710
+ [6, 0, 1],
711
+ [6, 1, 0],
712
+ [6, 2, 0],
713
+ [6, 3, 0],
714
+ [6, 4, 0],
715
+ [6, 5, 0],
716
+ [6, 6, 0],
717
+ [6, 7, 0],
718
+ [6, 8, 0],
719
+ [6, 9, 0],
720
+ [6, 10, 1],
721
+ [6, 11, 0],
722
+ [6, 12, 2],
723
+ [6, 13, 1],
724
+ [6, 14, 3],
725
+ [6, 15, 4],
726
+ [6, 16, 0],
727
+ [6, 17, 0],
728
+ [6, 18, 0],
729
+ [6, 19, 0],
730
+ [6, 20, 1],
731
+ [6, 21, 2],
732
+ [6, 22, 2],
733
+ [6, 23, 6]
734
+ ].map(function(item) {
735
+ return [item[1], item[0], item[2] || "-"];
736
+ }),
737
+ label: {
738
+ show: true
739
+ },
740
+ emphasis: {
741
+ itemStyle: {
742
+ shadowBlur: 10,
743
+ shadowColor: "rgba(0, 0, 0, 0.5)"
744
+ }
745
+ }
746
+ }
747
+ ]
748
+ },
749
+ options7: {
750
+ title: {
751
+ left: "center",
752
+ text: "Dispersion of house price based on the area"
753
+ },
754
+ grid: {
755
+ top: "10%",
756
+ left: "0%",
757
+ right: "10%",
758
+ bottom: "0%",
759
+ containLabel: true
760
+ },
761
+ visualMap: {
762
+ min: 15202,
763
+ max: 159980,
764
+ dimension: 1,
765
+ orient: "vertical",
766
+ right: 10,
767
+ top: "center",
768
+ text: ["HIGH", "LOW"],
769
+ calculable: true,
770
+ inRange: {
771
+ color: ["#f2c31a", "#24b7f2"]
772
+ }
773
+ },
774
+ tooltip: {
775
+ trigger: "item",
776
+ axisPointer: {
777
+ type: "cross"
778
+ }
779
+ },
780
+ xAxis: [
781
+ {
782
+ type: "value"
783
+ }
784
+ ],
785
+ yAxis: [
786
+ {
787
+ type: "value"
788
+ }
789
+ ],
790
+ series: [
791
+ {
792
+ name: "price-area",
793
+ type: "scatter",
794
+ symbolSize: 5,
795
+ itemStyle: {
796
+ borderWidth: 0.2,
797
+ borderColor: "#fff"
798
+ },
799
+ data: window.dataHousePriceArea
800
+ }
801
+ ]
802
+ },
803
+ options8: {
804
+ parallelAxis: [
805
+ { dim: 0, name: "Price" },
806
+ { dim: 1, name: "Net Weight" },
807
+ { dim: 2, name: "Amount" },
808
+ {
809
+ dim: 3,
810
+ name: "Score",
811
+ type: "category",
812
+ data: ["Excellent", "Good", "OK", "Bad"]
813
+ }
814
+ ],
815
+ parallel: {
816
+ left: "5%",
817
+ right: "10%",
818
+ bottom: "5%",
819
+ top: "5%"
820
+ },
821
+ series: {
822
+ type: "parallel",
823
+ lineStyle: {
824
+ width: 4
825
+ },
826
+ data: [
827
+ [12.99, 100, 82, "Good"],
828
+ [9.99, 80, 77, "OK"],
829
+ [20, 120, 60, "Excellent"]
830
+ ]
831
+ }
832
+ },
833
+ options9: {
834
+ tooltip: {
835
+ trigger: "item",
836
+ triggerOn: "mousemove"
837
+ },
838
+ toolbox: {
839
+ feature: {
840
+ restore: {
841
+ title: "Restore"
842
+ },
843
+ saveAsImage: {
844
+ title: "Download"
845
+ }
846
+ }
847
+ },
848
+ series: [
849
+ {
850
+ type: "tree",
851
+ data: [window.dataFlare],
852
+ top: "1%",
853
+ left: "4%",
854
+ bottom: "1%",
855
+ right: "14%",
856
+ symbolSize: 12,
857
+ initialTreeDepth: undefined, //展開全部
858
+ label: {
859
+ position: "left",
860
+ verticalAlign: "middle",
861
+ align: "right",
862
+ fontSize: 12,
863
+ formatter: function(p) {
864
+ if (p.value) {
865
+ return p.name + ": " + p.value;
866
+ }
867
+ return p.name;
868
+ }
869
+ },
870
+ leaves: {
871
+ label: {
872
+ position: "right",
873
+ verticalAlign: "middle",
874
+ align: "left"
875
+ }
876
+ },
877
+ animationDuration: 500,
878
+ animationDurationUpdate: 500
879
+ }
880
+ ]
881
+ },
882
+ options10: {
883
+ tooltip: {
884
+ trigger: "item",
885
+ triggerOn: "mousemove"
886
+ },
887
+ toolbox: {
888
+ feature: {
889
+ restore: {
890
+ title: "Restore"
891
+ },
892
+ saveAsImage: {
893
+ title: "Download"
894
+ }
895
+ }
896
+ },
897
+ series: [
898
+ {
899
+ type: "treemap",
900
+ name: window.dataFlare.name,
901
+ data: window.dataFlare.children,
902
+ upperLabel: {
903
+ show: true,
904
+ height: 24,
905
+ padding: 5
906
+ },
907
+ label: {
908
+ formatter: function(p) {
909
+ if (p.value) {
910
+ return p.name + "\n" + "(" + p.value + ")";
911
+ }
912
+ return p.name;
913
+ },
914
+ fontSize: 11
915
+ },
916
+ levels: [
917
+ {
918
+ itemStyle: {
919
+ borderWidth: 2,
920
+ gapWidth: 2,
921
+ borderColor: "#444"
922
+ }
923
+ },
924
+ {
925
+ itemStyle: {
926
+ borderWidth: 2,
927
+ gapWidth: 2,
928
+ borderColor: "#666"
929
+ }
930
+ },
931
+ {
932
+ itemStyle: {
933
+ borderWidth: 2,
934
+ gapWidth: 2,
935
+ borderColor: "#888"
936
+ }
937
+ },
938
+ {
939
+ itemStyle: {
940
+ borderWidth: 2,
941
+ gapWidth: 2,
942
+ borderColor: "#aaa"
943
+ }
944
+ }
945
+ ]
946
+ }
947
+ ]
948
+ },
949
+ options11: {
950
+ tooltip: {},
951
+ visualMap: {
952
+ type: "continuous",
953
+ min: 0,
954
+ max: 10,
955
+ inRange: {
956
+ color: ["#2D5F73", "#538EA6", "#F2D1B3", "#F2B8A2", "#F28C8C"]
957
+ },
958
+ orient: "vertical",
959
+ top: "center"
960
+ },
961
+ series: {
962
+ type: "sunburst",
963
+ data: [
964
+ {
965
+ name: "Grandpa",
966
+ children: [
967
+ {
968
+ name: "Uncle Leo",
969
+ value: 15,
970
+ children: [
971
+ {
972
+ name: "Cousin Jack",
973
+ value: 2
974
+ },
975
+ {
976
+ name: "Cousin Mary",
977
+ value: 5,
978
+ children: [
979
+ {
980
+ name: "Jackson",
981
+ value: 2
982
+ }
983
+ ]
984
+ },
985
+ {
986
+ name: "Cousin Ben",
987
+ value: 4
988
+ }
989
+ ]
990
+ },
991
+ {
992
+ name: "Aunt Jane",
993
+ children: [
994
+ {
995
+ name: "Cousin Kate",
996
+ value: 4
997
+ }
998
+ ]
999
+ },
1000
+ {
1001
+ name: "Father",
1002
+ value: 10,
1003
+ children: [
1004
+ {
1005
+ name: "Me",
1006
+ value: 5,
1007
+ itemStyle: {
1008
+ color: "red"
1009
+ }
1010
+ },
1011
+ {
1012
+ name: "Brother Peter",
1013
+ value: 1
1014
+ }
1015
+ ]
1016
+ }
1017
+ ]
1018
+ },
1019
+ {
1020
+ name: "Mike",
1021
+ children: [
1022
+ {
1023
+ name: "Uncle Dan",
1024
+ children: [
1025
+ {
1026
+ name: "Cousin Lucy",
1027
+ value: 3
1028
+ },
1029
+ {
1030
+ name: "Cousin Luck",
1031
+ value: 4,
1032
+ children: [
1033
+ {
1034
+ name: "Nephew",
1035
+ value: 2
1036
+ }
1037
+ ]
1038
+ }
1039
+ ]
1040
+ }
1041
+ ]
1042
+ },
1043
+ {
1044
+ name: "Nancy",
1045
+ children: [
1046
+ {
1047
+ name: "Uncle Nike",
1048
+ children: [
1049
+ {
1050
+ name: "Cousin Betty",
1051
+ value: 1
1052
+ },
1053
+ {
1054
+ name: "Cousin Jenny",
1055
+ value: 2
1056
+ }
1057
+ ]
1058
+ }
1059
+ ]
1060
+ }
1061
+ ],
1062
+ radius: [0, "90%"],
1063
+ label: {
1064
+ rotate: "radial"
1065
+ }
1066
+ }
1067
+ },
1068
+ options12: {
1069
+ legend: {
1070
+ data: ["Punch Card"]
1071
+ },
1072
+ polar: {},
1073
+ tooltip: {},
1074
+ visualMap: {
1075
+ type: "continuous",
1076
+ min: 0,
1077
+ max: 14,
1078
+ top: "middle",
1079
+ dimension: 2,
1080
+ calculable: true
1081
+ },
1082
+ angleAxis: {
1083
+ type: "category",
1084
+ data: [
1085
+ "12a",
1086
+ "1a",
1087
+ "2a",
1088
+ "3a",
1089
+ "4a",
1090
+ "5a",
1091
+ "6a",
1092
+ "7a",
1093
+ "8a",
1094
+ "9a",
1095
+ "10a",
1096
+ "11a",
1097
+ "12p",
1098
+ "1p",
1099
+ "2p",
1100
+ "3p",
1101
+ "4p",
1102
+ "5p",
1103
+ "6p",
1104
+ "7p",
1105
+ "8p",
1106
+ "9p",
1107
+ "10p",
1108
+ "11p"
1109
+ ],
1110
+ boundaryGap: false,
1111
+ splitLine: {
1112
+ show: true,
1113
+ lineStyle: {
1114
+ color: "#ddd",
1115
+ type: "dashed"
1116
+ }
1117
+ },
1118
+ axisLine: {
1119
+ show: false
1120
+ }
1121
+ },
1122
+ radiusAxis: {
1123
+ type: "category",
1124
+ data: [
1125
+ "Saturday",
1126
+ "Friday",
1127
+ "Thursday",
1128
+ "Wednesday",
1129
+ "Tuesday",
1130
+ "Monday",
1131
+ "Sunday"
1132
+ ],
1133
+ z: 100
1134
+ },
1135
+ series: [
1136
+ {
1137
+ name: "Punch Card",
1138
+ type: "custom",
1139
+ coordinateSystem: "polar",
1140
+ itemStyle: {
1141
+ color: "#d14a61"
1142
+ },
1143
+ renderItem: function(params, api) {
1144
+ let values = [api.value(0), api.value(1)];
1145
+ let coord = api.coord(values);
1146
+ let size = api.size([1, 1], values);
1147
+ return {
1148
+ type: "sector",
1149
+ shape: {
1150
+ cx: params.coordSys.cx,
1151
+ cy: params.coordSys.cy,
1152
+ r0: coord[2] - size[0] / 2,
1153
+ r: coord[2] + size[0] / 2,
1154
+ startAngle: -(coord[3] + size[1] / 2),
1155
+ endAngle: -(coord[3] - size[1] / 2)
1156
+ },
1157
+ style: api.style({
1158
+ fill: api.visual("color")
1159
+ })
1160
+ };
1161
+ },
1162
+ data: [
1163
+ [0, 0, 5],
1164
+ [0, 1, 1],
1165
+ [0, 2, 0],
1166
+ [0, 3, 0],
1167
+ [0, 4, 0],
1168
+ [0, 5, 0],
1169
+ [0, 6, 0],
1170
+ [0, 7, 0],
1171
+ [0, 8, 0],
1172
+ [0, 9, 0],
1173
+ [0, 10, 0],
1174
+ [0, 11, 2],
1175
+ [0, 12, 4],
1176
+ [0, 13, 1],
1177
+ [0, 14, 1],
1178
+ [0, 15, 3],
1179
+ [0, 16, 4],
1180
+ [0, 17, 6],
1181
+ [0, 18, 4],
1182
+ [0, 19, 4],
1183
+ [0, 20, 3],
1184
+ [0, 21, 3],
1185
+ [0, 22, 2],
1186
+ [0, 23, 5],
1187
+ [1, 0, 7],
1188
+ [1, 1, 0],
1189
+ [1, 2, 0],
1190
+ [1, 3, 0],
1191
+ [1, 4, 0],
1192
+ [1, 5, 0],
1193
+ [1, 6, 0],
1194
+ [1, 7, 0],
1195
+ [1, 8, 0],
1196
+ [1, 9, 0],
1197
+ [1, 10, 5],
1198
+ [1, 11, 2],
1199
+ [1, 12, 2],
1200
+ [1, 13, 6],
1201
+ [1, 14, 9],
1202
+ [1, 15, 11],
1203
+ [1, 16, 6],
1204
+ [1, 17, 7],
1205
+ [1, 18, 8],
1206
+ [1, 19, 12],
1207
+ [1, 20, 5],
1208
+ [1, 21, 5],
1209
+ [1, 22, 7],
1210
+ [1, 23, 2],
1211
+ [2, 0, 1],
1212
+ [2, 1, 1],
1213
+ [2, 2, 0],
1214
+ [2, 3, 0],
1215
+ [2, 4, 0],
1216
+ [2, 5, 0],
1217
+ [2, 6, 0],
1218
+ [2, 7, 0],
1219
+ [2, 8, 0],
1220
+ [2, 9, 0],
1221
+ [2, 10, 3],
1222
+ [2, 11, 2],
1223
+ [2, 12, 1],
1224
+ [2, 13, 9],
1225
+ [2, 14, 8],
1226
+ [2, 15, 10],
1227
+ [2, 16, 6],
1228
+ [2, 17, 5],
1229
+ [2, 18, 5],
1230
+ [2, 19, 5],
1231
+ [2, 20, 7],
1232
+ [2, 21, 4],
1233
+ [2, 22, 2],
1234
+ [2, 23, 4],
1235
+ [3, 0, 7],
1236
+ [3, 1, 3],
1237
+ [3, 2, 0],
1238
+ [3, 3, 0],
1239
+ [3, 4, 0],
1240
+ [3, 5, 0],
1241
+ [3, 6, 0],
1242
+ [3, 7, 0],
1243
+ [3, 8, 1],
1244
+ [3, 9, 0],
1245
+ [3, 10, 5],
1246
+ [3, 11, 4],
1247
+ [3, 12, 7],
1248
+ [3, 13, 14],
1249
+ [3, 14, 13],
1250
+ [3, 15, 12],
1251
+ [3, 16, 9],
1252
+ [3, 17, 5],
1253
+ [3, 18, 5],
1254
+ [3, 19, 10],
1255
+ [3, 20, 6],
1256
+ [3, 21, 4],
1257
+ [3, 22, 4],
1258
+ [3, 23, 1],
1259
+ [4, 0, 1],
1260
+ [4, 1, 3],
1261
+ [4, 2, 0],
1262
+ [4, 3, 0],
1263
+ [4, 4, 0],
1264
+ [4, 5, 1],
1265
+ [4, 6, 0],
1266
+ [4, 7, 0],
1267
+ [4, 8, 0],
1268
+ [4, 9, 2],
1269
+ [4, 10, 4],
1270
+ [4, 11, 4],
1271
+ [4, 12, 2],
1272
+ [4, 13, 4],
1273
+ [4, 14, 4],
1274
+ [4, 15, 14],
1275
+ [4, 16, 12],
1276
+ [4, 17, 1],
1277
+ [4, 18, 8],
1278
+ [4, 19, 5],
1279
+ [4, 20, 3],
1280
+ [4, 21, 7],
1281
+ [4, 22, 3],
1282
+ [4, 23, 0],
1283
+ [5, 0, 2],
1284
+ [5, 1, 1],
1285
+ [5, 2, 0],
1286
+ [5, 3, 3],
1287
+ [5, 4, 0],
1288
+ [5, 5, 0],
1289
+ [5, 6, 0],
1290
+ [5, 7, 0],
1291
+ [5, 8, 2],
1292
+ [5, 9, 0],
1293
+ [5, 10, 4],
1294
+ [5, 11, 1],
1295
+ [5, 12, 5],
1296
+ [5, 13, 10],
1297
+ [5, 14, 5],
1298
+ [5, 15, 7],
1299
+ [5, 16, 11],
1300
+ [5, 17, 6],
1301
+ [5, 18, 0],
1302
+ [5, 19, 5],
1303
+ [5, 20, 3],
1304
+ [5, 21, 4],
1305
+ [5, 22, 2],
1306
+ [5, 23, 0],
1307
+ [6, 0, 1],
1308
+ [6, 1, 0],
1309
+ [6, 2, 0],
1310
+ [6, 3, 0],
1311
+ [6, 4, 0],
1312
+ [6, 5, 0],
1313
+ [6, 6, 0],
1314
+ [6, 7, 0],
1315
+ [6, 8, 0],
1316
+ [6, 9, 0],
1317
+ [6, 10, 1],
1318
+ [6, 11, 0],
1319
+ [6, 12, 2],
1320
+ [6, 13, 1],
1321
+ [6, 14, 3],
1322
+ [6, 15, 4],
1323
+ [6, 16, 0],
1324
+ [6, 17, 0],
1325
+ [6, 18, 0],
1326
+ [6, 19, 0],
1327
+ [6, 20, 1],
1328
+ [6, 21, 2],
1329
+ [6, 22, 2],
1330
+ [6, 23, 6]
1331
+ ]
1332
+ }
1333
+ ]
1334
+ },
1335
+ options13: {
1336
+ tooltip: {},
1337
+ visualMap: {
1338
+ max: 20,
1339
+ inRange: {
1340
+ color: [
1341
+ "#313695",
1342
+ "#4575b4",
1343
+ "#74add1",
1344
+ "#abd9e9",
1345
+ "#e0f3f8",
1346
+ "#ffffbf",
1347
+ "#fee090",
1348
+ "#fdae61",
1349
+ "#f46d43",
1350
+ "#d73027",
1351
+ "#a50026"
1352
+ ]
1353
+ }
1354
+ },
1355
+ xAxis3D: {
1356
+ type: "category",
1357
+ data: [
1358
+ "12a",
1359
+ "1a",
1360
+ "2a",
1361
+ "3a",
1362
+ "4a",
1363
+ "5a",
1364
+ "6a",
1365
+ "7a",
1366
+ "8a",
1367
+ "9a",
1368
+ "10a",
1369
+ "11a",
1370
+ "12p",
1371
+ "1p",
1372
+ "2p",
1373
+ "3p",
1374
+ "4p",
1375
+ "5p",
1376
+ "6p",
1377
+ "7p",
1378
+ "8p",
1379
+ "9p",
1380
+ "10p",
1381
+ "11p"
1382
+ ]
1383
+ },
1384
+ yAxis3D: {
1385
+ type: "category",
1386
+ data: [
1387
+ "Saturday",
1388
+ "Friday",
1389
+ "Thursday",
1390
+ "Wednesday",
1391
+ "Tuesday",
1392
+ "Monday",
1393
+ "Sunday"
1394
+ ]
1395
+ },
1396
+ zAxis3D: {
1397
+ type: "value"
1398
+ },
1399
+ grid3D: {
1400
+ boxWidth: 200,
1401
+ boxDepth: 80,
1402
+ light: {
1403
+ main: {
1404
+ intensity: 1.2
1405
+ },
1406
+ ambient: {
1407
+ intensity: 0.3
1408
+ }
1409
+ }
1410
+ },
1411
+ series: [
1412
+ {
1413
+ type: "bar3D",
1414
+ data: [
1415
+ [0, 0, 5],
1416
+ [0, 1, 1],
1417
+ [0, 2, 0],
1418
+ [0, 3, 0],
1419
+ [0, 4, 0],
1420
+ [0, 5, 0],
1421
+ [0, 6, 0],
1422
+ [0, 7, 0],
1423
+ [0, 8, 0],
1424
+ [0, 9, 0],
1425
+ [0, 10, 0],
1426
+ [0, 11, 2],
1427
+ [0, 12, 4],
1428
+ [0, 13, 1],
1429
+ [0, 14, 1],
1430
+ [0, 15, 3],
1431
+ [0, 16, 4],
1432
+ [0, 17, 6],
1433
+ [0, 18, 4],
1434
+ [0, 19, 4],
1435
+ [0, 20, 3],
1436
+ [0, 21, 3],
1437
+ [0, 22, 2],
1438
+ [0, 23, 5],
1439
+ [1, 0, 7],
1440
+ [1, 1, 0],
1441
+ [1, 2, 0],
1442
+ [1, 3, 0],
1443
+ [1, 4, 0],
1444
+ [1, 5, 0],
1445
+ [1, 6, 0],
1446
+ [1, 7, 0],
1447
+ [1, 8, 0],
1448
+ [1, 9, 0],
1449
+ [1, 10, 5],
1450
+ [1, 11, 2],
1451
+ [1, 12, 2],
1452
+ [1, 13, 6],
1453
+ [1, 14, 9],
1454
+ [1, 15, 11],
1455
+ [1, 16, 6],
1456
+ [1, 17, 7],
1457
+ [1, 18, 8],
1458
+ [1, 19, 12],
1459
+ [1, 20, 5],
1460
+ [1, 21, 5],
1461
+ [1, 22, 7],
1462
+ [1, 23, 2],
1463
+ [2, 0, 1],
1464
+ [2, 1, 1],
1465
+ [2, 2, 0],
1466
+ [2, 3, 0],
1467
+ [2, 4, 0],
1468
+ [2, 5, 0],
1469
+ [2, 6, 0],
1470
+ [2, 7, 0],
1471
+ [2, 8, 0],
1472
+ [2, 9, 0],
1473
+ [2, 10, 3],
1474
+ [2, 11, 2],
1475
+ [2, 12, 1],
1476
+ [2, 13, 9],
1477
+ [2, 14, 8],
1478
+ [2, 15, 10],
1479
+ [2, 16, 6],
1480
+ [2, 17, 5],
1481
+ [2, 18, 5],
1482
+ [2, 19, 5],
1483
+ [2, 20, 7],
1484
+ [2, 21, 4],
1485
+ [2, 22, 2],
1486
+ [2, 23, 4],
1487
+ [3, 0, 7],
1488
+ [3, 1, 3],
1489
+ [3, 2, 0],
1490
+ [3, 3, 0],
1491
+ [3, 4, 0],
1492
+ [3, 5, 0],
1493
+ [3, 6, 0],
1494
+ [3, 7, 0],
1495
+ [3, 8, 1],
1496
+ [3, 9, 0],
1497
+ [3, 10, 5],
1498
+ [3, 11, 4],
1499
+ [3, 12, 7],
1500
+ [3, 13, 14],
1501
+ [3, 14, 13],
1502
+ [3, 15, 12],
1503
+ [3, 16, 9],
1504
+ [3, 17, 5],
1505
+ [3, 18, 5],
1506
+ [3, 19, 10],
1507
+ [3, 20, 6],
1508
+ [3, 21, 4],
1509
+ [3, 22, 4],
1510
+ [3, 23, 1],
1511
+ [4, 0, 1],
1512
+ [4, 1, 3],
1513
+ [4, 2, 0],
1514
+ [4, 3, 0],
1515
+ [4, 4, 0],
1516
+ [4, 5, 1],
1517
+ [4, 6, 0],
1518
+ [4, 7, 0],
1519
+ [4, 8, 0],
1520
+ [4, 9, 2],
1521
+ [4, 10, 4],
1522
+ [4, 11, 4],
1523
+ [4, 12, 2],
1524
+ [4, 13, 4],
1525
+ [4, 14, 4],
1526
+ [4, 15, 14],
1527
+ [4, 16, 12],
1528
+ [4, 17, 1],
1529
+ [4, 18, 8],
1530
+ [4, 19, 5],
1531
+ [4, 20, 3],
1532
+ [4, 21, 7],
1533
+ [4, 22, 3],
1534
+ [4, 23, 0],
1535
+ [5, 0, 2],
1536
+ [5, 1, 1],
1537
+ [5, 2, 0],
1538
+ [5, 3, 3],
1539
+ [5, 4, 0],
1540
+ [5, 5, 0],
1541
+ [5, 6, 0],
1542
+ [5, 7, 0],
1543
+ [5, 8, 2],
1544
+ [5, 9, 0],
1545
+ [5, 10, 4],
1546
+ [5, 11, 1],
1547
+ [5, 12, 5],
1548
+ [5, 13, 10],
1549
+ [5, 14, 5],
1550
+ [5, 15, 7],
1551
+ [5, 16, 11],
1552
+ [5, 17, 6],
1553
+ [5, 18, 0],
1554
+ [5, 19, 5],
1555
+ [5, 20, 3],
1556
+ [5, 21, 4],
1557
+ [5, 22, 2],
1558
+ [5, 23, 0],
1559
+ [6, 0, 1],
1560
+ [6, 1, 0],
1561
+ [6, 2, 0],
1562
+ [6, 3, 0],
1563
+ [6, 4, 0],
1564
+ [6, 5, 0],
1565
+ [6, 6, 0],
1566
+ [6, 7, 0],
1567
+ [6, 8, 0],
1568
+ [6, 9, 0],
1569
+ [6, 10, 1],
1570
+ [6, 11, 0],
1571
+ [6, 12, 2],
1572
+ [6, 13, 1],
1573
+ [6, 14, 3],
1574
+ [6, 15, 4],
1575
+ [6, 16, 0],
1576
+ [6, 17, 0],
1577
+ [6, 18, 0],
1578
+ [6, 19, 0],
1579
+ [6, 20, 1],
1580
+ [6, 21, 2],
1581
+ [6, 22, 2],
1582
+ [6, 23, 6]
1583
+ ].map(function(item) {
1584
+ return {
1585
+ value: [item[1], item[0], item[2]]
1586
+ };
1587
+ }),
1588
+ shading: "color",
1589
+ label: {
1590
+ show: false,
1591
+ fontSize: 16,
1592
+ borderWidth: 1
1593
+ },
1594
+ itemStyle: {
1595
+ opacity: 0.4
1596
+ },
1597
+ emphasis: {
1598
+ label: {
1599
+ fontSize: 20,
1600
+ color: "#900"
1601
+ },
1602
+ itemStyle: {
1603
+ color: "#900"
1604
+ }
1605
+ }
1606
+ }
1607
+ ]
1608
+ },
1609
+ options14: {
1610
+ tooltip: {},
1611
+ backgroundColor: "#fff",
1612
+ visualMap: {
1613
+ show: false,
1614
+ dimension: 2,
1615
+ min: 0,
1616
+ max: 30,
1617
+ inRange: {
1618
+ color: [
1619
+ "#313695",
1620
+ "#4575b4",
1621
+ "#74add1",
1622
+ "#abd9e9",
1623
+ "#e0f3f8",
1624
+ "#ffffbf",
1625
+ "#fee090",
1626
+ "#fdae61",
1627
+ "#f46d43",
1628
+ "#d73027",
1629
+ "#a50026"
1630
+ ]
1631
+ }
1632
+ },
1633
+ xAxis3D: {
1634
+ type: "value"
1635
+ },
1636
+ yAxis3D: {
1637
+ type: "value"
1638
+ },
1639
+ zAxis3D: {
1640
+ type: "value"
1641
+ },
1642
+ grid3D: {
1643
+ viewControl: {
1644
+ projection: "orthographic"
1645
+ }
1646
+ },
1647
+ series: [
1648
+ {
1649
+ type: "line3D",
1650
+ data: (function() {
1651
+ let data = [];
1652
+ // Parametric curve
1653
+ for (let t = 0; t < 25; t += 0.001) {
1654
+ let x = (1 + 0.25 * Math.cos(75 * t)) * Math.cos(t);
1655
+ let y = (1 + 0.25 * Math.cos(75 * t)) * Math.sin(t);
1656
+ let z = t + 2.0 * Math.sin(75 * t);
1657
+ data.push([x, y, z]);
1658
+ }
1659
+ return data;
1660
+ })(),
1661
+ lineStyle: {
1662
+ width: 4
1663
+ }
1664
+ }
1665
+ ]
1666
+ },
1667
+ options15: {
1668
+ tooltip: {},
1669
+ backgroundColor: "#fff",
1670
+ visualMap: {
1671
+ show: false,
1672
+ dimension: 2,
1673
+ min: -1,
1674
+ max: 1,
1675
+ inRange: {
1676
+ color: [
1677
+ "#313695",
1678
+ "#4575b4",
1679
+ "#74add1",
1680
+ "#abd9e9",
1681
+ "#e0f3f8",
1682
+ "#ffffbf",
1683
+ "#fee090",
1684
+ "#fdae61",
1685
+ "#f46d43",
1686
+ "#d73027",
1687
+ "#a50026"
1688
+ ]
1689
+ }
1690
+ },
1691
+ xAxis3D: {
1692
+ type: "value"
1693
+ },
1694
+ yAxis3D: {
1695
+ type: "value"
1696
+ },
1697
+ zAxis3D: {
1698
+ type: "value"
1699
+ },
1700
+ grid3D: {},
1701
+ series: [
1702
+ {
1703
+ type: "surface",
1704
+ wireframe: {},
1705
+ equation: {
1706
+ x: {
1707
+ step: 0.05
1708
+ },
1709
+ y: {
1710
+ step: 0.05
1711
+ },
1712
+ z: function(x, y) {
1713
+ if (Math.abs(x) < 0.1 && Math.abs(y) < 0.1) {
1714
+ return "-";
1715
+ }
1716
+ return Math.sin(x * Math.PI) * Math.sin(y * Math.PI);
1717
+ }
1718
+ }
1719
+ }
1720
+ ]
1721
+ }
1722
+ },
1723
+ actions: []
1724
+ };
1725
+ },
1726
+ mounted: function() {
1727
+ return {};
1728
+ },
1729
+ computed: {},
1730
+ methods: {}
1731
+ });
1732
+ </script>
1733
+ </body>
1734
+ </html>