清末東北大鼠疫傳播時間軸ECharts Gallery

20:11:45图表已生成
代码
var uploadedDataURL = "/asset/get/s/data-1595310733356-zWz9nD4KS.json";

var years = [
    "1910 春至夏",
    "1910-10-25",
    "1910-11-8",
    "1910-12-15",
    "1911-1-2",
    "1911-1-3",
    "1911-1-12",
    "1911-1-14",
    "1911-1-15",
    "1911-1-16",
    "1911-1-28",
    "1911-2-15"
];

var value = [
    [{
        name: '斯列坚斯克',
        coord: [117.75323771749034, 52.117187386680726]
    }, {
        name: '尼古拉耶夫斯克',
        coord: [140.21176808618142, 53.20894417837736]
    }],
    [{
        name: '斯列坚斯克',
        coord: [117.75323771749034, 52.117187386680726]
    }, {
        name: '尼古拉耶夫斯克',
        coord: [140.21176808618142, 53.20894417837736]
    }, {
        name: '满洲里',
        coord: [117.47791686819967, 49.33200166773428]
    }],
    [{
        name: '斯列坚斯克',
        coord: [117.75323771749034, 52.117187386680726]
    }, {
        name: '尼古拉耶夫斯克',
        coord: [140.21176808618142, 53.20894417837736]
    }, {
        name: '满洲里',
        coord: [117.47791686819967, 49.33200166773428]
    }, {
        name: '滨江厅(哈尔滨)',
        coord: [126.77132267833613, 45.734784033936606]
    }],
    [{
        name: '斯列坚斯克',
        coord: [117.75323771749034, 52.117187386680726]
    }, {
        name: '尼古拉耶夫斯克',
        coord: [140.21176808618142, 53.20894417837736]
    }, {
        name: '满洲里',
        coord: [117.47791686819967, 49.33200166773428]
    }, {
        name: '滨江厅(哈尔滨)',
        coord: [126.77132267833613, 45.734784033936606]
    }, {
        name: '呼兰府',
        coord: [126.92359763708443, 46.078443381997864]
    }, {
        name: '龙江府(齐齐哈尔)',
        coord: [123.96383945179605, 47.34499679108636]
    }],
    [{
        name: '斯列坚斯克',
        coord: [117.75323771749034, 52.117187386680726]
    }, {
        name: '尼古拉耶夫斯克',
        coord: [140.21176808618142, 53.20894417837736]
    }, {
        name: '满洲里',
        coord: [117.47791686819967, 49.33200166773428]
    }, {
        name: '滨江厅(哈尔滨)',
        coord: [126.77132267833613, 45.734784033936606]
    }, {
        name: '呼兰府',
        coord: [126.92359763708443, 46.078443381997864]
    }, {
        name: '龙江府(齐齐哈尔)',
        coord: [123.96383945179605, 47.34499679108636]
    }, {
        name: '奉天府(沈阳)',
        coord: [123.41988183910792, 41.788249856620425]
    }, {
        name: '双城府',
        coord: [126.41157992744763, 45.33714197792002]
    }],
    [{
        name: '斯列坚斯克',
        coord: [117.75323771749034, 52.117187386680726]
    }, {
        name: '尼古拉耶夫斯克',
        coord: [140.21176808618142, 53.20894417837736]
    }, {
        name: '满洲里',
        coord: [117.47791686819967, 49.33200166773428]
    }, {
        name: '滨江厅(哈尔滨)',
        coord: [126.77132267833613, 45.734784033936606]
    }, {
        name: '呼兰府',
        coord: [126.92359763708443, 46.078443381997864]
    }, {
        name: '龙江府(齐齐哈尔)',
        coord: [123.96383945179605, 47.34499679108636]
    }, {
        name: '奉天府(沈阳)',
        coord: [123.41988183910792, 41.788249856620425]
    }, {
        name: '双城府',
        coord: [126.41157992744763, 45.33714197792002]
    }, {
        name: '长春府',
        coord: [125.34529188719735, 43.965515263542216]
    }],
    [{
        name: '斯列坚斯克',
        coord: [117.75323771749034, 52.117187386680726]
    }, {
        name: '尼古拉耶夫斯克',
        coord: [140.21176808618142, 53.20894417837736]
    }, {
        name: '满洲里',
        coord: [117.47791686819967, 49.33200166773428]
    }, {
        name: '滨江厅(哈尔滨)',
        coord: [126.77132267833613, 45.734784033936606]
    }, {
        name: '呼兰府',
        coord: [126.92359763708443, 46.078443381997864]
    }, {
        name: '龙江府(齐齐哈尔)',
        coord: [123.96383945179605, 47.34499679108636]
    }, {
        name: '奉天府(沈阳)',
        coord: [123.41988183910792, 41.788249856620425]
    }, {
        name: '双城府',
        coord: [126.41157992744763, 45.33714197792002]
    }, {
        name: '长春府',
        coord: [125.34529188719735, 43.965515263542216]
    }, {
        name: '北京',
        coord: [116.36800399991237, 39.931426998417315]
    }],
    [{
        name: '斯列坚斯克',
        coord: [117.75323771749034, 52.117187386680726]
    }, {
        name: '尼古拉耶夫斯克',
        coord: [140.21176808618142, 53.20894417837736]
    }, {
        name: '满洲里',
        coord: [117.47791686819967, 49.33200166773428]
    }, {
        name: '滨江厅(哈尔滨)',
        coord: [126.77132267833613, 45.734784033936606]
    }, {
        name: '呼兰府',
        coord: [126.92359763708443, 46.078443381997864]
    }, {
        name: '龙江府(齐齐哈尔)',
        coord: [123.96383945179605, 47.34499679108636]
    }, {
        name: '奉天府(沈阳)',
        coord: [123.41988183910792, 41.788249856620425]
    }, {
        name: '双城府',
        coord: [126.41157992744763, 45.33714197792002]
    }, {
        name: '长春府',
        coord: [125.34529188719735, 43.965515263542216]
    }, {
        name: '北京',
        coord: [116.36800399991237, 39.931426998417315]
    }, {
        name: '新民府',
        coord: [122.77465337067382, 42.20786431897316]
    }],
    [{
        name: '斯列坚斯克',
        coord: [117.75323771749034, 52.117187386680726]
    }, {
        name: '尼古拉耶夫斯克',
        coord: [140.21176808618142, 53.20894417837736]
    }, {
        name: '满洲里',
        coord: [117.47791686819967, 49.33200166773428]
    }, {
        name: '滨江厅(哈尔滨)',
        coord: [126.77132267833613, 45.734784033936606]
    }, {
        name: '呼兰府',
        coord: [126.92359763708443, 46.078443381997864]
    }, {
        name: '龙江府(齐齐哈尔)',
        coord: [123.96383945179605, 47.34499679108636]
    }, {
        name: '奉天府(沈阳)',
        coord: [123.41988183910792, 41.788249856620425]
    }, {
        name: '双城府',
        coord: [126.41157992744763, 45.33714197792002]
    }, {
        name: '长春府',
        coord: [125.34529188719735, 43.965515263542216]
    }, {
        name: '北京',
        coord: [116.36800399991237, 39.931426998417315]
    }, {
        name: '新民府',
        coord: [122.77465337067382, 42.20786431897316]
    }, {
        name: '永平府',
        coord: [118.86627423082398, 40.00090904265058]
    }, {
        name: '天津府',
        coord: [117.20732640534169, 39.22808205722813]
    }, {
        name: '烟台',
        coord: [121.25247534340129, 37.569843605300456]
    }],
    [{
        name: '斯列坚斯克',
        coord: [117.75323771749034, 52.117187386680726]
    }, {
        name: '尼古拉耶夫斯克',
        coord: [140.21176808618142, 53.20894417837736]
    }, {
        name: '满洲里',
        coord: [117.47791686819967, 49.33200166773428]
    }, {
        name: '滨江厅(哈尔滨)',
        coord: [126.77132267833613, 45.734784033936606]
    }, {
        name: '呼兰府',
        coord: [126.92359763708443, 46.078443381997864]
    }, {
        name: '龙江府(齐齐哈尔)',
        coord: [123.96383945179605, 47.34499679108636]
    }, {
        name: '奉天府(沈阳)',
        coord: [123.41988183910792, 41.788249856620425]
    }, {
        name: '双城府',
        coord: [126.41157992744763, 45.33714197792002]
    }, {
        name: '长春府',
        coord: [125.34529188719735, 43.965515263542216]
    }, {
        name: '北京',
        coord: [116.36800399991237, 39.931426998417315]
    }, {
        name: '新民府',
        coord: [122.77465337067382, 42.20786431897316]
    }, {
        name: '永平府',
        coord: [118.86627423082398, 40.00090904265058]
    }, {
        name: '天津府',
        coord: [117.20732640534169, 39.22808205722813]
    }, {
        name: '烟台',
        coord: [121.25247534340129, 37.569843605300456]
    }, {
        name: '吉林府',
        coord: [126.5660489534384, 43.907749215090774]
    }],
    [{
        name: '斯列坚斯克',
        coord: [117.75323771749034, 52.117187386680726]
    }, {
        name: '尼古拉耶夫斯克',
        coord: [140.21176808618142, 53.20894417837736]
    }, {
        name: '满洲里',
        coord: [117.47791686819967, 49.33200166773428]
    }, {
        name: '滨江厅(哈尔滨)',
        coord: [126.77132267833613, 45.734784033936606]
    }, {
        name: '呼兰府',
        coord: [126.92359763708443, 46.078443381997864]
    }, {
        name: '龙江府(齐齐哈尔)',
        coord: [123.96383945179605, 47.34499679108636]
    }, {
        name: '奉天府(沈阳)',
        coord: [123.41988183910792, 41.788249856620425]
    }, {
        name: '双城府',
        coord: [126.41157992744763, 45.33714197792002]
    }, {
        name: '长春府',
        coord: [125.34529188719735, 43.965515263542216]
    }, {
        name: '北京',
        coord: [116.36800399991237, 39.931426998417315]
    }, {
        name: '新民府',
        coord: [122.77465337067382, 42.20786431897316]
    }, {
        name: '永平府',
        coord: [118.86627423082398, 40.00090904265058]
    }, {
        name: '天津府',
        coord: [117.20732640534169, 39.22808205722813]
    }, {
        name: '烟台',
        coord: [121.25247534340129, 37.569843605300456]
    }, {
        name: '吉林府',
        coord: [126.5660489534384, 43.907749215090774]
    }, {
        name: '锦州府',
        coord: [121.10239491322307, 41.267947437338464]
    }],
    [{
        name: '斯列坚斯克',
        coord: [117.75323771749034, 52.117187386680726]
    }, {
        name: '尼古拉耶夫斯克',
        coord: [140.21176808618142, 53.20894417837736]
    }, {
        name: '满洲里',
        coord: [117.47791686819967, 49.33200166773428]
    }, {
        name: '滨江厅(哈尔滨)',
        coord: [126.77132267833613, 45.734784033936606]
    }, {
        name: '呼兰府',
        coord: [126.92359763708443, 46.078443381997864]
    }, {
        name: '龙江府(齐齐哈尔)',
        coord: [123.96383945179605, 47.34499679108636]
    }, {
        name: '奉天府(沈阳)',
        coord: [123.41988183910792, 41.788249856620425]
    }, {
        name: '双城府',
        coord: [126.41157992744763, 45.33714197792002]
    }, {
        name: '长春府',
        coord: [125.34529188719735, 43.965515263542216]
    }, {
        name: '北京',
        coord: [116.36800399991237, 39.931426998417315]
    }, {
        name: '新民府',
        coord: [122.77465337067382, 42.20786431897316]
    }, {
        name: '永平府',
        coord: [118.86627423082398, 40.00090904265058]
    }, {
        name: '天津府',
        coord: [117.20732640534169, 39.22808205722813]
    }, {
        name: '烟台',
        coord: [121.25247534340129, 37.569843605300456]
    }, {
        name: '吉林府',
        coord: [126.5660489534384, 43.907749215090774]
    }, {
        name: '锦州府',
        coord: [121.10239491322307, 41.267947437338464]
    }, {
        name: '济南府',
        coord: [117.00148800017651, 36.65013099754471]
    }]
];

var name = [
    "斯列坚斯克、尼古拉耶夫斯克",
    "满洲里",
    "滨江厅(哈尔滨)",
    "呼兰府、龙江府(齐齐哈尔)",
    "双城府、奉天府(沈阳)",
    "长春府",
    "北京",
    "新民府",
    "永平府、天津府、烟台",
    "吉林府",
    "锦州府",
    "济南府"
];

$.getJSON(uploadedDataURL, function(geoJson) {
    $('body').css({

        'position': 'fixed',
        'top': 0,
        'left': 0,
        'width': '100%',
        'height': '100%',
        'background-size': 'cover',
        '-webkit-background-size': 'cover',
        '-o-background-size': 'cover',
        'background-position': 'center 0',
    });

    echarts.registerMap('china', geoJson);

    var convertData = function(data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
                res.push({
                    name: data[i].name,
                    value: geoCoord.concat(data[i].value)
                });
            }
        }
        return res;
    };

    option = {
        baseOption: {
            timeline: {
                axisType: 'category',
                orient: 'vertical',
                autoPlay: true,
                inverse: true,
                playInterval: 1000,
                left: null,
                right: 15,
                top: 15,
                bottom:15,
                width: 160,
                height: null,
                label: {
                    normal: {
                        interval:0,
                        textStyle: {
                            fontSize: 20,
                            fontWeight: 'bolder',
                            color: 'rgba(255,255,255)'
                        }
                    },
                    emphasis: {
                        textStyle: {
                            fontSize: 25,
                            fontWeight: 'bolder',
                            color: 'rgba(255,255,255)'
                        }
                    }
                },
                symbol: 'none',
                lineStyle: {
                    color: '#555'
                },
                checkpointStyle: {
                    color: '#e4f9ff',
                    borderColor: '#777',
                    borderWidth: 3
                },
                controlStyle: {
                    showNextBtn: true,
                    showPrevBtn: true,
                    normal: {
                        color: '#666',
                        borderColor: '#666'
                    },
                    emphasis: {
                        color: '#aaa',
                        borderColor: '#aaa'
                    }
                },
                data: years
            },
            title: [{
                    text: '',
                    subtext: '',
                    //textAlign: 'center',
                    left: '70%',
                    bottom: 53,
                    textStyle: {
                        fontSize: 38,
                        color: 'rgba(255,255,255)',
                    },
                },
                {
                    text: '',
                    //textAlign: 'center',
                    left: '68%',
                    bottom: 15,
                    textStyle: {
                        fontSize: 20,
                        color: 'rgba(255,255,255)'
                    },

                }
            ],

            backgroundColor: '#363636',

            geo: {
                left:'8%',
                top :'62%',
                show: true,
                map: 'china',
                zoom: 2.5,
                roam: true,
                label: {
                    normal: {
                        show: true,
                    },
                    emphasis: {
                        show: true,
                    }
                },

                itemStyle: {
                    normal: {
                        areaColor: '#C9E6FF',
                        borderColor: '#fff',
                        borderWidth: 2,
                        shadowColor: '#5AB2FE',
                        shadowBlur: 20
                    },
                    emphasis: {
                        areaColor: '#C9E6FF',
                        shadowColor: '#5AB2FE',
                        shadowBlur: 20
                    }
                }
            },


            series: [{
                name: 'light',
                type: 'scatter',
                coordinateSystem: 'geo',
                //data: convertData(data),
                //name: '中国',
                //type: 'map',
                //mapType: 'china',
                //selectedMode: 'multiple',
                label: {
                    normal: {
                        show: true
                    },
                    emphasis: {
                        show: true
                    }
                },

                markPoint: {
                    symbol: 'pin',
                    symbolSize: 25,
                    label: {
                        normal: {
                            position: 'left',
                            show: true,
                            //color: '#cf7500',
                            fontSize: 17,
                            fontWeight: 'bolder',

                            formatter: function(d) {
                                return d.name
                            }
                        }
                    },

                    effect: {
                        show: true
                    },

                }
            }],

            animation: true,
            animationDuration: 1000,
            animationEasing: 'cubicInOut',
            animationDurationUpdate: 1000,
            animationEasingUpdate: 'cubicInOut',

            //animationDurationUpdate: 1000,
            //animationEasingUpdate: 'quinticInOut'
        },
        options: []
    };

    for (var n = 0; n < years.length; n++) {
        option.options.push({
            title: [{
                    text: years[n]
                },
                {
                    text: name[n] + " 出现肺鼠疫病例"
                },

            ],
            series: {
                markPoint: {
                    data: value[n]
                }
            }
        });
        console.log(data[n + 1])
    }

    myChart.setOption(option);
});
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
