npm - w-component-vue - Versions diffs - 2.4.21 → 2.4.22 - Mend

w-component-vue 2.4.21 → 2.4.22

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

package/docs/examples/w-echarts-vue-dyn_resize.html ADDED Viewed

@@ -0,0 +1,1828 @@
+<!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-component-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 -->
+    <!-- vuetify -->
+    <link
+        href="https://cdn.jsdelivr.net/npm/vuetify@2.6.14/dist/vuetify.min.css"
+        rel="stylesheet"
+    />
+    <script
+        src="https://cdn.jsdelivr.net/npm/vuetify@2.6.14/dist/vuetify.min.js"
+    ></script>
+    <!-- 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.27/res/data/dataAAPL.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.27/res/data/dataUSD2EUR.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.27/res/data/dataTemperature.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.27/res/data/dataHousePriceArea.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.27/res/data/dataFlare.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.27/res/data/dataRain.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.27/res/data/dataRainClip.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.27/res/data/dataCivilSoilCodeIcon.js"
+    ></script>
+    <!-- w-component-vue -->
+    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.4.22/dist/w-component-vue.umd.js"></script>
+    <style>
+  .v-application--wrap {
+    /* width與max-width fix for IE11, 其外不能使用padding或margin避免失效 */
+    width: 100svw;
+    max-width: 100svw;
+    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 {
+    padding: 0px 0px 20px 0px;
+    font-size: 2.5rem;
+  }
+  .bkh {
+    /* 寬 */
+    padding: 20px;
+  }
+  @media screen and (max-width: 800px) {
+    /* 中 */
+    .bkh {
+      padding: 10px;
+    }
+  }
+  @media screen and (max-width: 400px) {
+    /* 窄 */
+    .bkh {
+      padding: 5px;
+    }
+  }
+  .bk {
+    /* 寬 */
+    display: inline-block;
+    vertical-align: top;
+    padding: 0px 80px 60px 0px;
+  }
+  @media screen and (max-width: 1000px) {
+    /* 中窄 */
+    .bk {
+      display: block;
+      padding: 0px 0px 50px 0px;
+    }
+  }
+  .cpitem {
+    transition: all 0.3s;
+    padding: 5px 15px;
+    cursor: pointer;
+  }
+  .cpitem-white {
+    background: #fff;
+  }
+  .cpitem-white:hover {
+    background: #eee;
+  }
+  .cpitem-black {
+    background: #333;
+  }
+  .cpitem-black:hover {
+    background: #555;
+  }
+    </style>
+</head>
+<body
+    style="font-family:'Microsoft JhengHei','Avenir','Helvetica'; padding:0px; margin:0px;"
+>
+    <v-app id="app" class="bkh" style="font-family:inherit;">
+        <div class="head1">
+            <span
+                style="cursor:pointer;"
+                title="open for copy link to view component"
+                onclick="window.open('//yuda-lyu.github.io/w-component-vue/examples/app.html?cmp='+this.innerText,'_blank')"
+            >w-echarts-vue-dyn</span>
+        </div>
+        <div class="bk">
+            <div class="item">resize</div>
+            <div style="padding-bottom:10px;">
+                <v-btn
+                    depressed
+                    small
+                    elevation="2"
+                    @click="WEchartsVueDyn.widthOptions1=620"
+                >620px(default)</v-btn>
+                <v-btn
+                    depressed
+                    small
+                    elevation="2"
+                    @click="WEchartsVueDyn.widthOptions1=310"
+                >310px</v-btn>
+            </div>
+            <w-echarts-vue-dyn
+                :style="`width:${WEchartsVueDyn.widthOptions1}px; height:300px;`"
+                :options="WEchartsVueDyn.options1"
+            ></w-echarts-vue-dyn>
+        </div>
+    </v-app>
+    <script>
+  //install
+  Vue.use(window["w-component-vue"]);
+  //initialize
+  new Vue({
+    el: "#app",
+    vuetify: new Vuetify(),
+    data: function() {
+      let df = function(d) {
+        let date = [];
+        let data = [];
+        for (let i = 0; i < d.length; i++) {
+          let v = d[i];
+          let now = new Date(v[0]);
+          let t = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join(
+            "-"
+          );
+          date.push(t);
+          data.push(v[1]);
+        }
+        return {
+          date,
+          data
+        };
+      };
+      let rDataAAPL = df(window.dataAAPL);
+      let rDataUSD2EUR = df(window.dataUSD2EUR);
+      return {
+        WEchartsVueDyn: {
+          widthOptions1: 620,
+          options1: {
+            tooltip: {
+              trigger: "axis",
+              position: function(pt) {
+                return [pt[0], "10%"];
+              }
+            },
+            title: {
+              left: "center",
+              text: "AAPL Stock Price"
+            },
+            toolbox: {
+              feature: {
+                dataZoom: {
+                  yAxisIndex: "none",
+                  title: {
+                    zoom: "Zoom",
+                    back: "Zoom Reset"
+                  }
+                },
+                restore: {
+                  title: "Restore"
+                },
+                saveAsImage: {
+                  title: "Download"
+                }
+              }
+            },
+            xAxis: {
+              type: "category",
+              boundaryGap: false,
+              data: rDataAAPL.date
+            },
+            yAxis: {
+              type: "value",
+              boundaryGap: [0, "100%"]
+            },
+            dataZoom: [
+              {
+                type: "inside",
+                start: 0,
+                end: 100
+              },
+              {
+                start: 0,
+                end: 10,
+                handleIcon:
+                  "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",
+                handleSize: "80%",
+                handleStyle: {
+                  color: "#fff",
+                  shadowBlur: 3,
+                  shadowColor: "rgba(0, 0, 0, 0.6)",
+                  shadowOffsetX: 2,
+                  shadowOffsetY: 2
+                }
+              }
+            ],
+            series: [
+              {
+                name: "Price",
+                type: "line",
+                itemStyle: {
+                  color: "rgba(20, 20, 200, 0.5)"
+                },
+                data: rDataAAPL.data
+              }
+            ]
+          },
+          options2: {
+            tooltip: {
+              trigger: "axis",
+              position: function(pt) {
+                return [pt[0], "10%"];
+              }
+            },
+            title: {
+              left: "center",
+              text: "USD to EUR exchange rate over time"
+            },
+            toolbox: {
+              feature: {
+                dataZoom: {
+                  yAxisIndex: "none",
+                  title: {
+                    zoom: "Zoom",
+                    back: "Zoom Reset"
+                  }
+                },
+                restore: {
+                  title: "Restore"
+                },
+                saveAsImage: {
+                  title: "Download"
+                }
+              }
+            },
+            xAxis: {
+              type: "category",
+              boundaryGap: false,
+              data: rDataUSD2EUR.date
+            },
+            yAxis: {
+              type: "value",
+              boundaryGap: [0, "100%"]
+            },
+            dataZoom: [
+              {
+                type: "inside",
+                start: 0,
+                end: 100
+              },
+              {
+                start: 0,
+                end: 10,
+                handleIcon:
+                  "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",
+                handleSize: "80%",
+                handleStyle: {
+                  color: "#fff",
+                  shadowBlur: 3,
+                  shadowColor: "rgba(0, 0, 0, 0.6)",
+                  shadowOffsetX: 2,
+                  shadowOffsetY: 2
+                }
+              }
+            ],
+            series: [
+              {
+                name: "USD to EUR",
+                type: "line",
+                // smooth: true,
+                // symbol: 'none',
+                // sampling: 'average',
+                itemStyle: {
+                  color: "rgba(200,200,255,1)"
+                },
+                areaStyle: {
+                  color: {
+                    type: "linear",
+                    x0: 0,
+                    y0: 0,
+                    x2: 0,
+                    y2: 1,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(200,200,255,1)"
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(200,200,255,0.1)"
+                      }
+                    ],
+                    globalCoord: false
+                  }
+                },
+                data: rDataUSD2EUR.data
+              }
+            ]
+          },
+          options3: {
+            title: {
+              left: "center",
+              text: "堆叠区域图"
+            },
+            tooltip: {
+              trigger: "axis",
+              axisPointer: {
+                type: "cross",
+                label: {
+                  backgroundColor: "#6a7985"
+                }
+              }
+            },
+            legend: {
+              y: 30,
+              data: ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"]
+            },
+            grid: {
+              left: "3%",
+              right: "4%",
+              bottom: "3%",
+              containLabel: true
+            },
+            xAxis: [
+              {
+                type: "category",
+                boundaryGap: false,
+                data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
+              }
+            ],
+            yAxis: [
+              {
+                type: "value"
+              }
+            ],
+            series: [
+              {
+                name: "邮件营销",
+                type: "line",
+                stack: "总量",
+                areaStyle: {},
+                data: [120, 132, 101, 134, 90, 230, 210]
+              },
+              {
+                name: "联盟广告",
+                type: "line",
+                stack: "总量",
+                areaStyle: {},
+                data: [220, 182, 191, 234, 290, 330, 310]
+              },
+              {
+                name: "视频广告",
+                type: "line",
+                stack: "总量",
+                areaStyle: {},
+                data: [150, 232, 201, 154, 190, 330, 410]
+              },
+              {
+                name: "直接访问",
+                type: "line",
+                stack: "总量",
+                areaStyle: {},
+                data: [320, 332, 301, 334, 390, 330, 320]
+              },
+              {
+                name: "搜索引擎",
+                type: "line",
+                stack: "总量",
+                label: {
+                  normal: {
+                    show: true,
+                    position: "top"
+                  }
+                },
+                areaStyle: {},
+                data: [820, 932, 901, 934, 1290, 1330, 1320]
+              }
+            ]
+          },
+          options4: {
+            title: {
+              left: "center",
+              text: "基础雷达图"
+            },
+            tooltip: {},
+            legend: {
+              y: 30,
+              data: [
+                "预算分配（Allocated Budget）",
+                "实际开销（Actual Spending）"
+              ]
+            },
+            radar: {
+              // shape: 'circle',
+              center: ["50%", "60%"],
+              radius: "60%",
+              name: {
+                textStyle: {
+                  color: "#fff",
+                  backgroundColor: "#999",
+                  borderRadius: 3,
+                  padding: [3, 5]
+                }
+              },
+              indicator: [
+                { name: "销售（sales）", max: 6500 },
+                { name: "管理（Administration）", max: 16000 },
+                { name: "信息技术（Information Techology）", max: 30000 },
+                { name: "客服（Customer Support）", max: 38000 },
+                { name: "研发（Development）", max: 52000 },
+                { name: "市场（Marketing）", max: 25000 }
+              ]
+            },
+            series: [
+              {
+                name: "预算 vs 开销（Budget vs spending）",
+                type: "radar",
+                // areaStyle: {normal: {}},
+                data: [
+                  {
+                    value: [4300, 10000, 28000, 35000, 50000, 19000],
+                    name: "预算分配（Allocated Budget）"
+                  },
+                  {
+                    value: [5000, 14000, 28000, 31000, 42000, 21000],
+                    name: "实际开销（Actual Spending）"
+                  }
+                ]
+              }
+            ]
+          },
+          options5: {
+            title: {
+              // left: 'center',
+              text: "极坐标双数值轴"
+            },
+            legend: {
+              // y: 30,
+              data: ["line"]
+            },
+            polar: {
+              center: ["50%", "52%"],
+              radius: "72%"
+            },
+            tooltip: {
+              trigger: "axis",
+              axisPointer: {
+                type: "cross"
+              }
+            },
+            angleAxis: {
+              type: "value",
+              startAngle: 0
+            },
+            radiusAxis: {},
+            series: [
+              {
+                coordinateSystem: "polar",
+                name: "line",
+                type: "line",
+                data: (function() {
+                  let data = [];
+                  for (let i = 0; i <= 100; i++) {
+                    let theta = (i / 100) * 360;
+                    let r = 5 * (1 + Math.sin((theta / 180) * Math.PI));
+                    data.push([r, theta]);
+                  }
+                  return data;
+                })()
+              }
+            ]
+          },
+          options6: {
+            tooltip: {
+              position: "top"
+            },
+            grid: {
+              height: "70%",
+              top: "2%"
+            },
+            xAxis: {
+              type: "category",
+              data: [
+                "12a",
+                "1a",
+                "2a",
+                "3a",
+                "4a",
+                "5a",
+                "6a",
+                "7a",
+                "8a",
+                "9a",
+                "10a",
+                "11a",
+                "12p",
+                "1p",
+                "2p",
+                "3p",
+                "4p",
+                "5p",
+                "6p",
+                "7p",
+                "8p",
+                "9p",
+                "10p",
+                "11p"
+              ],
+              splitArea: {
+                show: true
+              }
+            },
+            yAxis: {
+              type: "category",
+              data: [
+                "Saturday",
+                "Friday",
+                "Thursday",
+                "Wednesday",
+                "Tuesday",
+                "Monday",
+                "Sunday"
+              ],
+              splitArea: {
+                show: true
+              }
+            },
+            visualMap: {
+              min: 0,
+              max: 10,
+              calculable: true,
+              orient: "horizontal",
+              left: "center",
+              bottom: "2%"
+            },
+            series: [
+              {
+                name: "Punch Card",
+                type: "heatmap",
+                data: [
+                  [0, 0, 5],
+                  [0, 1, 1],
+                  [0, 2, 0],
+                  [0, 3, 0],
+                  [0, 4, 0],
+                  [0, 5, 0],
+                  [0, 6, 0],
+                  [0, 7, 0],
+                  [0, 8, 0],
+                  [0, 9, 0],
+                  [0, 10, 0],
+                  [0, 11, 2],
+                  [0, 12, 4],
+                  [0, 13, 1],
+                  [0, 14, 1],
+                  [0, 15, 3],
+                  [0, 16, 4],
+                  [0, 17, 6],
+                  [0, 18, 4],
+                  [0, 19, 4],
+                  [0, 20, 3],
+                  [0, 21, 3],
+                  [0, 22, 2],
+                  [0, 23, 5],
+                  [1, 0, 7],
+                  [1, 1, 0],
+                  [1, 2, 0],
+                  [1, 3, 0],
+                  [1, 4, 0],
+                  [1, 5, 0],
+                  [1, 6, 0],
+                  [1, 7, 0],
+                  [1, 8, 0],
+                  [1, 9, 0],
+                  [1, 10, 5],
+                  [1, 11, 2],
+                  [1, 12, 2],
+                  [1, 13, 6],
+                  [1, 14, 9],
+                  [1, 15, 11],
+                  [1, 16, 6],
+                  [1, 17, 7],
+                  [1, 18, 8],
+                  [1, 19, 12],
+                  [1, 20, 5],
+                  [1, 21, 5],
+                  [1, 22, 7],
+                  [1, 23, 2],
+                  [2, 0, 1],
+                  [2, 1, 1],
+                  [2, 2, 0],
+                  [2, 3, 0],
+                  [2, 4, 0],
+                  [2, 5, 0],
+                  [2, 6, 0],
+                  [2, 7, 0],
+                  [2, 8, 0],
+                  [2, 9, 0],
+                  [2, 10, 3],
+                  [2, 11, 2],
+                  [2, 12, 1],
+                  [2, 13, 9],
+                  [2, 14, 8],
+                  [2, 15, 10],
+                  [2, 16, 6],
+                  [2, 17, 5],
+                  [2, 18, 5],
+                  [2, 19, 5],
+                  [2, 20, 7],
+                  [2, 21, 4],
+                  [2, 22, 2],
+                  [2, 23, 4],
+                  [3, 0, 7],
+                  [3, 1, 3],
+                  [3, 2, 0],
+                  [3, 3, 0],
+                  [3, 4, 0],
+                  [3, 5, 0],
+                  [3, 6, 0],
+                  [3, 7, 0],
+                  [3, 8, 1],
+                  [3, 9, 0],
+                  [3, 10, 5],
+                  [3, 11, 4],
+                  [3, 12, 7],
+                  [3, 13, 14],
+                  [3, 14, 13],
+                  [3, 15, 12],
+                  [3, 16, 9],
+                  [3, 17, 5],
+                  [3, 18, 5],
+                  [3, 19, 10],
+                  [3, 20, 6],
+                  [3, 21, 4],
+                  [3, 22, 4],
+                  [3, 23, 1],
+                  [4, 0, 1],
+                  [4, 1, 3],
+                  [4, 2, 0],
+                  [4, 3, 0],
+                  [4, 4, 0],
+                  [4, 5, 1],
+                  [4, 6, 0],
+                  [4, 7, 0],
+                  [4, 8, 0],
+                  [4, 9, 2],
+                  [4, 10, 4],
+                  [4, 11, 4],
+                  [4, 12, 2],
+                  [4, 13, 4],
+                  [4, 14, 4],
+                  [4, 15, 14],
+                  [4, 16, 12],
+                  [4, 17, 1],
+                  [4, 18, 8],
+                  [4, 19, 5],
+                  [4, 20, 3],
+                  [4, 21, 7],
+                  [4, 22, 3],
+                  [4, 23, 0],
+                  [5, 0, 2],
+                  [5, 1, 1],
+                  [5, 2, 0],
+                  [5, 3, 3],
+                  [5, 4, 0],
+                  [5, 5, 0],
+                  [5, 6, 0],
+                  [5, 7, 0],
+                  [5, 8, 2],
+                  [5, 9, 0],
+                  [5, 10, 4],
+                  [5, 11, 1],
+                  [5, 12, 5],
+                  [5, 13, 10],
+                  [5, 14, 5],
+                  [5, 15, 7],
+                  [5, 16, 11],
+                  [5, 17, 6],
+                  [5, 18, 0],
+                  [5, 19, 5],
+                  [5, 20, 3],
+                  [5, 21, 4],
+                  [5, 22, 2],
+                  [5, 23, 0],
+                  [6, 0, 1],
+                  [6, 1, 0],
+                  [6, 2, 0],
+                  [6, 3, 0],
+                  [6, 4, 0],
+                  [6, 5, 0],
+                  [6, 6, 0],
+                  [6, 7, 0],
+                  [6, 8, 0],
+                  [6, 9, 0],
+                  [6, 10, 1],
+                  [6, 11, 0],
+                  [6, 12, 2],
+                  [6, 13, 1],
+                  [6, 14, 3],
+                  [6, 15, 4],
+                  [6, 16, 0],
+                  [6, 17, 0],
+                  [6, 18, 0],
+                  [6, 19, 0],
+                  [6, 20, 1],
+                  [6, 21, 2],
+                  [6, 22, 2],
+                  [6, 23, 6]
+                ].map(function(item) {
+                  return [item[1], item[0], item[2] || "-"];
+                }),
+                label: {
+                  show: true
+                },
+                emphasis: {
+                  itemStyle: {
+                    shadowBlur: 10,
+                    shadowColor: "rgba(0, 0, 0, 0.5)"
+                  }
+                }
+              }
+            ]
+          },
+          options7: {
+            title: {
+              left: "center",
+              text: "Dispersion of house price based on the area"
+            },
+            grid: {
+              top: "10%",
+              left: "0%",
+              right: "10%",
+              bottom: "0%",
+              containLabel: true
+            },
+            visualMap: {
+              min: 15202,
+              max: 159980,
+              dimension: 1,
+              orient: "vertical",
+              right: 10,
+              top: "center",
+              text: ["HIGH", "LOW"],
+              calculable: true,
+              inRange: {
+                color: ["#f2c31a", "#24b7f2"]
+              }
+            },
+            tooltip: {
+              trigger: "item",
+              axisPointer: {
+                type: "cross"
+              }
+            },
+            xAxis: [
+              {
+                type: "value"
+              }
+            ],
+            yAxis: [
+              {
+                type: "value"
+              }
+            ],
+            series: [
+              {
+                name: "price-area",
+                type: "scatter",
+                symbolSize: 5,
+                itemStyle: {
+                  normal: {
+                    borderWidth: 0.2,
+                    borderColor: "#fff"
+                  }
+                },
+                data: window.dataHousePriceArea
+              }
+            ]
+          },
+          options8: {
+            parallelAxis: [
+              { dim: 0, name: "Price" },
+              { dim: 1, name: "Net Weight" },
+              { dim: 2, name: "Amount" },
+              {
+                dim: 3,
+                name: "Score",
+                type: "category",
+                data: ["Excellent", "Good", "OK", "Bad"]
+              }
+            ],
+            parallel: {
+              left: "5%",
+              right: "10%",
+              bottom: "5%",
+              top: "5%"
+              // parallelAxisDefault: {
+              //     type: 'value',
+              //     nameLocation: 'end',
+              //     nameGap: 20
+              // }
+            },
+            series: {
+              type: "parallel",
+              lineStyle: {
+                width: 4
+              },
+              data: [
+                [12.99, 100, 82, "Good"],
+                [9.99, 80, 77, "OK"],
+                [20, 120, 60, "Excellent"]
+              ]
+            }
+          },
+          options9: {
+            tooltip: {
+              trigger: "item",
+              triggerOn: "mousemove"
+            },
+            toolbox: {
+              feature: {
+                restore: {
+                  title: "Restore"
+                },
+                saveAsImage: {
+                  title: "Download"
+                }
+              }
+            },
+            series: [
+              {
+                type: "tree",
+                //orient: 'vertical',
+                data: [window.dataFlare],
+                top: "1%",
+                left: "4%",
+                bottom: "1%",
+                right: "14%",
+                //top: '4%',
+                //left: '1%',
+                //bottom: '14%',
+                //right: '1%',
+                symbolSize: 12,
+                initialTreeDepth: undefined, //展開全部
+                label: {
+                  position: "left",
+                  //position: 'top',
+                  verticalAlign: "middle",
+                  align: "right",
+                  fontSize: 12,
+                  //rotate: -90,
+                  formatter: function(p) {
+                    if (p.value) {
+                      return p.name + ": " + p.value;
+                    }
+                    return p.name;
+                  }
+                },
+                leaves: {
+                  label: {
+                    position: "right",
+                    //position: 'bottom',
+                    verticalAlign: "middle",
+                    align: "left"
+                    //rotate: -90,
+                    //formatter: '{b}: {c}',
+                  }
+                },
+                animationDuration: 500,
+                animationDurationUpdate: 500
+              }
+            ]
+          },
+          options10: {
+            tooltip: {
+              trigger: "item",
+              triggerOn: "mousemove"
+            },
+            toolbox: {
+              feature: {
+                restore: {
+                  title: "Restore"
+                },
+                saveAsImage: {
+                  title: "Download"
+                }
+              }
+            },
+            series: [
+              {
+                type: "treemap",
+                name: window.dataFlare.name,
+                data: window.dataFlare.children,
+                upperLabel: {
+                  show: true,
+                  height: 24,
+                  padding: 5
+                },
+                label: {
+                  formatter: function(p) {
+                    if (p.value) {
+                      return p.name + "\n" + "(" + p.value + ")";
+                    }
+                    return p.name;
+                  },
+                  fontSize: 11
+                },
+                levels: [
+                  {
+                    itemStyle: {
+                      borderWidth: 2,
+                      gapWidth: 2,
+                      borderColor: "#444"
+                      //borderColorSaturation: 0.2,
+                    }
+                  },
+                  {
+                    itemStyle: {
+                      borderWidth: 2,
+                      gapWidth: 2,
+                      borderColor: "#666"
+                      //borderColorSaturation: 0.7,
+                    }
+                  },
+                  {
+                    itemStyle: {
+                      borderWidth: 2,
+                      gapWidth: 2,
+                      borderColor: "#888"
+                      //borderColorSaturation: 0.4,
+                    }
+                  },
+                  {
+                    itemStyle: {
+                      borderWidth: 2,
+                      gapWidth: 2,
+                      borderColor: "#aaa"
+                      //borderColorSaturation: 0.4,
+                    }
+                  }
+                ]
+              }
+            ]
+          },
+          options11: {
+            // legend: {
+            //     data: ['Punch Card']
+            // },
+            tooltip: {},
+            visualMap: {
+              type: "continuous",
+              min: 0,
+              max: 10,
+              inRange: {
+                color: ["#2D5F73", "#538EA6", "#F2D1B3", "#F2B8A2", "#F28C8C"]
+              },
+              orient: "vertical",
+              top: "center"
+            },
+            series: {
+              type: "sunburst",
+              data: [
+                {
+                  name: "Grandpa",
+                  children: [
+                    {
+                      name: "Uncle Leo",
+                      value: 15,
+                      children: [
+                        {
+                          name: "Cousin Jack",
+                          value: 2
+                        },
+                        {
+                          name: "Cousin Mary",
+                          value: 5,
+                          children: [
+                            {
+                              name: "Jackson",
+                              value: 2
+                            }
+                          ]
+                        },
+                        {
+                          name: "Cousin Ben",
+                          value: 4
+                        }
+                      ]
+                    },
+                    {
+                      name: "Aunt Jane",
+                      children: [
+                        {
+                          name: "Cousin Kate",
+                          value: 4
+                        }
+                      ]
+                    },
+                    {
+                      name: "Father",
+                      value: 10,
+                      children: [
+                        {
+                          name: "Me",
+                          value: 5,
+                          itemStyle: {
+                            color: "red"
+                          }
+                        },
+                        {
+                          name: "Brother Peter",
+                          value: 1
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  name: "Mike",
+                  children: [
+                    {
+                      name: "Uncle Dan",
+                      children: [
+                        {
+                          name: "Cousin Lucy",
+                          value: 3
+                        },
+                        {
+                          name: "Cousin Luck",
+                          value: 4,
+                          children: [
+                            {
+                              name: "Nephew",
+                              value: 2
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  name: "Nancy",
+                  children: [
+                    {
+                      name: "Uncle Nike",
+                      children: [
+                        {
+                          name: "Cousin Betty",
+                          value: 1
+                        },
+                        {
+                          name: "Cousin Jenny",
+                          value: 2
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ],
+              radius: [0, "90%"],
+              label: {
+                rotate: "radial"
+              }
+            }
+          },
+          options12: {
+            legend: {
+              data: ["Punch Card"]
+            },
+            polar: {},
+            tooltip: {},
+            visualMap: {
+              type: "continuous",
+              min: 0,
+              max: 14,
+              top: "middle",
+              dimension: 2,
+              calculable: true
+            },
+            angleAxis: {
+              type: "category",
+              data: [
+                "12a",
+                "1a",
+                "2a",
+                "3a",
+                "4a",
+                "5a",
+                "6a",
+                "7a",
+                "8a",
+                "9a",
+                "10a",
+                "11a",
+                "12p",
+                "1p",
+                "2p",
+                "3p",
+                "4p",
+                "5p",
+                "6p",
+                "7p",
+                "8p",
+                "9p",
+                "10p",
+                "11p"
+              ],
+              boundaryGap: false,
+              splitLine: {
+                show: true,
+                lineStyle: {
+                  color: "#ddd",
+                  type: "dashed"
+                }
+              },
+              axisLine: {
+                show: false
+              }
+            },
+            radiusAxis: {
+              type: "category",
+              data: [
+                "Saturday",
+                "Friday",
+                "Thursday",
+                "Wednesday",
+                "Tuesday",
+                "Monday",
+                "Sunday"
+              ],
+              z: 100
+            },
+            series: [
+              {
+                name: "Punch Card",
+                type: "custom",
+                coordinateSystem: "polar",
+                itemStyle: {
+                  color: "#d14a61"
+                },
+                renderItem: function(params, api) {
+                  let values = [api.value(0), api.value(1)];
+                  let coord = api.coord(values);
+                  let size = api.size([1, 1], values);
+                  return {
+                    type: "sector",
+                    shape: {
+                      cx: params.coordSys.cx,
+                      cy: params.coordSys.cy,
+                      r0: coord[2] - size[0] / 2,
+                      r: coord[2] + size[0] / 2,
+                      startAngle: -(coord[3] + size[1] / 2),
+                      endAngle: -(coord[3] - size[1] / 2)
+                    },
+                    style: api.style({
+                      fill: api.visual("color")
+                    })
+                  };
+                },
+                data: [
+                  [0, 0, 5],
+                  [0, 1, 1],
+                  [0, 2, 0],
+                  [0, 3, 0],
+                  [0, 4, 0],
+                  [0, 5, 0],
+                  [0, 6, 0],
+                  [0, 7, 0],
+                  [0, 8, 0],
+                  [0, 9, 0],
+                  [0, 10, 0],
+                  [0, 11, 2],
+                  [0, 12, 4],
+                  [0, 13, 1],
+                  [0, 14, 1],
+                  [0, 15, 3],
+                  [0, 16, 4],
+                  [0, 17, 6],
+                  [0, 18, 4],
+                  [0, 19, 4],
+                  [0, 20, 3],
+                  [0, 21, 3],
+                  [0, 22, 2],
+                  [0, 23, 5],
+                  [1, 0, 7],
+                  [1, 1, 0],
+                  [1, 2, 0],
+                  [1, 3, 0],
+                  [1, 4, 0],
+                  [1, 5, 0],
+                  [1, 6, 0],
+                  [1, 7, 0],
+                  [1, 8, 0],
+                  [1, 9, 0],
+                  [1, 10, 5],
+                  [1, 11, 2],
+                  [1, 12, 2],
+                  [1, 13, 6],
+                  [1, 14, 9],
+                  [1, 15, 11],
+                  [1, 16, 6],
+                  [1, 17, 7],
+                  [1, 18, 8],
+                  [1, 19, 12],
+                  [1, 20, 5],
+                  [1, 21, 5],
+                  [1, 22, 7],
+                  [1, 23, 2],
+                  [2, 0, 1],
+                  [2, 1, 1],
+                  [2, 2, 0],
+                  [2, 3, 0],
+                  [2, 4, 0],
+                  [2, 5, 0],
+                  [2, 6, 0],
+                  [2, 7, 0],
+                  [2, 8, 0],
+                  [2, 9, 0],
+                  [2, 10, 3],
+                  [2, 11, 2],
+                  [2, 12, 1],
+                  [2, 13, 9],
+                  [2, 14, 8],
+                  [2, 15, 10],
+                  [2, 16, 6],
+                  [2, 17, 5],
+                  [2, 18, 5],
+                  [2, 19, 5],
+                  [2, 20, 7],
+                  [2, 21, 4],
+                  [2, 22, 2],
+                  [2, 23, 4],
+                  [3, 0, 7],
+                  [3, 1, 3],
+                  [3, 2, 0],
+                  [3, 3, 0],
+                  [3, 4, 0],
+                  [3, 5, 0],
+                  [3, 6, 0],
+                  [3, 7, 0],
+                  [3, 8, 1],
+                  [3, 9, 0],
+                  [3, 10, 5],
+                  [3, 11, 4],
+                  [3, 12, 7],
+                  [3, 13, 14],
+                  [3, 14, 13],
+                  [3, 15, 12],
+                  [3, 16, 9],
+                  [3, 17, 5],
+                  [3, 18, 5],
+                  [3, 19, 10],
+                  [3, 20, 6],
+                  [3, 21, 4],
+                  [3, 22, 4],
+                  [3, 23, 1],
+                  [4, 0, 1],
+                  [4, 1, 3],
+                  [4, 2, 0],
+                  [4, 3, 0],
+                  [4, 4, 0],
+                  [4, 5, 1],
+                  [4, 6, 0],
+                  [4, 7, 0],
+                  [4, 8, 0],
+                  [4, 9, 2],
+                  [4, 10, 4],
+                  [4, 11, 4],
+                  [4, 12, 2],
+                  [4, 13, 4],
+                  [4, 14, 4],
+                  [4, 15, 14],
+                  [4, 16, 12],
+                  [4, 17, 1],
+                  [4, 18, 8],
+                  [4, 19, 5],
+                  [4, 20, 3],
+                  [4, 21, 7],
+                  [4, 22, 3],
+                  [4, 23, 0],
+                  [5, 0, 2],
+                  [5, 1, 1],
+                  [5, 2, 0],
+                  [5, 3, 3],
+                  [5, 4, 0],
+                  [5, 5, 0],
+                  [5, 6, 0],
+                  [5, 7, 0],
+                  [5, 8, 2],
+                  [5, 9, 0],
+                  [5, 10, 4],
+                  [5, 11, 1],
+                  [5, 12, 5],
+                  [5, 13, 10],
+                  [5, 14, 5],
+                  [5, 15, 7],
+                  [5, 16, 11],
+                  [5, 17, 6],
+                  [5, 18, 0],
+                  [5, 19, 5],
+                  [5, 20, 3],
+                  [5, 21, 4],
+                  [5, 22, 2],
+                  [5, 23, 0],
+                  [6, 0, 1],
+                  [6, 1, 0],
+                  [6, 2, 0],
+                  [6, 3, 0],
+                  [6, 4, 0],
+                  [6, 5, 0],
+                  [6, 6, 0],
+                  [6, 7, 0],
+                  [6, 8, 0],
+                  [6, 9, 0],
+                  [6, 10, 1],
+                  [6, 11, 0],
+                  [6, 12, 2],
+                  [6, 13, 1],
+                  [6, 14, 3],
+                  [6, 15, 4],
+                  [6, 16, 0],
+                  [6, 17, 0],
+                  [6, 18, 0],
+                  [6, 19, 0],
+                  [6, 20, 1],
+                  [6, 21, 2],
+                  [6, 22, 2],
+                  [6, 23, 6]
+                ]
+              }
+            ]
+          },
+          options13: {
+            tooltip: {},
+            visualMap: {
+              max: 20,
+              inRange: {
+                color: [
+                  "#313695",
+                  "#4575b4",
+                  "#74add1",
+                  "#abd9e9",
+                  "#e0f3f8",
+                  "#ffffbf",
+                  "#fee090",
+                  "#fdae61",
+                  "#f46d43",
+                  "#d73027",
+                  "#a50026"
+                ]
+              }
+            },
+            xAxis3D: {
+              type: "category",
+              data: [
+                "12a",
+                "1a",
+                "2a",
+                "3a",
+                "4a",
+                "5a",
+                "6a",
+                "7a",
+                "8a",
+                "9a",
+                "10a",
+                "11a",
+                "12p",
+                "1p",
+                "2p",
+                "3p",
+                "4p",
+                "5p",
+                "6p",
+                "7p",
+                "8p",
+                "9p",
+                "10p",
+                "11p"
+              ]
+            },
+            yAxis3D: {
+              type: "category",
+              data: [
+                "Saturday",
+                "Friday",
+                "Thursday",
+                "Wednesday",
+                "Tuesday",
+                "Monday",
+                "Sunday"
+              ]
+            },
+            zAxis3D: {
+              type: "value"
+            },
+            grid3D: {
+              boxWidth: 200,
+              boxDepth: 80,
+              light: {
+                main: {
+                  intensity: 1.2
+                },
+                ambient: {
+                  intensity: 0.3
+                }
+              }
+            },
+            series: [
+              {
+                type: "bar3D",
+                data: [
+                  [0, 0, 5],
+                  [0, 1, 1],
+                  [0, 2, 0],
+                  [0, 3, 0],
+                  [0, 4, 0],
+                  [0, 5, 0],
+                  [0, 6, 0],
+                  [0, 7, 0],
+                  [0, 8, 0],
+                  [0, 9, 0],
+                  [0, 10, 0],
+                  [0, 11, 2],
+                  [0, 12, 4],
+                  [0, 13, 1],
+                  [0, 14, 1],
+                  [0, 15, 3],
+                  [0, 16, 4],
+                  [0, 17, 6],
+                  [0, 18, 4],
+                  [0, 19, 4],
+                  [0, 20, 3],
+                  [0, 21, 3],
+                  [0, 22, 2],
+                  [0, 23, 5],
+                  [1, 0, 7],
+                  [1, 1, 0],
+                  [1, 2, 0],
+                  [1, 3, 0],
+                  [1, 4, 0],
+                  [1, 5, 0],
+                  [1, 6, 0],
+                  [1, 7, 0],
+                  [1, 8, 0],
+                  [1, 9, 0],
+                  [1, 10, 5],
+                  [1, 11, 2],
+                  [1, 12, 2],
+                  [1, 13, 6],
+                  [1, 14, 9],
+                  [1, 15, 11],
+                  [1, 16, 6],
+                  [1, 17, 7],
+                  [1, 18, 8],
+                  [1, 19, 12],
+                  [1, 20, 5],
+                  [1, 21, 5],
+                  [1, 22, 7],
+                  [1, 23, 2],
+                  [2, 0, 1],
+                  [2, 1, 1],
+                  [2, 2, 0],
+                  [2, 3, 0],
+                  [2, 4, 0],
+                  [2, 5, 0],
+                  [2, 6, 0],
+                  [2, 7, 0],
+                  [2, 8, 0],
+                  [2, 9, 0],
+                  [2, 10, 3],
+                  [2, 11, 2],
+                  [2, 12, 1],
+                  [2, 13, 9],
+                  [2, 14, 8],
+                  [2, 15, 10],
+                  [2, 16, 6],
+                  [2, 17, 5],
+                  [2, 18, 5],
+                  [2, 19, 5],
+                  [2, 20, 7],
+                  [2, 21, 4],
+                  [2, 22, 2],
+                  [2, 23, 4],
+                  [3, 0, 7],
+                  [3, 1, 3],
+                  [3, 2, 0],
+                  [3, 3, 0],
+                  [3, 4, 0],
+                  [3, 5, 0],
+                  [3, 6, 0],
+                  [3, 7, 0],
+                  [3, 8, 1],
+                  [3, 9, 0],
+                  [3, 10, 5],
+                  [3, 11, 4],
+                  [3, 12, 7],
+                  [3, 13, 14],
+                  [3, 14, 13],
+                  [3, 15, 12],
+                  [3, 16, 9],
+                  [3, 17, 5],
+                  [3, 18, 5],
+                  [3, 19, 10],
+                  [3, 20, 6],
+                  [3, 21, 4],
+                  [3, 22, 4],
+                  [3, 23, 1],
+                  [4, 0, 1],
+                  [4, 1, 3],
+                  [4, 2, 0],
+                  [4, 3, 0],
+                  [4, 4, 0],
+                  [4, 5, 1],
+                  [4, 6, 0],
+                  [4, 7, 0],
+                  [4, 8, 0],
+                  [4, 9, 2],
+                  [4, 10, 4],
+                  [4, 11, 4],
+                  [4, 12, 2],
+                  [4, 13, 4],
+                  [4, 14, 4],
+                  [4, 15, 14],
+                  [4, 16, 12],
+                  [4, 17, 1],
+                  [4, 18, 8],
+                  [4, 19, 5],
+                  [4, 20, 3],
+                  [4, 21, 7],
+                  [4, 22, 3],
+                  [4, 23, 0],
+                  [5, 0, 2],
+                  [5, 1, 1],
+                  [5, 2, 0],
+                  [5, 3, 3],
+                  [5, 4, 0],
+                  [5, 5, 0],
+                  [5, 6, 0],
+                  [5, 7, 0],
+                  [5, 8, 2],
+                  [5, 9, 0],
+                  [5, 10, 4],
+                  [5, 11, 1],
+                  [5, 12, 5],
+                  [5, 13, 10],
+                  [5, 14, 5],
+                  [5, 15, 7],
+                  [5, 16, 11],
+                  [5, 17, 6],
+                  [5, 18, 0],
+                  [5, 19, 5],
+                  [5, 20, 3],
+                  [5, 21, 4],
+                  [5, 22, 2],
+                  [5, 23, 0],
+                  [6, 0, 1],
+                  [6, 1, 0],
+                  [6, 2, 0],
+                  [6, 3, 0],
+                  [6, 4, 0],
+                  [6, 5, 0],
+                  [6, 6, 0],
+                  [6, 7, 0],
+                  [6, 8, 0],
+                  [6, 9, 0],
+                  [6, 10, 1],
+                  [6, 11, 0],
+                  [6, 12, 2],
+                  [6, 13, 1],
+                  [6, 14, 3],
+                  [6, 15, 4],
+                  [6, 16, 0],
+                  [6, 17, 0],
+                  [6, 18, 0],
+                  [6, 19, 0],
+                  [6, 20, 1],
+                  [6, 21, 2],
+                  [6, 22, 2],
+                  [6, 23, 6]
+                ].map(function(item) {
+                  return {
+                    value: [item[1], item[0], item[2]]
+                  };
+                }),
+                shading: "color",
+                label: {
+                  show: false,
+                  textStyle: {
+                    fontSize: 16,
+                    borderWidth: 1
+                  }
+                },
+                itemStyle: {
+                  opacity: 0.4
+                },
+                emphasis: {
+                  label: {
+                    textStyle: {
+                      fontSize: 20,
+                      color: "#900"
+                    }
+                  },
+                  itemStyle: {
+                    color: "#900"
+                  }
+                }
+              }
+            ]
+          },
+          options14: {
+            tooltip: {},
+            backgroundColor: "#fff",
+            visualMap: {
+              show: false,
+              dimension: 2,
+              min: 0,
+              max: 30,
+              inRange: {
+                color: [
+                  "#313695",
+                  "#4575b4",
+                  "#74add1",
+                  "#abd9e9",
+                  "#e0f3f8",
+                  "#ffffbf",
+                  "#fee090",
+                  "#fdae61",
+                  "#f46d43",
+                  "#d73027",
+                  "#a50026"
+                ]
+              }
+            },
+            xAxis3D: {
+              type: "value"
+            },
+            yAxis3D: {
+              type: "value"
+            },
+            zAxis3D: {
+              type: "value"
+            },
+            grid3D: {
+              viewControl: {
+                projection: "orthographic"
+              }
+            },
+            series: [
+              {
+                type: "line3D",
+                data: (function() {
+                  let data = [];
+                  // Parametric curve
+                  for (let t = 0; t < 25; t += 0.001) {
+                    let x = (1 + 0.25 * Math.cos(75 * t)) * Math.cos(t);
+                    let y = (1 + 0.25 * Math.cos(75 * t)) * Math.sin(t);
+                    let z = t + 2.0 * Math.sin(75 * t);
+                    data.push([x, y, z]);
+                  }
+                  return data;
+                })(),
+                lineStyle: {
+                  width: 4
+                }
+              }
+            ]
+          },
+          options15: {
+            tooltip: {},
+            backgroundColor: "#fff",
+            visualMap: {
+              show: false,
+              dimension: 2,
+              min: -1,
+              max: 1,
+              inRange: {
+                color: [
+                  "#313695",
+                  "#4575b4",
+                  "#74add1",
+                  "#abd9e9",
+                  "#e0f3f8",
+                  "#ffffbf",
+                  "#fee090",
+                  "#fdae61",
+                  "#f46d43",
+                  "#d73027",
+                  "#a50026"
+                ]
+              }
+            },
+            xAxis3D: {
+              type: "value"
+            },
+            yAxis3D: {
+              type: "value"
+            },
+            zAxis3D: {
+              type: "value"
+            },
+            grid3D: {
+              viewControl: {
+                // projection: 'orthographic'
+              }
+            },
+            series: [
+              {
+                type: "surface",
+                wireframe: {
+                  // show: false
+                },
+                equation: {
+                  x: {
+                    step: 0.05
+                  },
+                  y: {
+                    step: 0.05
+                  },
+                  z: function(x, y) {
+                    if (Math.abs(x) < 0.1 && Math.abs(y) < 0.1) {
+                      return "-";
+                    }
+                    return Math.sin(x * Math.PI) * Math.sin(y * Math.PI);
+                  }
+                }
+              }
+            ]
+          }
+        },
+        actions: []
+      };
+    },
+    mounted: function() {
+      return {};
+    },
+    computed: {},
+    methods: {}
+  });
+    </script>
+</body>
+</html>