w-plot-vue 1.0.4 → 1.0.6

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 (136) hide show
  1. package/README.md +12 -11
  2. package/dist/w-plot-vue.umd.js +13 -2
  3. package/dist/w-plot-vue.umd.js.map +1 -1
  4. package/docs/examples/app.html +1 -1
  5. package/docs/examples/app.umd.js +13 -2
  6. package/docs/examples/app.umd.js.map +1 -1
  7. package/docs/examples/w-bar_horizontal_multi-set(color).html +26 -16
  8. package/docs/examples/w-bar_horizontal_multi-set(color, gradient).html +26 -16
  9. package/docs/examples/w-bar_horizontal_multi-set(series color).html +26 -16
  10. package/docs/examples/w-bar_horizontal_multi-set(series color, gradient).html +26 -16
  11. package/docs/examples/w-bar_horizontal_multi-set.html +26 -16
  12. package/docs/examples/w-bar_horizontal_multi-set__barDisplay(stackNormal).html +26 -16
  13. package/docs/examples/w-bar_horizontal_multi-set__barDisplay(stackPercent).html +26 -16
  14. package/docs/examples/w-bar_horizontal_multi-set__hide legned.html +26 -16
  15. package/docs/examples/w-bar_horizontal_multi-set__show labels.html +26 -16
  16. package/docs/examples/w-bar_horizontal_multi-set_barKpColor(gradient).html +26 -16
  17. package/docs/examples/w-bar_horizontal_multi-set_barKpColor.html +26 -16
  18. package/docs/examples/w-bar_horizontal_multi-set_barUseInnerLabelsForHorizontal_barGroupWidthRatio.html +26 -16
  19. package/docs/examples/w-bar_horizontal_multi-set_barWidthRatio.html +26 -16
  20. package/docs/examples/w-bar_horizontal_multi-set_barWidthRatio_barGroupWidthRatio.html +26 -16
  21. package/docs/examples/w-bar_horizontal_one-set(color).html +26 -16
  22. package/docs/examples/w-bar_horizontal_one-set(color, gradient).html +26 -16
  23. package/docs/examples/w-bar_horizontal_one-set.html +26 -16
  24. package/docs/examples/w-bar_horizontal_one-set_barColor(gradient).html +26 -16
  25. package/docs/examples/w-bar_horizontal_one-set_barColor.html +26 -16
  26. package/docs/examples/w-bar_horizontal_one-set_barKpColor(gradient).html +26 -16
  27. package/docs/examples/w-bar_horizontal_one-set_barKpColor.html +26 -16
  28. package/docs/examples/w-bar_horizontal_one-set_barUseInnerLabelsForHorizontal.html +26 -16
  29. package/docs/examples/w-bar_horizontal_one-set_barWidthRatio.html +26 -16
  30. package/docs/examples/w-bar_horizontal_one-set_barWidthRatio_barGroupWidthRatio.html +26 -16
  31. package/docs/examples/w-bar_horizontal_one-set_hide labels.html +26 -16
  32. package/docs/examples/w-bar_horizontal_one-set_marginLeft_marginRight.html +26 -16
  33. package/docs/examples/w-bar_horizontal_one-set_show legned.html +26 -16
  34. package/docs/examples/w-bar_multi-set(color).html +26 -16
  35. package/docs/examples/w-bar_multi-set(color, gradient).html +26 -16
  36. package/docs/examples/w-bar_multi-set(series color).html +26 -16
  37. package/docs/examples/w-bar_multi-set(series color, gradient).html +26 -16
  38. package/docs/examples/w-bar_multi-set.html +26 -16
  39. package/docs/examples/w-bar_multi-set__barDisplay(stackNormal).html +26 -16
  40. package/docs/examples/w-bar_multi-set__barDisplay(stackNormal)_.html +26 -16
  41. package/docs/examples/w-bar_multi-set__barDisplay(stackPercent).html +26 -16
  42. package/docs/examples/w-bar_multi-set__hide legned.html +26 -16
  43. package/docs/examples/w-bar_multi-set__show labels.html +26 -16
  44. package/docs/examples/w-bar_multi-set_barKpColor(gradient).html +26 -16
  45. package/docs/examples/w-bar_multi-set_barKpColor.html +26 -16
  46. package/docs/examples/w-bar_multi-set_barWidthRatio.html +26 -16
  47. package/docs/examples/w-bar_multi-set_barWidthRatio_barGroupWidthRatio_barBorderRadius.html +26 -16
  48. package/docs/examples/w-bar_one-set(color).html +26 -16
  49. package/docs/examples/w-bar_one-set(color, gradient).html +26 -16
  50. package/docs/examples/w-bar_one-set.html +26 -16
  51. package/docs/examples/w-bar_one-set_barColor(gradient).html +26 -16
  52. package/docs/examples/w-bar_one-set_barColor.html +26 -16
  53. package/docs/examples/w-bar_one-set_barKpColor(gradient).html +26 -16
  54. package/docs/examples/w-bar_one-set_barKpColor.html +26 -16
  55. package/docs/examples/w-bar_one-set_barWidthRatio.html +26 -16
  56. package/docs/examples/w-bar_one-set_barWidthRatio_barGroupWidthRatio_barBorderRadius.html +26 -16
  57. package/docs/examples/w-bar_one-set_hide labels.html +26 -16
  58. package/docs/examples/w-bar_one-set_marginLeft_marginRight_marginTop.html +26 -16
  59. package/docs/examples/w-bar_one-set_show legned.html +26 -16
  60. package/docs/examples/w-pie_one-set(color).html +26 -16
  61. package/docs/examples/w-pie_one-set(color, gradient).html +26 -16
  62. package/docs/examples/w-pie_one-set.html +26 -16
  63. package/docs/examples/w-pie_one-set_hide labels.html +26 -16
  64. package/docs/examples/w-pie_one-set_hide legned.html +26 -16
  65. package/docs/examples/w-pie_one-set_marginLeft_marginRight_marginTop.html +26 -16
  66. package/docs/examples/w-pie_one-set_pieBorderRadius.html +26 -16
  67. package/docs/examples/w-pie_one-set_pieBorderWidth_pieBorderRadius.html +26 -16
  68. package/docs/examples/w-pie_one-set_pieKpColor(gradient).html +26 -16
  69. package/docs/examples/w-pie_one-set_pieKpColor.html +26 -16
  70. package/docs/examples/w-pie_one-set_pieThicknessRatio.html +26 -16
  71. package/docs/examples/{w-plot_default.html → w-plot-2d_default.html} +29 -19
  72. package/docs/examples/w-plot-3d_default.html +209 -0
  73. package/docs/examples/w-rose_multi-set(color).html +26 -16
  74. package/docs/examples/w-rose_multi-set(color, gradient).html +26 -16
  75. package/docs/examples/w-rose_multi-set(series color).html +26 -16
  76. package/docs/examples/w-rose_multi-set(series color, gradient).html +26 -16
  77. package/docs/examples/w-rose_multi-set.html +26 -16
  78. package/docs/examples/w-rose_multi-set__hide legned.html +26 -16
  79. package/docs/examples/w-rose_multi-set__show labels.html +26 -16
  80. package/docs/examples/w-rose_multi-set_roseBorderWidth.html +26 -16
  81. package/docs/examples/w-rose_multi-set_roseKpColor(gradient).html +26 -16
  82. package/docs/examples/w-rose_multi-set_roseKpColor.html +26 -16
  83. package/docs/examples/w-rose_multi-set_roseWidthRatio.html +26 -16
  84. package/docs/examples/w-rose_one-set(color).html +26 -16
  85. package/docs/examples/w-rose_one-set(color, gradient).html +26 -16
  86. package/docs/examples/w-rose_one-set.html +26 -16
  87. package/docs/examples/w-rose_one-set_marginLeft_marginRight_marginTop.html +26 -16
  88. package/docs/examples/w-rose_one-set_roseBorderWidth.html +26 -16
  89. package/docs/examples/w-rose_one-set_roseKpColor(gradient).html +26 -16
  90. package/docs/examples/w-rose_one-set_roseKpColor.html +26 -16
  91. package/docs/examples/w-rose_one-set_roseShowLabels.html +26 -16
  92. package/docs/examples/w-rose_one-set_roseWidthRatio.html +26 -16
  93. package/docs/examples/w-rose_one-set_showLegend.html +26 -16
  94. package/docs/examples/w-rose_one-set_showLegend_legendPosition.html +26 -16
  95. package/docs/examples/w-set-multi_default.html +26 -16
  96. package/docs/examples/w-set-multi_hide labels.html +26 -16
  97. package/docs/examples/w-set-multi_hide legned.html +26 -16
  98. package/docs/examples/w-set-multi_keySelect.html +26 -16
  99. package/docs/examples/w-set-multi_slot head.html +26 -16
  100. package/docs/examples/w-set-multi_textPlotType_kpSelectText_widthSelect.html +26 -16
  101. package/docs/examples/w-set-one_default.html +26 -16
  102. package/docs/examples/w-set-one_hide labels.html +26 -16
  103. package/docs/examples/w-set-one_keySelect.html +26 -16
  104. package/docs/examples/w-set-one_show legned.html +26 -16
  105. package/docs/examples/w-set-one_slot head.html +26 -16
  106. package/docs/examples/w-set-one_textPlotType_kpSelectText_widthSelect.html +26 -16
  107. package/docs/getDefAxis.mjs.html +2 -2
  108. package/docs/getDefChart.mjs.html +2 -2
  109. package/docs/getDefLegend.mjs.html +2 -2
  110. package/docs/getDefOpt.mjs.html +2 -2
  111. package/docs/global.html +2 -2
  112. package/docs/index.html +2 -2
  113. package/docs/module-WBar.html +2 -2
  114. package/docs/module-WPie.html +2 -2
  115. package/docs/{module-WPlot.html → module-WPlot2d.html} +4 -4
  116. package/docs/module-WPlot3d.html +216 -0
  117. package/docs/module-WRose.html +2 -2
  118. package/docs/module-WSetMulti.html +2 -2
  119. package/docs/module-WSetOne.html +2 -2
  120. package/docs/setLegendLoc.mjs.html +2 -2
  121. package/package.json +7 -5
  122. package/src/App.vue +104 -52
  123. package/src/AppZoneWBar.vue +1 -1
  124. package/src/AppZoneWPie.vue +1 -1
  125. package/src/{AppZoneWPlot.vue → AppZoneWPlot2d.vue} +9 -9
  126. package/src/AppZoneWPlot3d.vue +106 -0
  127. package/src/AppZoneWRose.vue +1 -1
  128. package/src/AppZoneWSetMulti.vue +1 -1
  129. package/src/AppZoneWSetOne.vue +1 -1
  130. package/src/components/WBar.vue +4 -4
  131. package/src/components/WPie.vue +4 -4
  132. package/src/components/WPlot3d.vue +1256 -0
  133. package/src/components/WPlotVue.vue +4 -2
  134. package/src/components/WRose.vue +4 -4
  135. package/toolg/gExtractHtml.mjs +22 -15
  136. /package/src/components/{WPlot.vue → WPlot2d.vue} +0 -0
@@ -66,16 +66,9 @@
66
66
  ></script>
67
67
 
68
68
  <!-- w-plot-vue -->
69
- <script src="https://cdn.jsdelivr.net/npm/w-plot-vue@1.0.4/dist/w-plot-vue.umd.js"></script>
69
+ <script src="https://cdn.jsdelivr.net/npm/w-plot-vue@1.0.6/dist/w-plot-vue.umd.js"></script>
70
70
 
71
71
  <style>
72
- .v-application--wrap {
73
- /* width與max-width fix for IE11, 其外不能使用padding或margin避免失效 */
74
- width: 100vw;
75
- max-width: 100vw;
76
- font-family: inherit;
77
- background: #fff;
78
- }
79
72
  .item {
80
73
  /* 因item位於demolink, 提取各範例html後會刪除demolink, 故得額外補上 */
81
74
  border-left: 3px solid #ffba75;
@@ -87,19 +80,36 @@
87
80
  align-items: center;
88
81
  }
89
82
  .head1 {
90
- margin: 0px;
91
83
  padding: 0px 0px 20px 0px;
92
84
  font-size: 2.5rem;
93
85
  }
86
+ .bkh {
87
+ /* 寬 */
88
+ padding: 20px;
89
+ }
90
+ @media screen and (max-width: 800px) {
91
+ /* 中 */
92
+ .bkh {
93
+ padding: 10px;
94
+ }
95
+ }
96
+ @media screen and (max-width: 400px) {
97
+ /* 窄 */
98
+ .bkh {
99
+ padding: 5px;
100
+ }
101
+ }
94
102
  .bk {
103
+ /* 寬 */
104
+ display: inline-block;
95
105
  vertical-align: top;
96
- padding: 10px 0px 60px 0px;
106
+ padding: 0px 80px 60px 0px;
97
107
  }
98
- @media screen and (min-width: 1000px) {
99
- /* 寬版 */
108
+ @media screen and (max-width: 1000px) {
109
+ /* 中窄 */
100
110
  .bk {
101
- display: inline-block;
102
- margin: 0px 80px 0px 0px;
111
+ display: block;
112
+ padding: 0px 0px 50px 0px;
103
113
  }
104
114
  }
105
115
  </style>
@@ -107,20 +117,20 @@
107
117
  <body
108
118
  style="font-family:'Microsoft JhengHei','Avenir','Helvetica'; padding:0px; margin:0px;"
109
119
  >
110
- <v-app id="app" style="font-family:inherit; padding:0px 30px;">
120
+ <div id="app" class="bkh" style>
111
121
  <div class="head1">
112
122
  <span
113
123
  style="cursor:pointer;"
114
124
  title="open for copy link to view component"
115
125
  onclick="window.open('//yuda-lyu.github.io/w-plot-vue/examples/app.html?cmp='+this.innerText,'_blank')"
116
- >w-plot</span>
126
+ >w-plot-2d</span>
117
127
  </div>
118
128
  <div class="bk">
119
129
  <div class="item">default</div>
120
130
 
121
- <w-plot :options="WPlot.option1"></w-plot>
131
+ <w-plot-2d :options="WPlot2d.option1"></w-plot-2d>
122
132
  </div>
123
- </v-app>
133
+ </div>
124
134
 
125
135
  <script>
126
136
  //install
@@ -132,7 +142,7 @@
132
142
 
133
143
  data: function() {
134
144
  return {
135
- WPlot: {
145
+ WPlot2d: {
136
146
  option1: {
137
147
  title: {
138
148
  text: "AAPL Stock Price"
@@ -0,0 +1,209 @@
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-plot-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.2.96/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
47
+ src="https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/data/dataAAPL.js"
48
+ ></script>
49
+ <script
50
+ src="https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/data/dataUSD2EUR.js"
51
+ ></script>
52
+ <script
53
+ src="https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/data/dataTemperature.js"
54
+ ></script>
55
+ <script
56
+ src="https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/data/dataHousePriceArea.js"
57
+ ></script>
58
+ <script
59
+ src="https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/data/dataFlare.js"
60
+ ></script>
61
+ <script
62
+ src="https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/data/dataRain.js"
63
+ ></script>
64
+ <script
65
+ src="https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/data/dataRainClip.js"
66
+ ></script>
67
+
68
+ <!-- w-plot-vue -->
69
+ <script src="https://cdn.jsdelivr.net/npm/w-plot-vue@1.0.6/dist/w-plot-vue.umd.js"></script>
70
+
71
+ <style>
72
+ .item {
73
+ /* 因item位於demolink, 提取各範例html後會刪除demolink, 故得額外補上 */
74
+ border-left: 3px solid #ffba75;
75
+ margin: 5px 5px 8px 0px;
76
+ padding: 3px 3px 5px 10px;
77
+ font-size: 0.9rem;
78
+ display: flex;
79
+ justify-content: flex-start;
80
+ align-items: center;
81
+ }
82
+ .head1 {
83
+ padding: 0px 0px 20px 0px;
84
+ font-size: 2.5rem;
85
+ }
86
+ .bkh {
87
+ /* 寬 */
88
+ padding: 20px;
89
+ }
90
+ @media screen and (max-width: 800px) {
91
+ /* 中 */
92
+ .bkh {
93
+ padding: 10px;
94
+ }
95
+ }
96
+ @media screen and (max-width: 400px) {
97
+ /* 窄 */
98
+ .bkh {
99
+ padding: 5px;
100
+ }
101
+ }
102
+ .bk {
103
+ /* 寬 */
104
+ display: inline-block;
105
+ vertical-align: top;
106
+ padding: 0px 80px 60px 0px;
107
+ }
108
+ @media screen and (max-width: 1000px) {
109
+ /* 中窄 */
110
+ .bk {
111
+ display: block;
112
+ padding: 0px 0px 50px 0px;
113
+ }
114
+ }
115
+ </style>
116
+ </head>
117
+ <body
118
+ style="font-family:'Microsoft JhengHei','Avenir','Helvetica'; padding:0px; margin:0px;"
119
+ >
120
+ <div id="app" class="bkh" style>
121
+ <div class="head1">
122
+ <span
123
+ style="cursor:pointer;"
124
+ title="open for copy link to view component"
125
+ onclick="window.open('//yuda-lyu.github.io/w-plot-vue/examples/app.html?cmp='+this.innerText,'_blank')"
126
+ >w-plot-3d</span>
127
+ </div>
128
+ <div class="bk">
129
+ <div class="item">default</div>
130
+
131
+ <w-plot-3d :options="WPlot3d.option1"></w-plot-3d>
132
+ </div>
133
+ </div>
134
+
135
+ <script>
136
+ //install
137
+ Vue.use(window["w-plot-vue"]);
138
+
139
+ //initialize
140
+ new Vue({
141
+ el: "#app",
142
+
143
+ data: function() {
144
+ return {
145
+ WPlot3d: {
146
+ option1: {
147
+ width: 600,
148
+ height: 600,
149
+ items: [
150
+ // {
151
+ // url:'./3d_block.stl',
152
+ // name:'block',
153
+ // color:'#fff', //{ h: 320, s: 0.2, l: 0.15 }
154
+ // },
155
+ // {
156
+ // url:'./3D_Domain(ascii).stl',
157
+ // name:'testerA',
158
+ // color:'#fff', //{ h: 320, s: 0.2, l: 0.15 }
159
+ // },
160
+ {
161
+ url: "./topo_surface.stl",
162
+ name: "Surface",
163
+ color: "#d65c5c",
164
+ opacity: 0.9
165
+ },
166
+ {
167
+ url: "./A.stl",
168
+ name: "A",
169
+ color: "#d6d65c",
170
+ opacity: 0.9
171
+ },
172
+ {
173
+ url: "./B.stl",
174
+ name: "B",
175
+ color: "#5cd65c",
176
+ opacity: 0.9
177
+ },
178
+ {
179
+ url: "./C.stl",
180
+ name: "C",
181
+ color: "#5cd6d6",
182
+ opacity: 0.9
183
+ },
184
+ {
185
+ url: "./D.stl",
186
+ name: "D",
187
+ color: "#5c5cd6",
188
+ opacity: 0.9
189
+ },
190
+ {
191
+ url: "./E.stl",
192
+ name: "E",
193
+ color: "#d65cd6",
194
+ opacity: 0.9
195
+ }
196
+ ]
197
+ }
198
+ }
199
+ };
200
+ },
201
+ mounted: function() {
202
+ return {};
203
+ },
204
+ computed: {},
205
+ methods: {}
206
+ });
207
+ </script>
208
+ </body>
209
+ </html>
@@ -66,16 +66,9 @@
66
66
  ></script>
67
67
 
68
68
  <!-- w-plot-vue -->
69
- <script src="https://cdn.jsdelivr.net/npm/w-plot-vue@1.0.4/dist/w-plot-vue.umd.js"></script>
69
+ <script src="https://cdn.jsdelivr.net/npm/w-plot-vue@1.0.6/dist/w-plot-vue.umd.js"></script>
70
70
 
71
71
  <style>
72
- .v-application--wrap {
73
- /* width與max-width fix for IE11, 其外不能使用padding或margin避免失效 */
74
- width: 100vw;
75
- max-width: 100vw;
76
- font-family: inherit;
77
- background: #fff;
78
- }
79
72
  .item {
80
73
  /* 因item位於demolink, 提取各範例html後會刪除demolink, 故得額外補上 */
81
74
  border-left: 3px solid #ffba75;
@@ -87,19 +80,36 @@
87
80
  align-items: center;
88
81
  }
89
82
  .head1 {
90
- margin: 0px;
91
83
  padding: 0px 0px 20px 0px;
92
84
  font-size: 2.5rem;
93
85
  }
86
+ .bkh {
87
+ /* 寬 */
88
+ padding: 20px;
89
+ }
90
+ @media screen and (max-width: 800px) {
91
+ /* 中 */
92
+ .bkh {
93
+ padding: 10px;
94
+ }
95
+ }
96
+ @media screen and (max-width: 400px) {
97
+ /* 窄 */
98
+ .bkh {
99
+ padding: 5px;
100
+ }
101
+ }
94
102
  .bk {
103
+ /* 寬 */
104
+ display: inline-block;
95
105
  vertical-align: top;
96
- padding: 10px 0px 60px 0px;
106
+ padding: 0px 80px 60px 0px;
97
107
  }
98
- @media screen and (min-width: 1000px) {
99
- /* 寬版 */
108
+ @media screen and (max-width: 1000px) {
109
+ /* 中窄 */
100
110
  .bk {
101
- display: inline-block;
102
- margin: 0px 80px 0px 0px;
111
+ display: block;
112
+ padding: 0px 0px 50px 0px;
103
113
  }
104
114
  }
105
115
  </style>
@@ -107,7 +117,7 @@
107
117
  <body
108
118
  style="font-family:'Microsoft JhengHei','Avenir','Helvetica'; padding:0px; margin:0px;"
109
119
  >
110
- <v-app id="app" style="font-family:inherit; padding:0px 30px;">
120
+ <div id="app" class="bkh" style>
111
121
  <div class="head1">
112
122
  <span
113
123
  style="cursor:pointer;"
@@ -126,7 +136,7 @@
126
136
  }"
127
137
  ></w-rose>
128
138
  </div>
129
- </v-app>
139
+ </div>
130
140
 
131
141
  <script>
132
142
  //install
@@ -66,16 +66,9 @@
66
66
  ></script>
67
67
 
68
68
  <!-- w-plot-vue -->
69
- <script src="https://cdn.jsdelivr.net/npm/w-plot-vue@1.0.4/dist/w-plot-vue.umd.js"></script>
69
+ <script src="https://cdn.jsdelivr.net/npm/w-plot-vue@1.0.6/dist/w-plot-vue.umd.js"></script>
70
70
 
71
71
  <style>
72
- .v-application--wrap {
73
- /* width與max-width fix for IE11, 其外不能使用padding或margin避免失效 */
74
- width: 100vw;
75
- max-width: 100vw;
76
- font-family: inherit;
77
- background: #fff;
78
- }
79
72
  .item {
80
73
  /* 因item位於demolink, 提取各範例html後會刪除demolink, 故得額外補上 */
81
74
  border-left: 3px solid #ffba75;
@@ -87,19 +80,36 @@
87
80
  align-items: center;
88
81
  }
89
82
  .head1 {
90
- margin: 0px;
91
83
  padding: 0px 0px 20px 0px;
92
84
  font-size: 2.5rem;
93
85
  }
86
+ .bkh {
87
+ /* 寬 */
88
+ padding: 20px;
89
+ }
90
+ @media screen and (max-width: 800px) {
91
+ /* 中 */
92
+ .bkh {
93
+ padding: 10px;
94
+ }
95
+ }
96
+ @media screen and (max-width: 400px) {
97
+ /* 窄 */
98
+ .bkh {
99
+ padding: 5px;
100
+ }
101
+ }
94
102
  .bk {
103
+ /* 寬 */
104
+ display: inline-block;
95
105
  vertical-align: top;
96
- padding: 10px 0px 60px 0px;
106
+ padding: 0px 80px 60px 0px;
97
107
  }
98
- @media screen and (min-width: 1000px) {
99
- /* 寬版 */
108
+ @media screen and (max-width: 1000px) {
109
+ /* 中窄 */
100
110
  .bk {
101
- display: inline-block;
102
- margin: 0px 80px 0px 0px;
111
+ display: block;
112
+ padding: 0px 0px 50px 0px;
103
113
  }
104
114
  }
105
115
  </style>
@@ -107,7 +117,7 @@
107
117
  <body
108
118
  style="font-family:'Microsoft JhengHei','Avenir','Helvetica'; padding:0px; margin:0px;"
109
119
  >
110
- <v-app id="app" style="font-family:inherit; padding:0px 30px;">
120
+ <div id="app" class="bkh" style>
111
121
  <div class="head1">
112
122
  <span
113
123
  style="cursor:pointer;"
@@ -126,7 +136,7 @@
126
136
  }"
127
137
  ></w-rose>
128
138
  </div>
129
- </v-app>
139
+ </div>
130
140
 
131
141
  <script>
132
142
  //install
@@ -66,16 +66,9 @@
66
66
  ></script>
67
67
 
68
68
  <!-- w-plot-vue -->
69
- <script src="https://cdn.jsdelivr.net/npm/w-plot-vue@1.0.4/dist/w-plot-vue.umd.js"></script>
69
+ <script src="https://cdn.jsdelivr.net/npm/w-plot-vue@1.0.6/dist/w-plot-vue.umd.js"></script>
70
70
 
71
71
  <style>
72
- .v-application--wrap {
73
- /* width與max-width fix for IE11, 其外不能使用padding或margin避免失效 */
74
- width: 100vw;
75
- max-width: 100vw;
76
- font-family: inherit;
77
- background: #fff;
78
- }
79
72
  .item {
80
73
  /* 因item位於demolink, 提取各範例html後會刪除demolink, 故得額外補上 */
81
74
  border-left: 3px solid #ffba75;
@@ -87,19 +80,36 @@
87
80
  align-items: center;
88
81
  }
89
82
  .head1 {
90
- margin: 0px;
91
83
  padding: 0px 0px 20px 0px;
92
84
  font-size: 2.5rem;
93
85
  }
86
+ .bkh {
87
+ /* 寬 */
88
+ padding: 20px;
89
+ }
90
+ @media screen and (max-width: 800px) {
91
+ /* 中 */
92
+ .bkh {
93
+ padding: 10px;
94
+ }
95
+ }
96
+ @media screen and (max-width: 400px) {
97
+ /* 窄 */
98
+ .bkh {
99
+ padding: 5px;
100
+ }
101
+ }
94
102
  .bk {
103
+ /* 寬 */
104
+ display: inline-block;
95
105
  vertical-align: top;
96
- padding: 10px 0px 60px 0px;
106
+ padding: 0px 80px 60px 0px;
97
107
  }
98
- @media screen and (min-width: 1000px) {
99
- /* 寬版 */
108
+ @media screen and (max-width: 1000px) {
109
+ /* 中窄 */
100
110
  .bk {
101
- display: inline-block;
102
- margin: 0px 80px 0px 0px;
111
+ display: block;
112
+ padding: 0px 0px 50px 0px;
103
113
  }
104
114
  }
105
115
  </style>
@@ -107,7 +117,7 @@
107
117
  <body
108
118
  style="font-family:'Microsoft JhengHei','Avenir','Helvetica'; padding:0px; margin:0px;"
109
119
  >
110
- <v-app id="app" style="font-family:inherit; padding:0px 30px;">
120
+ <div id="app" class="bkh" style>
111
121
  <div class="head1">
112
122
  <span
113
123
  style="cursor:pointer;"
@@ -126,7 +136,7 @@
126
136
  }"
127
137
  ></w-rose>
128
138
  </div>
129
- </v-app>
139
+ </div>
130
140
 
131
141
  <script>
132
142
  //install
@@ -66,16 +66,9 @@
66
66
  ></script>
67
67
 
68
68
  <!-- w-plot-vue -->
69
- <script src="https://cdn.jsdelivr.net/npm/w-plot-vue@1.0.4/dist/w-plot-vue.umd.js"></script>
69
+ <script src="https://cdn.jsdelivr.net/npm/w-plot-vue@1.0.6/dist/w-plot-vue.umd.js"></script>
70
70
 
71
71
  <style>
72
- .v-application--wrap {
73
- /* width與max-width fix for IE11, 其外不能使用padding或margin避免失效 */
74
- width: 100vw;
75
- max-width: 100vw;
76
- font-family: inherit;
77
- background: #fff;
78
- }
79
72
  .item {
80
73
  /* 因item位於demolink, 提取各範例html後會刪除demolink, 故得額外補上 */
81
74
  border-left: 3px solid #ffba75;
@@ -87,19 +80,36 @@
87
80
  align-items: center;
88
81
  }
89
82
  .head1 {
90
- margin: 0px;
91
83
  padding: 0px 0px 20px 0px;
92
84
  font-size: 2.5rem;
93
85
  }
86
+ .bkh {
87
+ /* 寬 */
88
+ padding: 20px;
89
+ }
90
+ @media screen and (max-width: 800px) {
91
+ /* 中 */
92
+ .bkh {
93
+ padding: 10px;
94
+ }
95
+ }
96
+ @media screen and (max-width: 400px) {
97
+ /* 窄 */
98
+ .bkh {
99
+ padding: 5px;
100
+ }
101
+ }
94
102
  .bk {
103
+ /* 寬 */
104
+ display: inline-block;
95
105
  vertical-align: top;
96
- padding: 10px 0px 60px 0px;
106
+ padding: 0px 80px 60px 0px;
97
107
  }
98
- @media screen and (min-width: 1000px) {
99
- /* 寬版 */
108
+ @media screen and (max-width: 1000px) {
109
+ /* 中窄 */
100
110
  .bk {
101
- display: inline-block;
102
- margin: 0px 80px 0px 0px;
111
+ display: block;
112
+ padding: 0px 0px 50px 0px;
103
113
  }
104
114
  }
105
115
  </style>
@@ -107,7 +117,7 @@
107
117
  <body
108
118
  style="font-family:'Microsoft JhengHei','Avenir','Helvetica'; padding:0px; margin:0px;"
109
119
  >
110
- <v-app id="app" style="font-family:inherit; padding:0px 30px;">
120
+ <div id="app" class="bkh" style>
111
121
  <div class="head1">
112
122
  <span
113
123
  style="cursor:pointer;"
@@ -126,7 +136,7 @@
126
136
  }"
127
137
  ></w-rose>
128
138
  </div>
129
- </v-app>
139
+ </div>
130
140
 
131
141
  <script>
132
142
  //install
@@ -66,16 +66,9 @@
66
66
  ></script>
67
67
 
68
68
  <!-- w-plot-vue -->
69
- <script src="https://cdn.jsdelivr.net/npm/w-plot-vue@1.0.4/dist/w-plot-vue.umd.js"></script>
69
+ <script src="https://cdn.jsdelivr.net/npm/w-plot-vue@1.0.6/dist/w-plot-vue.umd.js"></script>
70
70
 
71
71
  <style>
72
- .v-application--wrap {
73
- /* width與max-width fix for IE11, 其外不能使用padding或margin避免失效 */
74
- width: 100vw;
75
- max-width: 100vw;
76
- font-family: inherit;
77
- background: #fff;
78
- }
79
72
  .item {
80
73
  /* 因item位於demolink, 提取各範例html後會刪除demolink, 故得額外補上 */
81
74
  border-left: 3px solid #ffba75;
@@ -87,19 +80,36 @@
87
80
  align-items: center;
88
81
  }
89
82
  .head1 {
90
- margin: 0px;
91
83
  padding: 0px 0px 20px 0px;
92
84
  font-size: 2.5rem;
93
85
  }
86
+ .bkh {
87
+ /* 寬 */
88
+ padding: 20px;
89
+ }
90
+ @media screen and (max-width: 800px) {
91
+ /* 中 */
92
+ .bkh {
93
+ padding: 10px;
94
+ }
95
+ }
96
+ @media screen and (max-width: 400px) {
97
+ /* 窄 */
98
+ .bkh {
99
+ padding: 5px;
100
+ }
101
+ }
94
102
  .bk {
103
+ /* 寬 */
104
+ display: inline-block;
95
105
  vertical-align: top;
96
- padding: 10px 0px 60px 0px;
106
+ padding: 0px 80px 60px 0px;
97
107
  }
98
- @media screen and (min-width: 1000px) {
99
- /* 寬版 */
108
+ @media screen and (max-width: 1000px) {
109
+ /* 中窄 */
100
110
  .bk {
101
- display: inline-block;
102
- margin: 0px 80px 0px 0px;
111
+ display: block;
112
+ padding: 0px 0px 50px 0px;
103
113
  }
104
114
  }
105
115
  </style>
@@ -107,7 +117,7 @@
107
117
  <body
108
118
  style="font-family:'Microsoft JhengHei','Avenir','Helvetica'; padding:0px; margin:0px;"
109
119
  >
110
- <v-app id="app" style="font-family:inherit; padding:0px 30px;">
120
+ <div id="app" class="bkh" style>
111
121
  <div class="head1">
112
122
  <span
113
123
  style="cursor:pointer;"
@@ -126,7 +136,7 @@
126
136
  }"
127
137
  ></w-rose>
128
138
  </div>
129
- </v-app>
139
+ </div>
130
140
 
131
141
  <script>
132
142
  //install