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