document.addEventListener('DOMContentLoaded', function () {
    var myChart = echarts.init(document.getElementById('c2'));
    myChart.showLoading();
    $.when(
            $.get('https://fastly.jsdelivr.net/npm/echarts/map/json/china.json'),
            $.getScript('https://fastly.jsdelivr.net/npm/d3-array'),
            $.getScript('https://fastly.jsdelivr.net/npm/d3-geo')
        ).done(function (res) {
            const chinaJson = res[0];
            const projection = d3.geoMercator();
            myChart.hideLoading();
            echarts.registerMap('China', chinaJson);
            option = {
                color: 'white',
                title: {
                    text: '中国各省得奖情况',
                    sublink: 'http://www.census.gov/popest/data/datasets.html',
                    left: 'center',
                    top:'top',
                    textStyle:{
                        color:'#FFFFFF',
                    }
                },
                tooltip: {
                    trigger: 'item',
                    showDelay: 0,
                    transitionDuration: 0.2
                },
                visualMap: {
                    left: 'right',
                    min: 0,
                    max: 18,
                    inRange: {
                        color: [
                            '#313695',
                            '#4575b4',
                            '#74add1',
                            '#abd9e9',
                            '#e0f3f8',
                            '#ffffbf',
                            '#fee090',
                            '#fdae61',
                            '#f46d43',
                            '#d73027',
                            '#a50026'
                        ]
                    },
                    text: ['高', '低'],
                    calculable: true,
                    show:false,
                },
                toolbox: {
                    show: false,
                    left: 'left',
                    top: 'top',
                    feature: {
                        dataView: {readOnly: false},
                        restore: {},
                        saveAsImage: {}
                    }
                },
                series: [
                    {
                        name: '奖牌数',
                        type: 'map',
                        map: 'China',
                        projection: {
                            project: function (point) {
                                return projection(point);
                            },
                            unproject: function (point) {
                                return projection.invert(point);
                            }
                        },
                        emphasis: {
                            label: {
                                show: true
                            }
                        },
                        data: [
                            { name: '北京', value: 5 },
                            { name: '天津', value: 3 },
                            { name: '上海', value: 9 },
                            { name: '重庆', value: 2 },
                            { name: '河北', value: 5 },
                            { name: '河南', value: 3 },
                            { name: '云南', value: 2 },
                            { name: '辽宁', value: 7 },
                            { name: '黑龙江', value: 1 },
                            { name: '湖南', value: 15 },
                            { name: '安徽', value: 1 },
                            { name: '山东', value: 16 },
                            { name: '新疆', value: 1 },
                            { name: '江苏', value: 17 },
                            { name: '浙江', value: 18 },
                            { name: '江西', value: 3 },
                            { name: '湖北', value: 6 },
                            { name: '广西', value: 2 },
                            { name: '甘肃', value: 0 },
                            { name: '山西', value: 0 },
                            { name: '内蒙古', value: 2 },
                            { name: '陕西', value: 0 },
                            { name: '吉林', value: 4 },
                            { name: '福建', value: 4 },
                            { name: '贵州', value: 3 },
                            { name: '广东', value: 16 },
                            { name: '青海', value: 0 },
                            { name: '西藏', value: 0 },
                            { name: '四川', value: 18 },
                            { name: '宁夏', value: 0 },
                            { name: '海南', value: 2 },
                            { name: '台湾', value: 7 },
                            { name: '香港', value: 4 },
                            { name: '澳门', value: 0 },
                            ]
                    }
                ]
            };
            myChart.setOption(option);
        });
});