w-echarts-vue 1.0.0

package/src/AppZoneWEchartsVue.vue

@@ -0,0 +1,1171 @@
+<template>
+    <div class="bkh">
+
+
+        <div class="head1"><span style="cursor:pointer;" title="open for copy link to view component" onclick="window.open('//yuda-lyu.github.io/w-echarts-vue/examples/app.html?cmp='+this.innerText,'_blank')">w-echarts-vue</span></div>
+
+
+        <div style="font-size:0.9rem; margin-bottom:10px;">
+            <span style="margin-right:10px;">Links:</span>
+            <a href="//github.com/apache/echarts" target="_blank" rel="noreferrer noopener">echarts</a>
+            <span style="margin:0px 10px">|</span>
+            <a href="//echarts.apache.org/examples/zh/index.html" target="_blank" rel="noreferrer noopener">echarts examples</a>
+            <span style="margin:0px 10px">|</span>
+            <a href="//github.com/ecomfe/echarts-gl" target="_blank" rel="noreferrer noopener">echarts-gl</a>
+        </div>
+
+
+        <div>
+
+
+            <div class="bk">
+                <demolink
+                    :pkgname="'w-echarts-vue'"
+                    :kbname="'w-echarts-vue'"
+                    :casename="'line'"
+                ></demolink>
+
+                <w-echarts-vue
+                    style="width:620px; height:300px;"
+                    :options="WEchartsVue.options1"
+                ></w-echarts-vue>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :pkgname="'w-echarts-vue'"
+                    :kbname="'w-echarts-vue'"
+                    :casename="'resize'"
+                ></demolink>
+
+                <div style="padding-bottom:10px;">
+                    <span class="cpitem cpitem-white" style="display:inline-block; margin:0px 10px 5px 0px; border:1px solid #ddd; border-radius:4px; font-size:0.9rem;" @click="WEchartsVue.widthOptions1=620">620px(default)</span>
+                    <span class="cpitem cpitem-white" style="display:inline-block; margin:0px 10px 5px 0px; border:1px solid #ddd; border-radius:4px; font-size:0.9rem;" @click="WEchartsVue.widthOptions1=310">310px</span>
+                </div>
+
+                <w-echarts-vue
+                    :style="`width:${WEchartsVue.widthOptions1}px; height:300px;`"
+                    :options="WEchartsVue.options1"
+                ></w-echarts-vue>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :pkgname="'w-echarts-vue'"
+                    :kbname="'w-echarts-vue'"
+                    :casename="'area'"
+                ></demolink>
+
+                <w-echarts-vue
+                    style="width:620px; height:300px;"
+                    :options="WEchartsVue.options2"
+                ></w-echarts-vue>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :pkgname="'w-echarts-vue'"
+                    :kbname="'w-echarts-vue'"
+                    :casename="'stack'"
+                ></demolink>
+
+                <w-echarts-vue
+                    style="width:620px; height:300px;"
+                    :options="WEchartsVue.options3"
+                ></w-echarts-vue>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :pkgname="'w-echarts-vue'"
+                    :kbname="'w-echarts-vue'"
+                    :casename="'radar'"
+                ></demolink>
+
+                <w-echarts-vue
+                    style="width:620px; height:300px;"
+                    :options="WEchartsVue.options4"
+                ></w-echarts-vue>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :pkgname="'w-echarts-vue'"
+                    :kbname="'w-echarts-vue'"
+                    :casename="'polar'"
+                ></demolink>
+
+                <w-echarts-vue
+                    style="width:620px; height:300px;"
+                    :options="WEchartsVue.options5"
+                ></w-echarts-vue>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :pkgname="'w-echarts-vue'"
+                    :kbname="'w-echarts-vue'"
+                    :casename="'heatmap'"
+                ></demolink>
+
+                <w-echarts-vue
+                    style="width:620px; height:300px;"
+                    :options="WEchartsVue.options6"
+                ></w-echarts-vue>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :pkgname="'w-echarts-vue'"
+                    :kbname="'w-echarts-vue'"
+                    :casename="'scatter'"
+                ></demolink>
+
+                <w-echarts-vue
+                    style="width:620px; height:300px;"
+                    :options="WEchartsVue.options7"
+                ></w-echarts-vue>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :pkgname="'w-echarts-vue'"
+                    :kbname="'w-echarts-vue'"
+                    :casename="'parallel'"
+                ></demolink>
+
+                <w-echarts-vue
+                    style="width:620px; height:300px;"
+                    :options="WEchartsVue.options8"
+                ></w-echarts-vue>
+
+            </div>
+
+
+            <div class="bk" style="display:block;">
+                <demolink
+                    :pkgname="'w-echarts-vue'"
+                    :kbname="'w-echarts-vue'"
+                    :casename="'tree'"
+                ></demolink>
+
+                <div :style="'overflow-y:auto; height:300px;'">
+                    <!-- echarts要給寬度否則無法撐開 -->
+                    <w-echarts-vue
+                        style="width:100%; height:2300px;"
+                        :options="WEchartsVue.options9"
+                    ></w-echarts-vue>
+                </div>
+
+            </div>
+
+
+            <div class="bk" style="display:block;">
+                <demolink
+                    :pkgname="'w-echarts-vue'"
+                    :kbname="'w-echarts-vue'"
+                    :casename="'treemap'"
+                ></demolink>
+
+                <!-- echarts要給寬度否則無法撐開 -->
+                <w-echarts-vue
+                    style="width:100%; height:500px;"
+                    :options="WEchartsVue.options10"
+                ></w-echarts-vue>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :pkgname="'w-echarts-vue'"
+                    :kbname="'w-echarts-vue'"
+                    :casename="'continuous'"
+                ></demolink>
+
+                <w-echarts-vue
+                    style="width:620px; height:400px;"
+                    :options="WEchartsVue.options11"
+                ></w-echarts-vue>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :pkgname="'w-echarts-vue'"
+                    :kbname="'w-echarts-vue'"
+                    :casename="'polar heatmap'"
+                ></demolink>
+
+                <w-echarts-vue
+                    style="width:620px; height:400px;"
+                    :options="WEchartsVue.options12"
+                ></w-echarts-vue>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :pkgname="'w-echarts-vue'"
+                    :kbname="'w-echarts-vue'"
+                    :casename="'bar3D'"
+                ></demolink>
+
+                <w-echarts-vue
+                    style="width:620px; height:400px;"
+                    :options="WEchartsVue.options13"
+                ></w-echarts-vue>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :pkgname="'w-echarts-vue'"
+                    :kbname="'w-echarts-vue'"
+                    :casename="'line3D'"
+                ></demolink>
+
+                <w-echarts-vue
+                    style="width:620px; height:400px;"
+                    :options="WEchartsVue.options14"
+                ></w-echarts-vue>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :pkgname="'w-echarts-vue'"
+                    :kbname="'w-echarts-vue'"
+                    :casename="'surface'"
+                ></demolink>
+
+                <w-echarts-vue
+                    style="width:620px; height:400px;"
+                    :options="WEchartsVue.options15"
+                ></w-echarts-vue>
+
+            </div>
+
+
+        </div>
+
+
+    </div>
+</template>
+
+<script>
+import demolink from 'w-component-vue/src/components/demolink.vue'
+import WEchartsVue from './components/WEchartsVue.vue'
+
+
+export default {
+    components: {
+        demolink,
+        WEchartsVue,
+    },
+    props: {
+    },
+    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 {
+            'WEchartsVue': {
+                '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: 'path://M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
+                        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: 'path://M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
+                        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',
+                            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: {
+                                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: {
+                        center: ['50%', '60%'],
+                        radius: '60%',
+                        axisName: {
+                            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',
+                        data: [
+                            {
+                                value: [4300, 10000, 28000, 35000, 50000, 19000],
+                                name: '预算分配（Allocated Budget）'
+                            },
+                            {
+                                value: [5000, 14000, 28000, 31000, 42000, 21000],
+                                name: '实际开销（Actual Spending）'
+                            }
+                        ]
+                    }]
+                },
+                'options5': {
+                    title: {
+                        text: '极坐标双数值轴'
+                    },
+                    legend: {
+                        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: {
+                            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%',
+                    },
+                    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',
+                            data: [window.dataFlare],
+                            top: '1%',
+                            left: '4%',
+                            bottom: '1%',
+                            right: '14%',
+                            symbolSize: 12,
+                            initialTreeDepth: undefined, //展開全部
+                            label: {
+                                position: 'left',
+                                verticalAlign: 'middle',
+                                align: 'right',
+                                fontSize: 12,
+                                formatter: function(p) {
+                                    if (p.value) {
+                                        return p.name + ': ' + p.value
+                                    }
+                                    return p.name
+                                },
+                            },
+                            leaves: {
+                                label: {
+                                    position: 'right',
+                                    verticalAlign: 'middle',
+                                    align: 'left',
+                                }
+                            },
+                            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',
+                                    }
+                                },
+                                {
+                                    itemStyle: {
+                                        borderWidth: 2,
+                                        gapWidth: 2,
+                                        borderColor: '#666',
+                                    }
+                                },
+                                {
+                                    itemStyle: {
+                                        borderWidth: 2,
+                                        gapWidth: 2,
+                                        borderColor: '#888',
+                                    }
+                                },
+                                {
+                                    itemStyle: {
+                                        borderWidth: 2,
+                                        gapWidth: 2,
+                                        borderColor: '#aaa',
+                                    }
+                                }
+                            ]
+                        }
+                    ]
+                },
+                'options11': {
+                    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,
+                            fontSize: 16,
+                            borderWidth: 1
+                        },
+                        itemStyle: {
+                            opacity: 0.4
+                        },
+                        emphasis: {
+                            label: {
+                                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: {
+                    },
+                    series: [{
+                        type: 'surface',
+                        wireframe: {
+                        },
+                        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': [
+            ],
+        }
+    },
+}
+</script>
+
+<style scoped>
+</style>