npm - w-plot-vue - Versions diffs - 1.0.0 → 1.0.2 - Mend

w-plot-vue 1.0.0 → 1.0.2

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 (140) hide show

package/README.md +4 -4
package/dist/w-plot-vue.umd.js +7 -0
package/dist/w-plot-vue.umd.js.map +1 -0
package/docs/examples/app.html +1 -1
package/docs/examples/app.umd.js +2 -2
package/docs/examples/app.umd.js.map +1 -1
package/docs/examples/w-bar_horizontal_multi-set(color).html +10 -10
package/docs/examples/w-bar_horizontal_multi-set(color, gradient).html +10 -10
package/docs/examples/w-bar_horizontal_multi-set(series color).html +10 -10
package/docs/examples/w-bar_horizontal_multi-set(series color, gradient).html +10 -10
package/docs/examples/w-bar_horizontal_multi-set.html +10 -10
package/docs/examples/w-bar_horizontal_multi-set__barDisplay(stackNormal).html +10 -10
package/docs/examples/w-bar_horizontal_multi-set__barDisplay(stackPercent).html +10 -10
package/docs/examples/w-bar_horizontal_multi-set__hide legned.html +10 -10
package/docs/examples/w-bar_horizontal_multi-set__show labels.html +10 -10
package/docs/examples/w-bar_horizontal_multi-set_barKpColor(gradient).html +10 -10
package/docs/examples/w-bar_horizontal_multi-set_barKpColor.html +10 -10
package/docs/examples/w-bar_horizontal_multi-set_barUseInnerLabelsForHorizontal_barGroupWidthRatio.html +496 -0
package/docs/examples/w-bar_horizontal_multi-set_barWidthRatio.html +10 -10
package/docs/examples/w-bar_horizontal_multi-set_barWidthRatio_barGroupWidthRatio.html +10 -10
package/docs/examples/w-bar_horizontal_one-set(color).html +10 -10
package/docs/examples/w-bar_horizontal_one-set(color, gradient).html +10 -10
package/docs/examples/w-bar_horizontal_one-set.html +10 -10
package/docs/examples/w-bar_horizontal_one-set_barColor(gradient).html +10 -10
package/docs/examples/w-bar_horizontal_one-set_barColor.html +10 -10
package/docs/examples/w-bar_horizontal_one-set_barKpColor(gradient).html +10 -10
package/docs/examples/w-bar_horizontal_one-set_barKpColor.html +10 -10
package/docs/examples/w-bar_horizontal_one-set_barUseInnerLabelsForHorizontal.html +493 -0
package/docs/examples/w-bar_horizontal_one-set_barWidthRatio.html +10 -10
package/docs/examples/w-bar_horizontal_one-set_barWidthRatio_barGroupWidthRatio.html +10 -10
package/docs/examples/w-bar_horizontal_one-set_hide labels.html +10 -10
package/docs/examples/w-bar_horizontal_one-set_marginLeft_marginRight.html +10 -10
package/docs/examples/w-bar_horizontal_one-set_show legned.html +10 -10
package/docs/examples/w-bar_multi-set(color).html +10 -10
package/docs/examples/w-bar_multi-set(color, gradient).html +10 -10
package/docs/examples/w-bar_multi-set(series color).html +10 -10
package/docs/examples/w-bar_multi-set(series color, gradient).html +10 -10
package/docs/examples/w-bar_multi-set.html +10 -10
package/docs/examples/w-bar_multi-set__barDisplay(stackNormal).html +10 -10
package/docs/examples/w-bar_multi-set__barDisplay(stackNormal)_.html +10 -10
package/docs/examples/w-bar_multi-set__barDisplay(stackPercent).html +10 -10
package/docs/examples/w-bar_multi-set__hide legned.html +10 -10
package/docs/examples/w-bar_multi-set__show labels.html +10 -10
package/docs/examples/w-bar_multi-set_barKpColor(gradient).html +10 -10
package/docs/examples/w-bar_multi-set_barKpColor.html +10 -10
package/docs/examples/w-bar_multi-set_barWidthRatio.html +10 -10
package/docs/examples/w-bar_multi-set_barWidthRatio_barGroupWidthRatio_barBorderRadius.html +10 -10
package/docs/examples/w-bar_one-set(color).html +10 -10
package/docs/examples/w-bar_one-set(color, gradient).html +10 -10
package/docs/examples/w-bar_one-set.html +10 -10
package/docs/examples/w-bar_one-set_barColor(gradient).html +10 -10
package/docs/examples/w-bar_one-set_barColor.html +10 -10
package/docs/examples/w-bar_one-set_barKpColor(gradient).html +10 -10
package/docs/examples/w-bar_one-set_barKpColor.html +10 -10
package/docs/examples/w-bar_one-set_barWidthRatio.html +10 -10
package/docs/examples/w-bar_one-set_barWidthRatio_barGroupWidthRatio_barBorderRadius.html +10 -10
package/docs/examples/w-bar_one-set_hide labels.html +10 -10
package/docs/examples/w-bar_one-set_marginLeft_marginRight_marginTop.html +10 -10
package/docs/examples/w-bar_one-set_show legned.html +10 -10
package/docs/examples/w-pie_one-set(color).html +5 -5
package/docs/examples/w-pie_one-set(color, gradient).html +5 -5
package/docs/examples/w-pie_one-set.html +5 -5
package/docs/examples/w-pie_one-set_hide labels.html +5 -5
package/docs/examples/w-pie_one-set_hide legned.html +5 -5
package/docs/examples/w-pie_one-set_marginLeft_marginRight_marginTop.html +5 -5
package/docs/examples/w-pie_one-set_pieBorderRadius.html +5 -5
package/docs/examples/w-pie_one-set_pieBorderWidth_pieBorderRadius.html +5 -5
package/docs/examples/w-pie_one-set_pieKpColor(gradient).html +5 -5
package/docs/examples/w-pie_one-set_pieKpColor.html +5 -5
package/docs/examples/w-pie_one-set_pieThicknessRatio.html +5 -5
package/docs/examples/w-plot_default.html +1 -1
package/docs/examples/w-rose_multi-set(color).html +10 -10
package/docs/examples/w-rose_multi-set(color, gradient).html +10 -10
package/docs/examples/w-rose_multi-set(series color).html +10 -10
package/docs/examples/w-rose_multi-set(series color, gradient).html +10 -10
package/docs/examples/w-rose_multi-set.html +10 -10
package/docs/examples/w-rose_multi-set__hide legned.html +10 -10
package/docs/examples/w-rose_multi-set__show labels.html +10 -10
package/docs/examples/w-rose_multi-set_roseBorderWidth.html +10 -10
package/docs/examples/w-rose_multi-set_roseKpColor(gradient).html +10 -10
package/docs/examples/w-rose_multi-set_roseKpColor.html +10 -10
package/docs/examples/w-rose_multi-set_roseWidthRatio.html +10 -10
package/docs/examples/w-rose_one-set(color).html +10 -10
package/docs/examples/w-rose_one-set(color, gradient).html +10 -10
package/docs/examples/w-rose_one-set.html +10 -10
package/docs/examples/w-rose_one-set_marginLeft_marginRight_marginTop.html +10 -10
package/docs/examples/w-rose_one-set_roseBorderWidth.html +10 -10
package/docs/examples/w-rose_one-set_roseKpColor(gradient).html +10 -10
package/docs/examples/w-rose_one-set_roseKpColor.html +10 -10
package/docs/examples/w-rose_one-set_roseShowLabels.html +10 -10
package/docs/examples/w-rose_one-set_roseWidthRatio.html +10 -10
package/docs/examples/w-rose_one-set_showLegend.html +10 -10
package/docs/examples/w-rose_one-set_showLegend_legendPosition.html +10 -10
package/docs/examples/w-set-multi_default.html +221 -0
package/docs/examples/w-set-multi_hide labels.html +222 -0
package/docs/examples/w-set-multi_hide legned.html +222 -0
package/docs/examples/w-set-multi_keySelect.html +226 -0
package/docs/examples/w-set-multi_slot head.html +225 -0
package/docs/examples/w-set-multi_textPlotType_kpSelectText_widthSelect.html +233 -0
package/docs/examples/w-set-one_default.html +192 -0
package/docs/examples/w-set-one_hide labels.html +193 -0
package/docs/examples/w-set-one_keySelect.html +197 -0
package/docs/examples/w-set-one_show legned.html +193 -0
package/docs/examples/w-set-one_slot head.html +196 -0
package/docs/examples/w-set-one_textPlotType_kpSelectText_widthSelect.html +201 -0
package/docs/getDefAxis.mjs.html +5 -5
package/docs/getDefChart.mjs.html +3 -3
package/docs/getDefLegend.mjs.html +2 -2
package/docs/getDefOpt.mjs.html +2 -2
package/docs/global.html +2 -2
package/docs/index.html +2 -2
package/docs/module-WBar.html +2 -2
package/docs/module-WPie.html +2 -2
package/docs/module-WPlot.html +2 -2
package/docs/module-WRose.html +2 -2
package/docs/module-WSetMulti.html +216 -0
package/docs/module-WSetOne.html +216 -0
package/docs/setLegendLoc.mjs.html +2 -2
package/package.json +1 -1
package/src/App.vue +224 -20
package/src/AppZoneWBar.vue +50 -9
package/src/AppZoneWPie.vue +4 -4
package/src/AppZoneWRose.vue +9 -9
package/src/AppZoneWSetMulti.vue +225 -0
package/src/AppZoneWSetOne.vue +193 -0
package/src/components/WBar.vue +128 -18
package/src/components/WPie.vue +21 -18
package/src/components/{WGeoVue.vue → WPlotVue.vue} +8 -4
package/src/components/WRose.vue +21 -18
package/src/components/WSetMulti.vue +423 -0
package/src/components/WSetOne.vue +57 -0
package/src/js/genBarOpt.mjs +54 -7
package/src/js/genPieOpt.mjs +1 -1
package/src/js/genRoseOpt.mjs +1 -1
package/src/js/getDefAxis.mjs +3 -3
package/src/js/getDefChart.mjs +1 -1
package/toolg/gDistRollupComps.mjs +1 -1
package/toolg/gMergeComps.mjs +4 -4
package/dist/w-geo-vue.umd.js +0 -7
package/dist/w-geo-vue.umd.js.map +0 -1

package/docs/examples/w-set-multi_hide legned.html ADDED Viewed

@@ -0,0 +1,222 @@
+<!doctype html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-tw">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
+    <meta
+        name="viewport"
+        content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"
+    />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>w-plot-vue</title>
+    <!-- @babel/polyfill -->
+    <script
+        nomodule
+        src="https://cdn.jsdelivr.net/npm/@babel/polyfill/dist/polyfill.min.js"
+    ></script>
+    <!-- vue -->
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.min.js"></script>
+    <!-- extractHtml已自動添加@babel/polyfill與vue -->
+    <!-- fontawesome -->
+    <link
+        href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.2/css/all.min.css"
+        rel="stylesheet"
+    />
+    <!-- mdi, 各組件使用mdi/js會於轉單頁時改為mdi icon, 故需引用mdi/css -->
+    <link
+        href="https://cdn.jsdelivr.net/npm/@mdi/font@7.2.96/css/materialdesignicons.min.css"
+        rel="stylesheet"
+    />
+    <!-- google, 各組件使用mdi/js故不需引用 -->
+    <link
+        _href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"
+        rel="stylesheet"
+    />
+    <link
+        _href="https://fonts.googleapis.com/css?family=Material+Icons"
+        rel="stylesheet"
+    />
+    <!-- data -->
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/data/dataAAPL.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/data/dataUSD2EUR.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/data/dataTemperature.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/data/dataHousePriceArea.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/data/dataFlare.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/data/dataRain.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/data/dataRainClip.js"
+    ></script>
+    <!-- w-plot-vue -->
+    <script src="https://cdn.jsdelivr.net/npm/w-plot-vue@1.0.2/dist/w-plot-vue.umd.js"></script>
+    <style>
+  .v-application--wrap {
+    /* width與max-width fix for IE11, 其外不能使用padding或margin避免失效 */
+    width: 100vw;
+    max-width: 100vw;
+    font-family: inherit;
+    background: #fff;
+  }
+  .item {
+    /* 因item位於demolink, 提取各範例html後會刪除demolink, 故得額外補上 */
+    border-left: 3px solid #ffba75;
+    margin: 5px 5px 8px 0px;
+    padding: 3px 3px 5px 10px;
+    font-size: 0.9rem;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+  }
+  .head1 {
+    margin: 0px;
+    padding: 0px 0px 20px 0px;
+    font-size: 2.5rem;
+  }
+  .bk {
+    vertical-align: top;
+    padding: 10px 0px 60px 0px;
+  }
+  @media screen and (min-width: 1000px) {
+    /* 寬版 */
+    .bk {
+      display: inline-block;
+      margin: 0px 80px 0px 0px;
+    }
+  }
+    </style>
+</head>
+<body
+    style="font-family:'Microsoft JhengHei','Avenir','Helvetica'; padding:0px; margin:0px;"
+>
+    <v-app id="app" style="font-family:inherit; padding:0px 30px;">
+        <div class="head1">
+            <span
+                style="cursor:pointer;"
+                title="open for copy link to view component"
+                onclick="window.open('//yuda-lyu.github.io/w-plot-vue/examples/app.html?cmp='+this.innerText,'_blank')"
+            >w-set-multi</span>
+        </div>
+        <div class="bk">
+            <div class="item">hide legned</div>
+            <w-set-multi
+                :opt="{
+                        ...WSetMulti.opt2e,
+                        showLegend:false,
+                    }"
+            ></w-set-multi>
+        </div>
+    </v-app>
+    <script>
+  //install
+  Vue.use(window["w-plot-vue"]);
+  //initialize
+  new Vue({
+    el: "#app",
+    data: function() {
+      let keys = ["USA", "China", "Brazil", "EU", "India", "Russia"];
+      let rds2e = [
+        {
+          name: "Corn",
+          data: {
+            USA: {
+              value: 406.292,
+              color: ["rgb(255, 205, 210)", "rgb(229, 115, 115)"]
+            },
+            China: {
+              value: 260.0,
+              color: ["rgb(255, 185, 210)", "rgb(229, 95, 115)"]
+            },
+            Brazil: {
+              value: 107.0,
+              color: ["rgb(255, 165, 210)", "rgb(229, 75, 115)"]
+            },
+            EU: {
+              value: 68.3,
+              color: ["rgb(255, 145, 210)", "rgb(229, 55, 115)"]
+            },
+            India: {
+              value: 27.5,
+              color: ["rgb(255, 125, 210)", "rgb(229, 35, 115)"]
+            },
+            Russia: {
+              value: 14.5,
+              color: ["rgb(255, 105, 210)", "rgb(229, 15, 115)"]
+            }
+          }
+        },
+        {
+          name: "Wheat",
+          data: {
+            USA: {
+              value: 51.086,
+              color: ["rgb(210, 205, 255)", "rgb(115, 115, 229)"]
+            },
+            China: {
+              value: 136.0,
+              color: ["rgb(210, 185, 255)", "rgb(115, 95, 229)"]
+            },
+            Brazil: {
+              value: 5.5,
+              color: ["rgb(210, 165, 255)", "rgb(115, 75, 229)"]
+            },
+            EU: {
+              value: 141.0,
+              color: ["rgb(210, 145, 255)", "rgb(115, 55, 229)"]
+            },
+            India: {
+              value: 107.18,
+              color: ["rgb(210, 125, 255)", "rgb(115, 35, 229)"]
+            },
+            Russia: {
+              value: 77.0,
+              color: ["rgb(210, 105, 255)", "rgb(115, 15, 229)"]
+            }
+          }
+        }
+      ];
+      return {
+        WSetMulti: {
+          keySelect: "bar-v-normal",
+          opt2e: {
+            width: 400,
+            height: 400,
+            keys,
+            rds: rds2e,
+            xTitle: "Countries",
+            yTitle: "Weight (MT)"
+          }
+        }
+      };
+    },
+    mounted: function() {
+      return {};
+    },
+    computed: {},
+    methods: {}
+  });
+    </script>
+</body>
+</html>

package/docs/examples/w-set-multi_keySelect.html ADDED Viewed

@@ -0,0 +1,226 @@
+<!doctype html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-tw">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
+    <meta
+        name="viewport"
+        content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"
+    />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>w-plot-vue</title>
+    <!-- @babel/polyfill -->
+    <script
+        nomodule
+        src="https://cdn.jsdelivr.net/npm/@babel/polyfill/dist/polyfill.min.js"
+    ></script>
+    <!-- vue -->
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.min.js"></script>
+    <!-- extractHtml已自動添加@babel/polyfill與vue -->
+    <!-- fontawesome -->
+    <link
+        href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.2/css/all.min.css"
+        rel="stylesheet"
+    />
+    <!-- mdi, 各組件使用mdi/js會於轉單頁時改為mdi icon, 故需引用mdi/css -->
+    <link
+        href="https://cdn.jsdelivr.net/npm/@mdi/font@7.2.96/css/materialdesignicons.min.css"
+        rel="stylesheet"
+    />
+    <!-- google, 各組件使用mdi/js故不需引用 -->
+    <link
+        _href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"
+        rel="stylesheet"
+    />
+    <link
+        _href="https://fonts.googleapis.com/css?family=Material+Icons"
+        rel="stylesheet"
+    />
+    <!-- data -->
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/data/dataAAPL.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/data/dataUSD2EUR.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/data/dataTemperature.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/data/dataHousePriceArea.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/data/dataFlare.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/data/dataRain.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/data/dataRainClip.js"
+    ></script>
+    <!-- w-plot-vue -->
+    <script src="https://cdn.jsdelivr.net/npm/w-plot-vue@1.0.2/dist/w-plot-vue.umd.js"></script>
+    <style>
+  .v-application--wrap {
+    /* width與max-width fix for IE11, 其外不能使用padding或margin避免失效 */
+    width: 100vw;
+    max-width: 100vw;
+    font-family: inherit;
+    background: #fff;
+  }
+  .item {
+    /* 因item位於demolink, 提取各範例html後會刪除demolink, 故得額外補上 */
+    border-left: 3px solid #ffba75;
+    margin: 5px 5px 8px 0px;
+    padding: 3px 3px 5px 10px;
+    font-size: 0.9rem;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+  }
+  .head1 {
+    margin: 0px;
+    padding: 0px 0px 20px 0px;
+    font-size: 2.5rem;
+  }
+  .bk {
+    vertical-align: top;
+    padding: 10px 0px 60px 0px;
+  }
+  @media screen and (min-width: 1000px) {
+    /* 寬版 */
+    .bk {
+      display: inline-block;
+      margin: 0px 80px 0px 0px;
+    }
+  }
+    </style>
+</head>
+<body
+    style="font-family:'Microsoft JhengHei','Avenir','Helvetica'; padding:0px; margin:0px;"
+>
+    <v-app id="app" style="font-family:inherit; padding:0px 30px;">
+        <div class="head1">
+            <span
+                style="cursor:pointer;"
+                title="open for copy link to view component"
+                onclick="window.open('//yuda-lyu.github.io/w-plot-vue/examples/app.html?cmp='+this.innerText,'_blank')"
+            >w-set-multi</span>
+        </div>
+        <div class="bk">
+            <div class="item">keySelect</div>
+            <div
+                style="padding-bottom:5px; font-size:0.8rem;"
+            >keySelect: {{WSetMulti.keySelect}}</div>
+            <w-set-multi
+                :opt="{
+                        ...WSetMulti.opt2e,
+                    }"
+                :key-select.sync="WSetMulti.keySelect"
+            ></w-set-multi>
+        </div>
+    </v-app>
+    <script>
+  //install
+  Vue.use(window["w-plot-vue"]);
+  //initialize
+  new Vue({
+    el: "#app",
+    data: function() {
+      let keys = ["USA", "China", "Brazil", "EU", "India", "Russia"];
+      let rds2e = [
+        {
+          name: "Corn",
+          data: {
+            USA: {
+              value: 406.292,
+              color: ["rgb(255, 205, 210)", "rgb(229, 115, 115)"]
+            },
+            China: {
+              value: 260.0,
+              color: ["rgb(255, 185, 210)", "rgb(229, 95, 115)"]
+            },
+            Brazil: {
+              value: 107.0,
+              color: ["rgb(255, 165, 210)", "rgb(229, 75, 115)"]
+            },
+            EU: {
+              value: 68.3,
+              color: ["rgb(255, 145, 210)", "rgb(229, 55, 115)"]
+            },
+            India: {
+              value: 27.5,
+              color: ["rgb(255, 125, 210)", "rgb(229, 35, 115)"]
+            },
+            Russia: {
+              value: 14.5,
+              color: ["rgb(255, 105, 210)", "rgb(229, 15, 115)"]
+            }
+          }
+        },
+        {
+          name: "Wheat",
+          data: {
+            USA: {
+              value: 51.086,
+              color: ["rgb(210, 205, 255)", "rgb(115, 115, 229)"]
+            },
+            China: {
+              value: 136.0,
+              color: ["rgb(210, 185, 255)", "rgb(115, 95, 229)"]
+            },
+            Brazil: {
+              value: 5.5,
+              color: ["rgb(210, 165, 255)", "rgb(115, 75, 229)"]
+            },
+            EU: {
+              value: 141.0,
+              color: ["rgb(210, 145, 255)", "rgb(115, 55, 229)"]
+            },
+            India: {
+              value: 107.18,
+              color: ["rgb(210, 125, 255)", "rgb(115, 35, 229)"]
+            },
+            Russia: {
+              value: 77.0,
+              color: ["rgb(210, 105, 255)", "rgb(115, 15, 229)"]
+            }
+          }
+        }
+      ];
+      return {
+        WSetMulti: {
+          keySelect: "bar-v-normal",
+          opt2e: {
+            width: 400,
+            height: 400,
+            keys,
+            rds: rds2e,
+            xTitle: "Countries",
+            yTitle: "Weight (MT)"
+          }
+        }
+      };
+    },
+    mounted: function() {
+      return {};
+    },
+    computed: {},
+    methods: {}
+  });
+    </script>
+</body>
+</html>

package/docs/examples/w-set-multi_slot head.html ADDED Viewed

@@ -0,0 +1,225 @@
+<!doctype html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-tw">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
+    <meta
+        name="viewport"
+        content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"
+    />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>w-plot-vue</title>
+    <!-- @babel/polyfill -->
+    <script
+        nomodule
+        src="https://cdn.jsdelivr.net/npm/@babel/polyfill/dist/polyfill.min.js"
+    ></script>
+    <!-- vue -->
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.min.js"></script>
+    <!-- extractHtml已自動添加@babel/polyfill與vue -->
+    <!-- fontawesome -->
+    <link
+        href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.2/css/all.min.css"
+        rel="stylesheet"
+    />
+    <!-- mdi, 各組件使用mdi/js會於轉單頁時改為mdi icon, 故需引用mdi/css -->
+    <link
+        href="https://cdn.jsdelivr.net/npm/@mdi/font@7.2.96/css/materialdesignicons.min.css"
+        rel="stylesheet"
+    />
+    <!-- google, 各組件使用mdi/js故不需引用 -->
+    <link
+        _href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"
+        rel="stylesheet"
+    />
+    <link
+        _href="https://fonts.googleapis.com/css?family=Material+Icons"
+        rel="stylesheet"
+    />
+    <!-- data -->
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/data/dataAAPL.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/data/dataUSD2EUR.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/data/dataTemperature.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/data/dataHousePriceArea.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/data/dataFlare.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/data/dataRain.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/data/dataRainClip.js"
+    ></script>
+    <!-- w-plot-vue -->
+    <script src="https://cdn.jsdelivr.net/npm/w-plot-vue@1.0.2/dist/w-plot-vue.umd.js"></script>
+    <style>
+  .v-application--wrap {
+    /* width與max-width fix for IE11, 其外不能使用padding或margin避免失效 */
+    width: 100vw;
+    max-width: 100vw;
+    font-family: inherit;
+    background: #fff;
+  }
+  .item {
+    /* 因item位於demolink, 提取各範例html後會刪除demolink, 故得額外補上 */
+    border-left: 3px solid #ffba75;
+    margin: 5px 5px 8px 0px;
+    padding: 3px 3px 5px 10px;
+    font-size: 0.9rem;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+  }
+  .head1 {
+    margin: 0px;
+    padding: 0px 0px 20px 0px;
+    font-size: 2.5rem;
+  }
+  .bk {
+    vertical-align: top;
+    padding: 10px 0px 60px 0px;
+  }
+  @media screen and (min-width: 1000px) {
+    /* 寬版 */
+    .bk {
+      display: inline-block;
+      margin: 0px 80px 0px 0px;
+    }
+  }
+    </style>
+</head>
+<body
+    style="font-family:'Microsoft JhengHei','Avenir','Helvetica'; padding:0px; margin:0px;"
+>
+    <v-app id="app" style="font-family:inherit; padding:0px 30px;">
+        <div class="head1">
+            <span
+                style="cursor:pointer;"
+                title="open for copy link to view component"
+                onclick="window.open('//yuda-lyu.github.io/w-plot-vue/examples/app.html?cmp='+this.innerText,'_blank')"
+            >w-set-multi</span>
+        </div>
+        <div class="bk">
+            <div class="item">slot head</div>
+            <w-set-multi
+                :opt="{
+                        ...WSetMulti.opt2e,
+                    }"
+            >
+                <template v-slot:head>
+                    <div style="padding-right:8px; font-size:1.3rem;">🌿</div>
+                </template>
+            </w-set-multi>
+        </div>
+    </v-app>
+    <script>
+  //install
+  Vue.use(window["w-plot-vue"]);
+  //initialize
+  new Vue({
+    el: "#app",
+    data: function() {
+      let keys = ["USA", "China", "Brazil", "EU", "India", "Russia"];
+      let rds2e = [
+        {
+          name: "Corn",
+          data: {
+            USA: {
+              value: 406.292,
+              color: ["rgb(255, 205, 210)", "rgb(229, 115, 115)"]
+            },
+            China: {
+              value: 260.0,
+              color: ["rgb(255, 185, 210)", "rgb(229, 95, 115)"]
+            },
+            Brazil: {
+              value: 107.0,
+              color: ["rgb(255, 165, 210)", "rgb(229, 75, 115)"]
+            },
+            EU: {
+              value: 68.3,
+              color: ["rgb(255, 145, 210)", "rgb(229, 55, 115)"]
+            },
+            India: {
+              value: 27.5,
+              color: ["rgb(255, 125, 210)", "rgb(229, 35, 115)"]
+            },
+            Russia: {
+              value: 14.5,
+              color: ["rgb(255, 105, 210)", "rgb(229, 15, 115)"]
+            }
+          }
+        },
+        {
+          name: "Wheat",
+          data: {
+            USA: {
+              value: 51.086,
+              color: ["rgb(210, 205, 255)", "rgb(115, 115, 229)"]
+            },
+            China: {
+              value: 136.0,
+              color: ["rgb(210, 185, 255)", "rgb(115, 95, 229)"]
+            },
+            Brazil: {
+              value: 5.5,
+              color: ["rgb(210, 165, 255)", "rgb(115, 75, 229)"]
+            },
+            EU: {
+              value: 141.0,
+              color: ["rgb(210, 145, 255)", "rgb(115, 55, 229)"]
+            },
+            India: {
+              value: 107.18,
+              color: ["rgb(210, 125, 255)", "rgb(115, 35, 229)"]
+            },
+            Russia: {
+              value: 77.0,
+              color: ["rgb(210, 105, 255)", "rgb(115, 15, 229)"]
+            }
+          }
+        }
+      ];
+      return {
+        WSetMulti: {
+          keySelect: "bar-v-normal",
+          opt2e: {
+            width: 400,
+            height: 400,
+            keys,
+            rds: rds2e,
+            xTitle: "Countries",
+            yTitle: "Weight (MT)"
+          }
+        }
+      };
+    },
+    mounted: function() {
+      return {};
+    },
+    computed: {},
+    methods: {}
+  });
+    </script>
+</body>
+</html>