w-component-vue 2.4.44 → 2.4.46

package/src/AppZoneWEchartsVueDyn.vue

@@ -1,1202 +1,1203 @@
-<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-component-vue/examples/app.html?cmp='+this.innerText,'_blank')">w-echarts-vue-dyn</span></div>
-
-
-        <div style="font-size:0.9rem; margin-bottom:10px;">
-            <span style="margin-right:10px;">Links:</span>
-            <a href="//github.com/apache/incubator-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/vue-echarts" target="_blank" rel="noreferrer noopener">vue-echarts</a>
-        </div>
-
-
-        <div>
-
-
-            <div class="bk">
-                <demolink
-                    :kbname="'w-echarts-vue-dyn'"
-                    :casename="'line'"
-                ></demolink>
-
-                <w-echarts-vue-dyn
-                    :style="`width:620px; height:300px;`"
-                    :options="WEchartsVueDyn.options1"
-                ></w-echarts-vue-dyn>
-
-            </div>
-
-
-            <div class="bk">
-                <demolink
-                    :kbname="'w-echarts-vue-dyn'"
-                    :casename="'resize'"
-                ></demolink>
-
-                <div style="padding-bottom:10px;">
-                    <v-btn depressed small elevation="2" @click="WEchartsVueDyn.widthOptions1=620">620px(default)</v-btn>
-                    <v-btn depressed small elevation="2" @click="WEchartsVueDyn.widthOptions1=310">310px</v-btn>
-                </div>
-
-                <w-echarts-vue-dyn
-                    :style="`width:${WEchartsVueDyn.widthOptions1}px; height:300px;`"
-                    :options="WEchartsVueDyn.options1"
-                ></w-echarts-vue-dyn>
-
-            </div>
-
-
-            <div class="bk">
-                <demolink
-                    :kbname="'w-echarts-vue-dyn'"
-                    :casename="'area'"
-                ></demolink>
-
-                <w-echarts-vue-dyn
-                    style="width:620px; height:300px;"
-                    :options="WEchartsVueDyn.options2"
-                ></w-echarts-vue-dyn>
-
-            </div>
-
-
-            <div class="bk">
-                <demolink
-                    :kbname="'w-echarts-vue-dyn'"
-                    :casename="'stack'"
-                ></demolink>
-
-                <w-echarts-vue-dyn
-                    style="width:620px; height:300px;"
-                    :options="WEchartsVueDyn.options3"
-                ></w-echarts-vue-dyn>
-
-            </div>
-
-
-            <div class="bk">
-                <demolink
-                    :kbname="'w-echarts-vue-dyn'"
-                    :casename="'radar'"
-                ></demolink>
-
-                <w-echarts-vue-dyn
-                    style="width:620px; height:300px;"
-                    :options="WEchartsVueDyn.options4"
-                ></w-echarts-vue-dyn>
-
-            </div>
-
-
-            <div class="bk">
-                <demolink
-                    :kbname="'w-echarts-vue-dyn'"
-                    :casename="'polar'"
-                ></demolink>
-
-                <w-echarts-vue-dyn
-                    style="width:620px; height:300px;"
-                    :options="WEchartsVueDyn.options5"
-                ></w-echarts-vue-dyn>
-
-            </div>
-
-
-            <div class="bk">
-                <demolink
-                    :kbname="'w-echarts-vue-dyn'"
-                    :casename="'heatmap'"
-                ></demolink>
-
-                <w-echarts-vue-dyn
-                    style="width:620px; height:300px;"
-                    :options="WEchartsVueDyn.options6"
-                ></w-echarts-vue-dyn>
-
-            </div>
-
-
-            <div class="bk">
-                <demolink
-                    :kbname="'w-echarts-vue-dyn'"
-                    :casename="'scatter'"
-                ></demolink>
-
-                <w-echarts-vue-dyn
-                    style="width:620px; height:300px;"
-                    :options="WEchartsVueDyn.options7"
-                ></w-echarts-vue-dyn>
-
-            </div>
-
-
-            <div class="bk">
-                <demolink
-                    :kbname="'w-echarts-vue-dyn'"
-                    :casename="'parallel'"
-                ></demolink>
-
-                <w-echarts-vue-dyn
-                    style="width:620px; height:300px;"
-                    :options="WEchartsVueDyn.options8"
-                ></w-echarts-vue-dyn>
-
-            </div>
-
-
-            <div class="bk" style="display:block;">
-                <demolink
-                    :kbname="'w-echarts-vue-dyn'"
-                    :casename="'tree'"
-                ></demolink>
-
-                <!-- 用:style才能支援IE11因vue會自動把overflow-y:auto轉為-ms-overflow-y:auto -->
-                <div :style="'overflow-y:auto; height:300px;'">
-                    <!-- echarts要給寬度否則無法撐開 -->
-                    <w-echarts-vue-dyn
-                        style="width:100%; height:2300px;"
-                        :options="WEchartsVueDyn.options9"
-                    ></w-echarts-vue-dyn>
-                </div>
-
-            </div>
-
-
-            <div class="bk" style="display:block;">
-                <demolink
-                    :kbname="'w-echarts-vue-dyn'"
-                    :casename="'treemap'"
-                ></demolink>
-
-                <!-- echarts要給寬度否則無法撐開 -->
-                <w-echarts-vue-dyn
-                    style="width:100%; height:500px;"
-                    :options="WEchartsVueDyn.options10"
-                ></w-echarts-vue-dyn>
-
-            </div>
-
-
-            <div class="bk">
-                <demolink
-                    :kbname="'w-echarts-vue-dyn'"
-                    :casename="'continuous'"
-                ></demolink>
-
-                <w-echarts-vue-dyn
-                    style="width:620px; height:400px;"
-                    :options="WEchartsVueDyn.options11"
-                ></w-echarts-vue-dyn>
-
-            </div>
-
-
-            <div class="bk">
-                <demolink
-                    :kbname="'w-echarts-vue-dyn'"
-                    :casename="'polar heatmap'"
-                ></demolink>
-
-                <w-echarts-vue-dyn
-                    style="width:620px; height:400px;"
-                    :options="WEchartsVueDyn.options12"
-                ></w-echarts-vue-dyn>
-
-            </div>
-
-
-            <div class="bk">
-                <demolink
-                    :kbname="'w-echarts-vue-dyn'"
-                    :casename="'bar3D'"
-                ></demolink>
-
-                <w-echarts-vue-dyn
-                    style="width:620px; height:400px;"
-                    :options="WEchartsVueDyn.options13"
-                ></w-echarts-vue-dyn>
-
-            </div>
-
-
-            <div class="bk">
-                <demolink
-                    :kbname="'w-echarts-vue-dyn'"
-                    :casename="'line3D'"
-                ></demolink>
-
-                <w-echarts-vue-dyn
-                    style="width:620px; height:400px;"
-                    :options="WEchartsVueDyn.options14"
-                ></w-echarts-vue-dyn>
-
-            </div>
-
-
-            <div class="bk">
-                <demolink
-                    :kbname="'w-echarts-vue-dyn'"
-                    :casename="'surface'"
-                ></demolink>
-
-                <w-echarts-vue-dyn
-                    style="width:620px; height:400px;"
-                    :options="WEchartsVueDyn.options15"
-                ></w-echarts-vue-dyn>
-
-            </div>
-
-
-        </div>
-
-
-    </div>
-</template>
-
-<script>
-import demolink from './components/demolink.vue'
-import WEchartsVueDyn from './components/WEchartsVueDyn.vue'
-
-
-export default {
-    components: {
-        demolink,
-        WEchartsVueDyn,
-    },
-    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 {
-            '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': [
-            ],
-        }
-    },
-}
-</script>
-
-<style scoped>
-</style>
+<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-component-vue/examples/app.html?cmp='+this.innerText,'_blank')">w-echarts-vue-dyn</span></div>
+
+
+        <div style="font-size:0.9rem; margin-bottom:10px;">
+            <span style="margin-right:10px;">Links:</span>
+            <a href="//github.com/apache/incubator-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/vue-echarts" target="_blank" rel="noreferrer noopener">vue-echarts</a>
+        </div>
+
+
+        <div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-echarts-vue-dyn'"
+                    :casename="'line'"
+                ></demolink>
+
+                <w-echarts-vue-dyn
+                    :style="`width:620px; height:300px;`"
+                    :options="WEchartsVueDyn.options1"
+                ></w-echarts-vue-dyn>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-echarts-vue-dyn'"
+                    :casename="'resize'"
+                ></demolink>
+
+                <div style="padding-bottom:10px;">
+                    <w-button-chip style="margin:0px 10px 5px 0px;" :text="'620px(default)'" :borderRadius="4" @click="WEchartsVueDyn.widthOptions1=620"></w-button-chip>
+                    <w-button-chip style="margin:0px 10px 5px 0px;" :text="'310px'" :borderRadius="4" @click="WEchartsVueDyn.widthOptions1=310"></w-button-chip>
+                </div>
+
+                <w-echarts-vue-dyn
+                    :style="`width:${WEchartsVueDyn.widthOptions1}px; height:300px;`"
+                    :options="WEchartsVueDyn.options1"
+                ></w-echarts-vue-dyn>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-echarts-vue-dyn'"
+                    :casename="'area'"
+                ></demolink>
+
+                <w-echarts-vue-dyn
+                    style="width:620px; height:300px;"
+                    :options="WEchartsVueDyn.options2"
+                ></w-echarts-vue-dyn>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-echarts-vue-dyn'"
+                    :casename="'stack'"
+                ></demolink>
+
+                <w-echarts-vue-dyn
+                    style="width:620px; height:300px;"
+                    :options="WEchartsVueDyn.options3"
+                ></w-echarts-vue-dyn>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-echarts-vue-dyn'"
+                    :casename="'radar'"
+                ></demolink>
+
+                <w-echarts-vue-dyn
+                    style="width:620px; height:300px;"
+                    :options="WEchartsVueDyn.options4"
+                ></w-echarts-vue-dyn>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-echarts-vue-dyn'"
+                    :casename="'polar'"
+                ></demolink>
+
+                <w-echarts-vue-dyn
+                    style="width:620px; height:300px;"
+                    :options="WEchartsVueDyn.options5"
+                ></w-echarts-vue-dyn>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-echarts-vue-dyn'"
+                    :casename="'heatmap'"
+                ></demolink>
+
+                <w-echarts-vue-dyn
+                    style="width:620px; height:300px;"
+                    :options="WEchartsVueDyn.options6"
+                ></w-echarts-vue-dyn>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-echarts-vue-dyn'"
+                    :casename="'scatter'"
+                ></demolink>
+
+                <w-echarts-vue-dyn
+                    style="width:620px; height:300px;"
+                    :options="WEchartsVueDyn.options7"
+                ></w-echarts-vue-dyn>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-echarts-vue-dyn'"
+                    :casename="'parallel'"
+                ></demolink>
+
+                <w-echarts-vue-dyn
+                    style="width:620px; height:300px;"
+                    :options="WEchartsVueDyn.options8"
+                ></w-echarts-vue-dyn>
+
+            </div>
+
+
+            <div class="bk" style="display:block;">
+                <demolink
+                    :kbname="'w-echarts-vue-dyn'"
+                    :casename="'tree'"
+                ></demolink>
+
+                <div :style="'overflow-y:auto; height:300px;'">
+                    <!-- echarts要給寬度否則無法撐開 -->
+                    <w-echarts-vue-dyn
+                        style="width:100%; height:2300px;"
+                        :options="WEchartsVueDyn.options9"
+                    ></w-echarts-vue-dyn>
+                </div>
+
+            </div>
+
+
+            <div class="bk" style="display:block;">
+                <demolink
+                    :kbname="'w-echarts-vue-dyn'"
+                    :casename="'treemap'"
+                ></demolink>
+
+                <!-- echarts要給寬度否則無法撐開 -->
+                <w-echarts-vue-dyn
+                    style="width:100%; height:500px;"
+                    :options="WEchartsVueDyn.options10"
+                ></w-echarts-vue-dyn>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-echarts-vue-dyn'"
+                    :casename="'continuous'"
+                ></demolink>
+
+                <w-echarts-vue-dyn
+                    style="width:620px; height:400px;"
+                    :options="WEchartsVueDyn.options11"
+                ></w-echarts-vue-dyn>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-echarts-vue-dyn'"
+                    :casename="'polar heatmap'"
+                ></demolink>
+
+                <w-echarts-vue-dyn
+                    style="width:620px; height:400px;"
+                    :options="WEchartsVueDyn.options12"
+                ></w-echarts-vue-dyn>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-echarts-vue-dyn'"
+                    :casename="'bar3D'"
+                ></demolink>
+
+                <w-echarts-vue-dyn
+                    style="width:620px; height:400px;"
+                    :options="WEchartsVueDyn.options13"
+                ></w-echarts-vue-dyn>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-echarts-vue-dyn'"
+                    :casename="'line3D'"
+                ></demolink>
+
+                <w-echarts-vue-dyn
+                    style="width:620px; height:400px;"
+                    :options="WEchartsVueDyn.options14"
+                ></w-echarts-vue-dyn>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-echarts-vue-dyn'"
+                    :casename="'surface'"
+                ></demolink>
+
+                <w-echarts-vue-dyn
+                    style="width:620px; height:400px;"
+                    :options="WEchartsVueDyn.options15"
+                ></w-echarts-vue-dyn>
+
+            </div>
+
+
+        </div>
+
+
+    </div>
+</template>
+
+<script>
+import demolink from './components/demolink.vue'
+import WEchartsVueDyn from './components/WEchartsVueDyn.vue'
+import WButtonChip from './components/WButtonChip.vue'
+
+
+export default {
+    components: {
+        demolink,
+        WEchartsVueDyn,
+        WButtonChip,
+    },
+    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 {
+            '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': [
+            ],
+        }
+    },
+}
+</script>
+
+<style scoped>
+</style>