<!DOCTYPE html>
<!--
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>
        <link rel="stylesheet" href="lib/reset.css">
    </head>
    <body>
        <style>
            h1 {
                line-height: 60px;
                height: 60px;
                background: #a60;
                text-align: center;
                font-weight: bold;
                color: #eee;
                font-size: 14px;
            }
            .chart {
                height: 500px;
            }
        </style>


        <div class="chart" id="map"></div>

        <div class="chart" id="line-symbol"></div>


        <script>
            require([
                'echarts',
                // 'echarts/chart/map',
                // 'echarts/component/legend',
                // 'echarts/component/grid',
                // 'echarts/component/visualMap',
                // 'echarts/component/tooltip',
                'map/js/china'
            ], function (echarts) {

                var option = {
                    title : {
                        text: '订单量',
                        subtext: '纯属虚构',
                        x:'center'
                    },
                    tooltip : {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        x:'left',
                        data:['订单量']
                    },
                    visualMap: {
                        // selectedMode: 'single',
                        text: ['Map Result'],
                        showLabel: true,
                        right: 20,
                        pieces: [
                            {min: 1500},
                            {min: 900, max: 1500},
                            {min: 310, max: 1000},
                            {min: 200, max: 400},
                            {min: 10, max: 200, label: '10 到 200（自定义label）'},
                            {value: 123, label: '123（自定义特殊颜色）', color: 'grey'},
                            {min: 5, max: 5, label: '5（自定义特殊颜色）', color: 'black'},
                            {max: 5}
                        ],
                        color: ['#E0022B', '#E09107', '#A3E00B']
                    },
                    toolbox: {
                        show: true,
                        orient : 'vertical',
                        x: 'right',
                        y: 'center',
                        feature : {
                            mark : {show: true},
                            dataView : {show: true, readOnly: false},
                            restore : {show: true},
                            saveAsImage : {show: true}
                        }
                    },
                    roamController: {
                        show: true,
                        x: 'right',
                        mapTypeControl: {
                            'china': true
                        }
                    },
                    series : [
                        {
                            name: '订单量',
                            type: 'map',
                            mapType: 'china',
                            roam: false,
                            itemStyle:{
                                normal:{
                                    label:{
                                        show:true,
                                        // textStyle: {
                                            // color: "red"
                                        // }
                                    }
                                },
                                emphasis:{label:{show:true}}
                            },
                            data:[
                                {name: '北京',value: 5},
                                {name: '天津',value: Math.round(Math.random()*2000)},
                                {name: '上海',value: Math.round(Math.random()*2000)},
                                {name: '重庆',value: Math.round(Math.random()*2000)},
                                {name: '河北',value: 0},
                                {name: '河南',value: Math.round(Math.random()*2000)},
                                {name: '云南',value: 123},
                                {name: '辽宁',value: 305},
                                {name: '黑龙江', value: Math.round(Math.random()*2000), visualMap: false},
                                {name: '湖南', value: 200},
                                {name: '安徽',value: Math.round(Math.random()*2000)},
                                {name: '山东',value: Math.round(Math.random()*2000)},
                                {name: '新疆',value: Math.round(Math.random()*2000)},
                                {name: '江苏', itemStyle: {color: 'red'}, value: Math.round(Math.random()*2000), visualMap: false},
                                {name: '浙江',value: Math.round(Math.random()*2000)},
                                {name: '江西',value: Math.round(Math.random()*2000)},
                                {name: '湖北',value: Math.round(Math.random()*2000)},
                                {name: '广西',value: Math.round(Math.random()*2000)},
                                {name: '甘肃',value: Math.round(Math.random()*2000)},
                                {name: '山西',value: Math.round(Math.random()*2000)},
                                {name: '内蒙古',value: Math.round(Math.random()*2000)},
                                {name: '陕西',value: Math.round(Math.random()*2000)},
                                {name: '吉林',value: Math.round(Math.random()*2000)},
                                {name: '福建',value: Math.round(Math.random()*2000)},
                                {name: '贵州',value: Math.round(Math.random()*2000)},
                                {name: '广东',value: Math.round(Math.random()*2000)},
                                {name: '青海',value: Math.round(Math.random()*2000)},
                                {name: '西藏',value: Math.round(Math.random()*2000)},
                                {name: '四川',value: Math.round(Math.random()*2000)},
                                {name: '宁夏',value: Math.round(Math.random()*2000)},
                                {name: '海南',value: Math.round(Math.random()*2000)},
                                {name: '台湾',value: Math.round(Math.random()*2000)},
                                {name: '香港',value: Math.round(Math.random()*2000)},
                                {name: '澳门',value: Math.round(Math.random()*2000)}
                            ]
                        }
                    ]
                };

                var chart = testHelper.create(echarts, 'map', {
                    title: [
                        'All provinces should be "blue", except that',
                        '北京 is "black"',
                        '黑龙江 is "grey" (visualMap: false)',
                        '江苏 is "red" (visualMap: false)'
                    ],
                    option: option
                });

            })

        </script>


        <script>

            var echarts;
            var colorTool;
            var chart;
            var myChart;
            var groupCategories = [];
            var groupColors = [];

            require([
                'echarts'
                // 'echarts/chart/line',
                // 'echarts/chart/parallel',
                // 'echarts/component/grid',
                // 'echarts/component/legend',
                // 'echarts/component/tooltip',
                // 'echarts/component/toolbox',
                // 'echarts/component/visualMap'
            ], function (echarts) {
                var option = {
                    title: {
                        text: '未来一周气温变化',
                        subtext: '纯属虚构'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data:['最高气温','最低气温']
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            dataZoom: {
                                yAxisIndex: 'none'
                            },
                            dataView: {readOnly: false},
                            magicType: {type: ['line', 'bar']},
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    visualMap: {
                        type: 'piecewise',
                        orient: 'horizontal',
                        left: 'center',
                        pieces: [
                            {gt: 10, lte: 15, label: 'weixian', symbol: 'emptyCircle', color: 'red'},
                            {gt: 5, lte: 10, label: 'weixian', symbol: 'emptyCircle', color: 'green'}
                        ],
                        outOfRange: {
                            color: '#ccc',
                            symbol: 'emptyCircle'
                        }
                    },
                    xAxis:  {
                        type: 'category',
                        boundaryGap: false,
                        data: ['周一','周二','周三','周四','周五','周六','周日']
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value} °C'
                        }
                    },
                    series: [
                        {
                            name:'最高气温',
                            type:'line',
                            data:[11, 11, 15, 13, 12, 13, 10]
                        }
                    ]
                };

                var chart = testHelper.create(echarts, 'line-symbol', {
                    title: 'line symbol (check toggle normally)',
                    option: option
                });
            });

        </script>


    </body>
</html>