<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>
