
<!--
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">
        <script src="lib/esl.js"></script>
        <script src="lib/config.js"></script>
        <script src="lib/jquery.min.js"></script>
        <script src="lib/draggable.js"></script>
        <link rel="stylesheet" href="lib/reset.css">
        <meta name="viewport" content="width=device-width, initial-scale=1" />
    </head>
    <body>
        <style>
            body {
                position: absolute;
                left: 0;
                top: 0;
            }
            #main {
                position: absolute;
                top: 10px;
                left: 10px;
                width: 700px;
                height: 650px;
                background: #fff;
            }
            .code-panel {
                position: fixed;
                top: 10px;
                right: 10px;
                width: 200px;
                border: 2px solid #555;
            }
            .code-line {
                margin: 15px 5px;
                font-size: 12px;
            }
            .code-line textarea{
                width: 190px;
                height: 80px;
                margin-bottom: 5px;
            }
        </style>
        <div id="main"></div>

        <div class="code-panel">
            <div class="code-line">
                <textarea id="code1">
chart.setOption({backgroundColor: '#000'});
                </textarea>
                <input type="button" value="run" onclick="runCode('code1');"/>
                Then press restore buttton.
            </div>
            <div class="code-line">
                <textarea id="code2">
chart.setOption({backgroundColor: '#fff'});
                </textarea>
                <input type="button" value="run" onclick="runCode('code2');"/>
            </div>
            <div class="code-line">
                <textarea id="code3">
chart.setOption({
    series: [
        {id: 'pie0', label: {normal: {position: 'inside'}}}
    ]
});
                </textarea>
                <input type="button" value="run" onclick="runCode('code3');"/>
            </div>
            <div class="code-line">
                <textarea id="code4">
chart.setOption({
    timeline: {
        currentIndex: 5
    }
});
                </textarea>
                <input type="button" value="run" onclick="runCode('code4');"/>
            </div>
        </div>

        <script src="data/timelineGDP.js"></script>

        <script>

        var chart;
        var echarts;

// markLine: {
//     symbol: ['arrow','none'],
//     symbolSize: [4, 2],
//     itemStyle: {
//         normal: {
//             lineStyle: {color:'orange'},
//             barBorderColor:'orange',
//             label: {
//                 position:'left',
//                 formatter:function(params){
//                     return Math.round(params.value);
//                 },
//                 textStyle:{color:'orange'}
//             }
//         }
//     },
//     data: [{type: 'average', name: '平均值'}]
// }

            require([
                'echarts'
                // 'echarts/chart/bar',
                // 'echarts/chart/pie',
                // 'echarts/component/title',
                // 'echarts/component/legend',
                // 'echarts/component/grid',
                // 'echarts/component/tooltip',
                // 'echarts/component/timeline',
                // 'echarts/component/toolbox'
            ], function (ec) {
                echarts = ec;

                chart = echarts.init(document.getElementById('main'), null, {

                });

                draggable.init(
                    document.getElementById('main'),
                    chart,
                    {throttle: 70}
                );


var categoryData = [
    '北京','天津','河北','山西','内蒙古','辽宁','吉林','黑龙江',
    '上海','江苏','浙江','安徽','福建','江西','山东','河南',
    '湖北','湖南','广东','广西','海南','重庆','四川','贵州',
    '云南','西藏','陕西','甘肃','青海','宁夏','新疆'
];
var categoryDataWithReturn = [];
for (var i = 0; i < categoryData.length; i++) {
    var word = categoryData[i];
    if (i % 2 === 0) {
        word = '\n' + word;
    }
    categoryDataWithReturn.push(word);
}


    var categoryData = [
        '北京','天津','河北','山西','内蒙古','辽宁','吉林','黑龙江',
        '上海','江苏','浙江','安徽','福建','江西','山东','河南',
        '湖北','湖南','广东','广西','海南','重庆','四川','贵州',
        '云南','西藏','陕西','甘肃','青海','宁夏','新疆'
    ];


    option = {
        baseOption: {
            timeline: {
                axisType: 'category',
                autoPlay: true,
                playInterval: 1000,
                data: [
                    '2002-01-01', '2003-01-01', '2004-01-01',
                    '2005-01-01', '2006-01-01', '2007-01-01',
                    '2008-01-01', '2009-01-01', '2010-01-01',
                    '2011-01-01'
                ],
                label: {
                    formatter : function(s) {
                        return (new Date(s)).getFullYear();
                    }
                }
            },
            toolbox: {
                left: 0,
                bottom: 0,
                feature: {
                    restore: {}
                }
            },
            title: {
                subtext: 'Media Query 示例'
            },
            tooltip: {
                trigger:'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            xAxis: {
                type: 'value',
                name: 'GDP（亿元）',
                max: 30000,
                data: null
            },
            yAxis: {
                type: 'category',
                data: categoryData,
                axisLabel: {interval: 0},
                splitLine: {show: false}
            },
            legend: {
                data: ['第一产业', '第二产业', '第三产业', 'GDP', '金融', '房地产'],
                selected: {
                    'GDP': false, '金融': false, '房地产': false
                }
            },
            calculable : true,
            series: [
                {name: 'GDP', type: 'bar'},
                {name: '金融', type: 'bar'},
                {name: '房地产', type: 'bar'},
                {name: '第一产业', type: 'bar'},
                {name: '第二产业', type: 'bar'},
                {name: '第三产业', type: 'bar'},
                {name: 'GDP占比', type: 'pie', id: 'pie0'}
            ]
        },
        media: [
            {
                option: {
                    legend: {
                        orient: 'horizontal',
                        left: 'right',
                        itemGap: 10
                    },
                    grid: {
                        left: '10%',
                        top: 80,
                        right: 90,
                        bottom: 100
                    },
                    xAxis: {
                        nameLocation: 'end',
                        nameGap: 10,
                        splitLine: {
                            show: true
                        },
                        axisLabel: {
                            interval: 'auto'
                        }
                    },
                    timeline: {
                        show: true,
                        orient: 'horizontal',
                        inverse: false,
                        left: '20%',
                        right: '20%',
                        bottom: 10,
                        height: 40
                    },
                    series: [
                        {name: 'GDP占比', center: ['75%', '30%'], radius: '28%'}
                    ]
                }
            },
            {
                query: {maxWidth: 670, minWidth: 550},
                option: {
                    legend: {
                        orient: 'horizontal',
                        left: 200,
                        itemGap: 5
                    },
                    grid: {
                        left: '10%',
                        top: 80,
                        right: 90,
                        bottom: 100
                    },
                    xAxis: {
                        nameLocation: 'end',
                        nameGap: 10,
                        splitLine: {
                            show: true
                        },
                        axisLabel: {
                            interval: 'auto'
                        }
                    },
                    timeline: {
                        show: true,
                        orient: 'horizontal',
                        inverse: false,
                        left: '20%',
                        right: '20%',
                        bottom: 10,
                        height: 40
                    },
                    series: [
                        {name: 'GDP占比', center: ['75%', '30%'], radius: '28%'}
                    ]
                }
            },
            {
                query: {maxWidth: 550},
                option: {
                    legend: {
                        orient: 'vertical',
                        left: 'right',
                        itemGap: 5
                    },
                    grid: {
                        left: 55,
                        top: '32%',
                        right: 100,
                        bottom: 50
                    },
                    xAxis: {
                        nameLocation: 'middle',
                        nameGap: 25,
                        axisLabel: {
                            interval: 1
                        }
                    },
                    timeline: {
                        show: true,
                        orient: 'vertical',
                        inverse: true,
                        right: 10,
                        top: 150,
                        bottom: 10,
                        width: 55
                    },
                    series: [
                        {name: 'GDP占比', center: ['45%', '20%'], radius: '28%'}
                    ]
                }
            },
            {
                query: {maxWidth: 350},
                option: {
                    legend: {
                        orient: 'vertical',
                        left: 'right',
                        itemGap: 5
                    },
                    grid: {
                        left: 55,
                        top: '32%',
                        right: 100,
                        bottom: 50
                    },
                    xAxis: {
                        nameLocation: 'middle',
                        nameGap: 25,
                        axisLabel: {
                            interval: 1
                        }
                    },
                    timeline: {
                        show: false
                    },
                    series: [
                        {name: 'GDP占比', center: ['45%', '20%'], radius: '28%'}
                    ]
                }
            }
        ],
        options: [
            {
                title: {text: '2002全国宏观经济指标'},
                series: [
                    {data: dataMap.dataGDP['2002']},
                    {data: dataMap.dataFinancial['2002']},
                    {data: dataMap.dataEstate['2002']},
                    {data: dataMap.dataPI['2002']},
                    {data: dataMap.dataSI['2002']},
                    {data: dataMap.dataTI['2002']},
                    {data: [
                        {name: '第一产业', value: dataMap.dataPI['2002sum']},
                        {name: '第二产业', value: dataMap.dataSI['2002sum']},
                        {name: '第三产业', value: dataMap.dataTI['2002sum']}
                    ], id: 'pie0'}
                ]
            },
            {
                title : {text: '2003全国宏观经济指标'},
                series : [
                    {data: dataMap.dataGDP['2003']},
                    {data: dataMap.dataFinancial['2003']},
                    {data: dataMap.dataEstate['2003']},
                    {data: dataMap.dataPI['2003']},
                    {data: dataMap.dataSI['2003']},
                    {data: dataMap.dataTI['2003']},
                    {data: [
                        {name: '第一产业', value: dataMap.dataPI['2003sum']},
                        {name: '第二产业', value: dataMap.dataSI['2003sum']},
                        {name: '第三产业', value: dataMap.dataTI['2003sum']}
                    ], id: 'pie0'}
                ]
            },
            {
                title : {text: '2004全国宏观经济指标'},
                series : [
                    {data: dataMap.dataGDP['2004']},
                    {data: dataMap.dataFinancial['2004']},
                    {data: dataMap.dataEstate['2004']},
                    {data: dataMap.dataPI['2004']},
                    {data: dataMap.dataSI['2004']},
                    {data: dataMap.dataTI['2004']},
                    {data: [
                        {name: '第一产业', value: dataMap.dataPI['2004sum']},
                        {name: '第二产业', value: dataMap.dataSI['2004sum']},
                        {name: '第三产业', value: dataMap.dataTI['2004sum']}
                    ], id: 'pie0'}
                ]
            },
            {
                title : {text: '2005全国宏观经济指标'},
                series : [
                    {data: dataMap.dataGDP['2005']},
                    {data: dataMap.dataFinancial['2005']},
                    {data: dataMap.dataEstate['2005']},
                    {data: dataMap.dataPI['2005']},
                    {data: dataMap.dataSI['2005']},
                    {data: dataMap.dataTI['2005']},
                    {data: [
                        {name: '第一产业', value: dataMap.dataPI['2005sum']},
                        {name: '第二产业', value: dataMap.dataSI['2005sum']},
                        {name: '第三产业', value: dataMap.dataTI['2005sum']}
                    ], id: 'pie0'}
                ]
            },
            {
                title : {text: '2006全国宏观经济指标'},
                series : [
                    {data: dataMap.dataGDP['2006']},
                    {data: dataMap.dataFinancial['2006']},
                    {data: dataMap.dataEstate['2006']},
                    {data: dataMap.dataPI['2006']},
                    {data: dataMap.dataSI['2006']},
                    {data: dataMap.dataTI['2006']},
                    {data: [
                        {name: '第一产业', value: dataMap.dataPI['2006sum']},
                        {name: '第二产业', value: dataMap.dataSI['2006sum']},
                        {name: '第三产业', value: dataMap.dataTI['2006sum']}
                    ], id: 'pie0'}
                ]
            },
            {
                title : {text: '2007全国宏观经济指标'},
                series : [
                    {data: dataMap.dataGDP['2007']},
                    {data: dataMap.dataFinancial['2007']},
                    {data: dataMap.dataEstate['2007']},
                    {data: dataMap.dataPI['2007']},
                    {data: dataMap.dataSI['2007']},
                    {data: dataMap.dataTI['2007']},
                    {data: [
                        {name: '第一产业', value: dataMap.dataPI['2007sum']},
                        {name: '第二产业', value: dataMap.dataSI['2007sum']},
                        {name: '第三产业', value: dataMap.dataTI['2007sum']}
                    ], id: 'pie0'}
                ]
            },
            {
                title : {text: '2008全国宏观经济指标'},
                series : [
                    {data: dataMap.dataGDP['2008']},
                    {data: dataMap.dataFinancial['2008']},
                    {data: dataMap.dataEstate['2008']},
                    {data: dataMap.dataPI['2008']},
                    {data: dataMap.dataSI['2008']},
                    {data: dataMap.dataTI['2008']},
                    {data: [
                        {name: '第一产业', value: dataMap.dataPI['2008sum']},
                        {name: '第二产业', value: dataMap.dataSI['2008sum']},
                        {name: '第三产业', value: dataMap.dataTI['2008sum']}
                    ], id: 'pie0'}
                ]
            },
            {
                title : {text: '2009全国宏观经济指标'},
                series : [
                    {data: dataMap.dataGDP['2009']},
                    {data: dataMap.dataFinancial['2009']},
                    {data: dataMap.dataEstate['2009']},
                    {data: dataMap.dataPI['2009']},
                    {data: dataMap.dataSI['2009']},
                    {data: dataMap.dataTI['2009']},
                    {data: [
                        {name: '第一产业', value: dataMap.dataPI['2009sum']},
                        {name: '第二产业', value: dataMap.dataSI['2009sum']},
                        {name: '第三产业', value: dataMap.dataTI['2009sum']}
                    ], id: 'pie0'}
                ]
            },
            {
                title : {text: '2010全国宏观经济指标'},
                series : [
                    {data: dataMap.dataGDP['2010']},
                    {data: dataMap.dataFinancial['2010']},
                    {data: dataMap.dataEstate['2010']},
                    {data: dataMap.dataPI['2010']},
                    {data: dataMap.dataSI['2010']},
                    {data: dataMap.dataTI['2010']},
                    {data: [
                        {name: '第一产业', value: dataMap.dataPI['2010sum']},
                        {name: '第二产业', value: dataMap.dataSI['2010sum']},
                        {name: '第三产业', value: dataMap.dataTI['2010sum']}
                    ], id: 'pie0'}
                ]
            },
            {
                title : {text: '2011全国宏观经济指标'},
                series : [
                    {data: dataMap.dataGDP['2011']},
                    {data: dataMap.dataFinancial['2011']},
                    {data: dataMap.dataEstate['2011']},
                    {data: dataMap.dataPI['2011']},
                    {data: dataMap.dataSI['2011']},
                    {data: dataMap.dataTI['2011']},
                    {data: [
                        {name: '第一产业', value: dataMap.dataPI['2011sum']},
                        {name: '第二产业', value: dataMap.dataSI['2011sum']},
                        {name: '第三产业', value: dataMap.dataTI['2011sum']}
                    ], id: 'pie0'}
                ]
            }
        ]
    };

                chart.setOption(option);

                chart.on('legendSelected', function () {
                });

                window.onresize = chart.resize;
            });
        </script>


        <script type="text/javascript">
            function runCode(id) {
                var textarea = document.getElementById(id);
                var code = textarea.value;
                (new Function('chart', 'echarts', code))(chart, echarts);
            }
        </script>

    </body>
</html>