xmnk
/
wkshi


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
							<!DOCTYPE html>
<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>
            .test-title {
                background: #146402;
                color: #fff;
            }
        </style>


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


        <script>

            var chart;

            require([
                'echarts'/*, 'map/js/china' */
            ], function (echarts) {


                var provinces = ['shanghai', 'hebei','shanxi','neimenggu','liaoning','jilin','heilongjiang','jiangsu','zhejiang','anhui','fujian','jiangxi','shandong','henan','hubei','hunan','guangdong','guangxi','hainan','sichuan','guizhou','yunnan','xizang','shanxi1','gansu','qinghai','ningxia','xinjiang', 'beijing', 'tianjin', 'chongqing', 'xianggang', 'aomen'];
                var provincesText = ['上海', '河北', '山西', '内蒙古', '辽宁', '吉林','黑龙江',  '江苏', '浙江', '安徽', '福建', '江西', '山东','河南', '湖北', '湖南', '广东', '广西', '海南', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆', '北京', '天津', '重庆', '香港', '澳门'];

                function showProvince() {
                    var name = provinces[currentIdx];

                    // myChart.showLoading();

                    $.get('../map/json/province/' + name + '.json', function (geoJson) {

                        // myChart.hideLoading();

                        echarts.registerMap(name, geoJson);

                        chart.setOption({
                            backgroundColor: '#404a59',
                            title: {
                                text: provincesText[currentIdx],
                                left: 'center',
                                textStyle: {
                                    color: '#fff'
                                }
                            },
                            series: [
                                {
                                    type: 'map',
                                    mapType: name,
                                    label: {
                                        emphasis: {
                                            textStyle: {
                                                color: '#fff'
                                            }
                                        }
                                    },
                                    itemStyle: {
                                        normal: {
                                            borderColor: '#389BB7',
                                            areaColor: '#fff',
                                        },
                                        emphasis: {
                                            areaColor: '#389BB7',
                                            borderWidth: 0
                                        }
                                    },
                                    animation: false
                                    // animationDurationUpdate: 1000,
                                    // animationEasingUpdate: 'quinticInOut'
                                }
                            ]
                        });

                    });
                }

                var currentIdx = 0;

                var option = {
                    graphic: [{
                        id: 'left-btn',
                        type: 'circle',
                        shape: { r: 20 },
                        style: {
                            text: '<',
                            fill: '#eee'
                        },
                        left: 10,
                        top: 'middle',
                        onclick: function () {
                            currentIdx -= 1;
                            if (currentIdx < 0) {
                                currentIdx += provinces.length;
                            }
                            showProvince();
                        }
                    }, {
                        id: 'right-btn',
                        type: 'circle',
                        shape: { r: 20 },
                        style: {
                            text: '>',
                            fill: '#eee'
                        },
                        top: 'middle',
                        right: 10,
                        onclick: function () {
                            currentIdx = (currentIdx + 1) % provinces.length;
                            showProvince();
                        }
                    }],

                    series: []
                };

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

                showProvince();


            });

        </script>
    </body>
</html>