
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <script src="lib/esl.js"></script>
        <script src="lib/config.js"></script>
        <script src="lib/jquery.min.js"></script>
        <script src="lib/facePrint.js"></script>
        <script src="lib/testHelper.js"></script>
        <!-- <script src="ut/lib/canteen.js"></script> -->
        <link rel="stylesheet" href="lib/reset.css" />
    </head>
    <body>

        <div id="main0"></div>
        <div id="main1"></div>
        <div id="main2"></div>


        <script>
            require([
                'echarts'
            ], function (echarts) {

                require(['map/js/china'], function () {
                    var itemStyle = {
                        normal:{
                            borderColor: 'rgba(0, 0, 0, 0.2)'
                        },
                        emphasis:{
                            shadowOffsetX: 0,
                            shadowOffsetY: 0,
                            shadowBlur: 20,
                            borderWidth: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    };

                    var option = {
                        tooltip: {},
                        title : {
                            text: '内蒙古 青海 没数据也要能被选中',
                            left: 'center'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left',
                            data:['iphone3','iphone4','iphone5']
                        },
                        visualMap: {
                            min: 0,
                            max: 1500,
                            left: 'left',
                            top: 'bottom',
                            text: ['高','低'],
                            calculable : true
                        },
                        selectedMode: 'single',
                        series : [
                            {
                                name: 'iphone3',
                                type: 'map',
                                map: 'china',
                                itemStyle: itemStyle,
                                showLegendSymbol: true,
                                // zoom: 10,
                                // center: [115.97, 29.71],
                                roam: true,
                                markPoint: {
                                    data: [{
                                        coord: [115.97, 29.71]
                                    }]
                                },
                                label: {
                                    normal: {
                                        show: true,
                                        rotate: 40,
                                        formatter: '{b}：{value|{c}}',
                                        // position: 'inside',
                                        backgroundColor: '#fff',
                                        padding: [3, 5],
                                        borderRadius: 3,
                                        borderWidth: 1,
                                        borderColor: 'rgba(0,0,0,0.5)',
                                        color: '#777',
                                        rich: {
                                            value: {
                                                color: '#019D2D',
                                                fontSize: 14,
                                                // fontWeight: 'bold'
                                                // textBorderWidth: 2,
                                                // textBorderColor: '#000'
                                            }
                                        }
                                    },
                                    emphasis: {
                                        show: true
                                    }
                                },
                                data:[
                                    {name: '北京',value: Math.round(Math.random()*1000)},
                                    {name: '天津',value: Math.round(Math.random()*1000)},
                                    {name: '上海',value: Math.round(Math.random()*1000)},
                                    {name: '重庆',value: Math.round(Math.random()*1000)},
                                    {name: '河北',value: Math.round(Math.random()*1000)},
                                    {name: '河南',value: Math.round(Math.random()*1000)},
                                    {name: '云南',value: Math.round(Math.random()*1000)},
                                    {name: '辽宁',value: Math.round(Math.random()*1000)},
                                    {name: '黑龙江',value: Math.round(Math.random()*1000)},
                                    {name: '湖南',value: Math.round(Math.random()*1000)},
                                    {name: '安徽',value: Math.round(Math.random()*1000)},
                                    {name: '山东',value: Math.round(Math.random()*1000)},
                                    {name: '新疆',value: Math.round(Math.random()*1000)},
                                    {name: '江苏',value: Math.round(Math.random()*1000)},
                                    {name: '浙江',value: Math.round(Math.random()*1000)},
                                    {name: '江西',value: Math.round(Math.random()*1000)},
                                    {name: '湖北',value: Math.round(Math.random()*1000)},
                                    {name: '广西',value: Math.round(Math.random()*1000)},
                                    {name: '甘肃',value: Math.round(Math.random()*1000)},
                                    {name: '山西',value: Math.round(Math.random()*1000)},
                                    // {name: '内蒙古',value: Math.round(Math.random()*1000)},
                                    {name: '陕西',value: Math.round(Math.random()*1000)},
                                    {name: '吉林',value: Math.round(Math.random()*1000)},
                                    {name: '福建',value: Math.round(Math.random()*1000)},
                                    {name: '贵州',value: Math.round(Math.random()*1000)},
                                    {name: '广东',value: Math.round(Math.random()*1000)},
                                    // {name: '青海',value: Math.round(Math.random()*1000)},
                                    {name: '西藏',value: Math.round(Math.random()*1000)},
                                    {name: '四川',value: Math.round(Math.random()*1000)},
                                    {name: '宁夏',value: Math.round(Math.random()*1000)},
                                    {name: '海南',value: Math.round(Math.random()*1000)},
                                    {name: '台湾',value: Math.round(Math.random()*1000)},
                                    {name: '香港',value: Math.round(Math.random()*1000)},
                                    {name: '澳门',value: Math.round(Math.random()*1000)}
                                ]
                            },
                            {
                                name: 'iphone4',
                                type: 'map',
                                mapType: 'china',
                                itemStyle: itemStyle,
                                showLegendSymbol: true,
                                label: {
                                    normal: {
                                        show: true
                                    },
                                    emphasis: {
                                        show: true
                                    }
                                },
                                data:[
                                    {name: '北京',value: Math.round(Math.random()*1000)},
                                    {name: '天津',value: Math.round(Math.random()*1000)},
                                    {name: '上海',value: Math.round(Math.random()*1000)},
                                    {name: '重庆',value: Math.round(Math.random()*1000)},
                                    {name: '河北',value: Math.round(Math.random()*1000)},
                                    {name: '安徽',value: Math.round(Math.random()*1000)},
                                    {name: '新疆',value: Math.round(Math.random()*1000)},
                                    {name: '浙江',value: Math.round(Math.random()*1000)},
                                    {name: '江西',value: Math.round(Math.random()*1000)},
                                    {name: '山西',value: Math.round(Math.random()*1000)},
                                    // {name: '内蒙古',value: 891},
                                    {name: '吉林',value: Math.round(Math.random()*1000)},
                                    {name: '福建',value: Math.round(Math.random()*1000)},
                                    {name: '广东',value: Math.round(Math.random()*1000)},
                                    {name: '西藏',value: Math.round(Math.random()*1000)},
                                    {name: '四川',value: Math.round(Math.random()*1000)},
                                    {name: '宁夏',value: Math.round(Math.random()*1000)},
                                    {name: '香港',value: Math.round(Math.random()*1000)},
                                    {name: '澳门',value: Math.round(Math.random()*1000)}
                                ]
                            },
                            {
                                name: 'iphone5',
                                type: 'map',
                                mapType: 'china',
                                itemStyle: itemStyle,
                                showLegendSymbol: true,
                                label: {
                                    normal: {
                                        show: true
                                    },
                                    emphasis: {
                                        show: true
                                    }
                                },
                                data:[
                                    {name: '北京',value: Math.round(Math.random()*1000)},
                                    {name: '天津',value: Math.round(Math.random()*1000)},
                                    {name: '上海',value: Math.round(Math.random()*1000)},
                                    {name: '广东',value: Math.round(Math.random()*1000)},
                                    {name: '台湾',value: Math.round(Math.random()*1000)},
                                    {name: '香港',value: Math.round(Math.random()*1000)},
                                    {name: '澳门',value: Math.round(Math.random()*1000)}
                                ]
                            }
                        ]
                    };

                    var chart = testHelper.create(echarts, 'main0', {
                        option: option,
                        height: 550
                    });

                    if (chart) {
                        chart.on('click', function (param) {
                            console.log(param);
                        });
                    }
                });
            });

        </script>


        <script>

            require([
                'echarts'
            ], function (echarts) {

                require(['map/js/china'], function () {
                    var itemStyle = {
                        normal:{
                            borderColor: 'rgba(0, 0, 0, 0.2)'
                        },
                        emphasis:{
                            shadowOffsetX: 0,
                            shadowOffsetY: 0,
                            shadowBlur: 20,
                            borderWidth: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    };
                    var option = {
                        tooltip: {},
                        legend: {
                            orient: 'vertical',
                            left: 'left',
                            data:['iphone3','iphone4','iphone5']
                        },
                        visualMap: {
                            min: 0,
                            max: 1500,
                            left: 'left',
                            top: 'bottom',
                            text:['高','低'],
                            calculable : true
                        },
                        selectedMode: 'multiple',
                        series: [
                            {
                                name: 'iphone3',
                                type: 'map',
                                map: 'china',
                                itemStyle: itemStyle,
                                showLegendSymbol: true,
                                // zoom: 10,
                                // center: [115.97, 29.71],
                                roam: true,
                                label: {
                                    show: true,
                                    rotate: 40,
                                    formatter: '{b}：{value|{c}}',
                                    backgroundColor: '#fff',
                                    padding: [3, 5],
                                    borderRadius: 3,
                                    borderWidth: 1,
                                    borderColor: 'rgba(0,0,0,0.5)',
                                    color: '#934',
                                    rich: {
                                        value: {
                                            color: '#019D2D',
                                            fontSize: 14
                                        }
                                    }
                                },
                                emphasis: {
                                    label: {
                                        show: true,
                                        backgroundColor: '#fcf'
                                    },
                                },
                                data:[
                                    {name: '北京', value: 234},
                                    {name: '天津', value: 432},
                                    {name: '新疆', value: 100},
                                    {name: '陕西', value: 77},
                                    {name: '西藏', value: 101},
                                ]
                            },
                            {
                                name: 'iphone4',
                                type: 'map',
                                mapType: 'china',
                                itemStyle: itemStyle,
                                showLegendSymbol: true,
                                label: {
                                    show: true,
                                    rotate: 90,
                                    formatter: '{b}：{value|{c}}',
                                    backgroundColor: '#fff',
                                    padding: [3, 5],
                                    borderRadius: 3,
                                    borderWidth: 1,
                                    borderColor: 'rgba(0,0,0,0.5)',
                                    color: '#934',
                                    rich: {
                                        value: {
                                            color: '#019D2D',
                                            fontSize: 14
                                        }
                                    }
                                },
                                emphasis: {
                                    label: {
                                        show: true,
                                        backgroundColor: '#fcf'
                                    }
                                },
                                data:[
                                    {name: '北京',value: 567},
                                    {name: '河北',value: 321},
                                    {name: '新疆', value: 100},
                                    {name: '内蒙古', value: 99},
                                    {name: '西藏', value: 101}
                                ]
                            }
                        ]
                    };

                    var chart = testHelper.create(echarts, 'main1', {
                        option: option,
                        // recordCanvas: true,
                        title: [
                            '1. 北京、天津、河北 rich text 正常倾斜（河北竖直）（其他 region 都没数据，显示 NaN）',
                            '2. selectedMode: "multiple"',
                            '3. hover 时标签底色变红',
                            '所有 label 样式一致（例外：没数据的 label 并不 rotate，因为这还没支持）'
                        ]
                    });

                    chart && chart.on('click', function (param) {
                        console.log(param);
                    });
                });

            });

        </script>


        <script>

            require([
                'echarts'
            ], function (echarts) {

                require(['map/js/china'], function () {
                    var locations = [{
                        name: '上海',
                        coord: [121.472644, 31.231706]
                    }, {
                        name: '北京',
                        coord: [116.405285, 39.904989]
                    }, {
                        name: '广东',
                        coord: [113.280637, 23.839463714285714]
                    }];
                    option = {
                        tooltip: {
                            trigger: 'item',
                            formatter: '{b}'
                        },
                        series: [
                            {
                                name: '中国',
                                type: 'map',
                                mapType: 'china',
                                selectedMode : 'multiple',
                                label: {
                                    show: true
                                }
                            }
                        ]
                    };
                    var myChart = testHelper.create(echarts, 'main2', {
                        option: option,
                        height: 550,
                        title: ['Animation when changing map zoom and center']
                    });
                    var currentLoc = 0;
                    setInterval(function () {
                        myChart.setOption({
                            series: [{
                                center: locations[currentLoc].coord,
                                zoom: 4,
                                data: [
                                    {name: locations[currentLoc].name, selected: true}
                                ],
                                animationDurationUpdate: 1000,
                                animationEasingUpdate: 'cubicInOut'
                            }]
                        });
                        currentLoc = (currentLoc + 1) % locations.length;
                    }, 2000);

                });

            });

        </script>


    </body>
</html>