npm - w-component-vue - Versions diffs - 2.4.43 → 2.4.45 - Mend

w-component-vue 2.4.43 → 2.4.45

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

package/docs/examples/w-echarts-vue-dyn_treemap.html DELETED Viewed

@@ -1,1814 +0,0 @@
-<!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.4.47/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.43/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" style="display:block;">
-            <div class="item">treemap</div>
-            <!-- echarts要給寬度否則無法撐開 -->
-            <w-echarts-vue-dyn
-                style="width:100%; height:500px;"
-                :options="WEchartsVueDyn.options10"
-            ></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>