中国2016年年龄结构ECharts Gallery

20:11:45图表已生成
代码
//------------------------------------引用请注明出处

var age_gap = ['0-4岁', '5-9岁', '10-14岁', '15-19岁', '20-24岁', '25-29岁', '30-34岁', '35-39岁', '40-44岁', '45-49岁', '50-54岁', '55-59岁', '60-64岁', '65-69岁', '70-74岁', '75-79岁', '80-84岁', '85-89岁', '90-94岁', '95+岁'];

var data_age = [{"year":"2000","age_data":{"male":[3.03,3.888,5.259,4.256,3.858,4.847,5.26,4.518,3.4,3.536,2.64,1.937,1.744,1.412,1.001,0.578,0.258,0.085,0.018,0.005],"female":[2.521,3.368,4.833,4.036,3.753,4.617,4.986,4.266,3.139,3.343,2.455,1.795,1.612,1.387,1.057,0.704,0.381,0.159,0.045,0.011]}},
{"year":"2003","age_data":{"male":[2.738,3.506,4.698,4.363,3.175,3.699,4.908,4.913,3.708,3.788,3.26,2.332,1.852,1.664,1.256,0.717,0.328,0.106,0.026,0.005],"female":[2.258,2.93,4.206,3.944,3.218,3.75,4.889,4.865,3.548,3.694,3.22,2.227,1.799,1.645,1.242,0.815,0.452,0.187,0.056,0.011]}},
{"year":"2004","age_data":{"male":[2.72,3.307,4.383,4.516,3.125,3.474,4.709,4.907,4.035,3.617,3.501,2.511,1.937,1.605,1.284,0.727,0.35,0.108,0.028,0.005],"female":[2.217,2.776,3.898,4.204,3.227,3.588,4.704,4.875,3.993,3.534,3.397,2.419,1.862,1.592,1.312,0.802,0.485,0.19,0.061,0.014]}},
{"year":"2005","age_data":{"male":[2.942,3.397,4.248,4.41,2.943,3.175,4.186,4.787,4.313,3.39,3.666,2.722,2.017,1.685,1.319,0.799,0.389,0.121,0.028,0.005],"female":[2.398,2.847,3.719,4.088,3.16,3.362,4.326,4.936,4.374,3.366,3.616,2.62,1.918,1.636,1.36,0.91,0.53,0.213,0.065,0.015]}},
{"year":"2006","age_data":{"male":[2.777,3.265,4.029,4.652,3.125,3.007,3.842,4.698,4.802,3.207,3.827,2.896,2.092,1.715,1.353,0.826,0.386,0.131,0.031,0.006],"female":[2.3,2.653,3.444,4.154,3.261,3.206,3.989,4.856,4.905,3.207,3.77,2.829,2.007,1.638,1.388,0.904,0.522,0.216,0.064,0.017]}},
{"year":"2007","age_data":{"male":[2.79,3.136,3.814,4.411,3.24,3.133,3.586,4.805,4.85,3.192,3.922,3.111,2.183,1.707,1.378,0.847,0.416,0.148,0.028,0.006],"female":[2.257,2.602,3.275,3.91,3.372,3.324,3.712,4.902,4.896,3.208,3.858,3.049,2.107,1.645,1.418,0.918,0.534,0.225,0.067,0.017]}},
{"year":"2008","age_data":{"male":[2.83,2.996,3.611,4.195,3.394,3.182,3.447,4.584,4.806,3.569,3.928,3.334,2.272,1.682,1.405,0.895,0.441,0.16,0.032,0.007],"female":[2.296,2.468,3.116,3.677,3.469,3.302,3.513,4.69,4.843,3.618,3.875,3.246,2.2,1.643,1.421,0.971,0.551,0.245,0.07,0.016]}},
{"year":"2009","age_data":{"male":[2.845,2.979,3.412,3.791,3.777,3.234,3.333,4.513,4.795,3.918,3.643,3.399,2.433,1.741,1.396,0.944,0.444,0.169,0.031,0.007],"female":[2.319,2.429,2.885,3.377,3.746,3.245,3.425,4.589,4.849,4.01,3.596,3.392,2.347,1.703,1.393,0.99,0.568,0.242,0.07,0.019]}},
{"year":"2011","age_data":{"male":[3.078,2.903,2.943,3.673,4.824,3.927,3.659,4.328,4.786,4.491,2.779,3.162,2.33,1.577,1.257,0.87,0.465,0.162,0.039,0.006],"female":[2.583,2.448,2.512,3.346,4.656,3.867,3.514,4.132,4.592,4.315,2.653,3.096,2.272,1.571,1.26,0.979,0.58,0.257,0.087,0.019]}},
{"year":"2012","age_data":{"male":[3.085,2.957,2.878,3.46,4.627,4.024,3.782,4.048,4.883,4.496,2.806,3.213,2.483,1.665,1.244,0.9,0.483,0.165,0.043,0.006],"female":[2.604,2.495,2.443,3.112,4.42,3.973,3.65,3.87,4.679,4.334,2.7,3.136,2.445,1.676,1.266,0.989,0.597,0.26,0.085,0.019]}},
{"year":"2013","age_data":{"male":[3.064,3.03,2.784,3.235,4.556,4.175,3.754,3.85,4.74,4.46,3.161,3.209,2.613,1.75,1.229,0.899,0.515,0.188,0.05,0.007],"female":[2.612,2.553,2.362,2.909,4.153,4.152,3.638,3.691,4.538,4.314,3.056,3.114,2.595,1.756,1.266,1.001,0.627,0.282,0.09,0.02]}},
{"year":"2014","age_data":{"male":[3.067,3.053,2.812,3.076,4.17,4.429,3.715,3.714,4.632,4.487,3.51,3.004,2.738,1.83,1.292,0.905,0.532,0.2,0.052,0.009],"female":[2.624,2.562,2.372,2.68,3.904,4.362,3.626,3.56,4.436,4.34,3.419,2.902,2.742,1.88,1.299,0.992,0.649,0.299,0.104,0.021]}},
{"year":"2015","age_data":{"male":[3.136,2.996,2.809,2.938,3.797,4.726,3.726,3.609,4.374,4.58,3.84,2.847,2.838,1.994,1.297,0.918,0.524,0.21,0.056,0.009],"female":[2.699,2.516,2.369,2.53,3.499,4.622,3.655,3.465,4.189,4.434,3.742,2.752,2.846,1.996,1.346,1.012,0.664,0.314,0.103,0.023]}},
{"year":"2016","age_data":{"male":[3.169,2.994,2.83,2.867,3.572,4.683,3.806,3.54,4.175,4.594,4.274,2.613,2.92,2.062,1.342,0.928,0.557,0.226,0.054,0.012],"female":[2.741,2.519,2.387,2.449,3.259,4.528,3.757,3.41,4.006,4.441,4.155,2.537,2.926,2.122,1.393,1.011,0.681,0.328,0.11,0.024]}},
{"year":"2017","age_data":{"male":[3.184,2.999,2.875,2.797,3.361,4.493,3.904,3.662,3.906,4.686,4.277,2.641,2.971,2.207,1.379,0.941,0.582,0.241,0.058,0.011],"female":[2.781,2.530,2.427,2.377,3.029,4.300,3.864,3.546,3.753,4.524,4.172,2.583,2.970,2.294,1.467,1.029,0.703,0.336,0.114,0.028]}},
{"year":"2018","age_data":{"male":[3.135,2.995,2.951,2.756,3.152,4.168,4.092,3.627,3.718,4.552,4.275,3.076,2.978,2.357,1.477,0.939,0.564,0.251,0.058,0.011],"female":[2.752,2.537,2.487,2.333,2.793,3.955,4.05,3.527,3.583,4.392,4.186,3.026,2.964,2.431,1.564,1.053,0.733,0.352,0.119,0.029]}}];





option = {
    baseOption: {
        backgroundColor: '#fff',
        timeline: {
            show: true,
            axisType: 'category',
            tooltip: {
                show: true,
                formatter: function(params) {
                    console.log(params);
                    return params.name + '年年龄结构';
                }
            },
            autoPlay: true,
            currentIndex: 6,
            playInterval: 1000,
            label: {
                normal: {
                    show: true,
                    interval: 'auto',
                    formatter: '{value}年',
                },
            },
            data: [],
        },
        title: {
           
            textStyle: {
                color: '#000',
                fontSize: 16,
            },
            subtext: '样本以1‰左右的抽样比从总体中抽选',
        },
        legend: {
            data: ['男性', '女性'],
            top: 4,
            right: '20%',
            textStyle: {
                color: '#000',
            },
        },
        tooltip: {
            show: true,
            trigger: 'axis',
            formatter: '{b}<br/>{a}: {c}%',
            axisPointer: {
                type: 'shadow',
            }
        },

        toolbox: {
            right: 20,
            feature: {
                saveAsImage: {},
                restore: {},
                dataView: {},
                dataZoom: {},
                magicType: {
                    type: ['line', 'bar']
                },
                // brush: {},
            }
        },

        grid: [{
            show: false,
            left: '10%',
            top: 60,
            bottom: 60,
            containLabel: true,
            width: '40%',
        }, {
            show: false,
            left: '5%',
            top: 80,
            bottom: 60,
            width: '0%',
        }, {
            show: false,
            left: '50%',
            top: 60,
            bottom: 60,
            containLabel: true,
            width: '40%',
        } ],

        xAxis: [{
            type: 'value',
            inverse: true,
            max:6,
            min:0,
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            position: 'top',
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#000',
                    fontSize: 12,
                },
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#1F2022',
                    width: 1,
                    type: 'solid',
                },
            },
        }, {
            gridIndex: 1,
            show: false,
            
        }, {
            gridIndex: 2,
            max:6,
            min:0,
            type: 'value',
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            position: 'top',
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#000',
                    fontSize: 12,
                },
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#1F2022',
                    width: 1,
                    type: 'solid',
                },
            },
        } ],
        yAxis: [{
            type: 'category',
            inverse: false,
            position: 'right',
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: false,
                margin: 0,
                textStyle: {
                    color: '#000',
                    fontSize: 12,
                },

            },
            data: age_gap
        }, {
            gridIndex: 1,
            type: 'category',
            inverse: false,
            position: 'left',
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#000',
                    fontSize: 12,
                },

            },
            data: age_gap.map(function(value) {
                return {
                    value: value,
                    textStyle: {
                        align: 'center',
                    }
                }
            }),
        }, {
            gridIndex: 2,
            type: 'category',
            inverse: false,
            position: 'left',
            axisLine: {
                show: true
            },
            axisTick: {
                show: true
            },
            axisLabel: {
                show: false,
                textStyle: {
                    color: '#000',
                    fontSize:12,
                },

            },
            data: age_gap,
        }],
        series: [],

    },

    options: [],


};

for (var i = 0; i < data_age.length; i++) {
    option.baseOption.timeline.data.push(data_age[i].year);


    option.options.push({
        title: {
            text: '中国' + data_age[i].year + '年年龄结构',
            textStyle:{
                
                fontSize:25
            }
        },
        series: [{
                name: '男性',
                type: 'bar',
                barGap: 5,
                barWidth: 30,
                label: {
                    normal: {
                        show: false,
                    },
                    emphasis: {
                        show: true,
                        position: 'left',
                        offset: [0, 0],
                        textStyle: {
                            color: '#000',
                            fontSize: 14,
                        },
                    },
                },
                itemStyle: {
                    normal: {
                        color: '#4B0082',
                    },
                    emphasis: {
                        color: '#08C7AE',
                    },
                },
                data: data_age[i].age_data.male,
            },


            {
                name: '女性',
                type: 'bar',
                barGap: 20,
                barWidth: 30,
                xAxisIndex: 2,
                yAxisIndex: 2,
                label: {
                    normal: {
                        show: false,
                    },
                    emphasis: {
                        show: true,
                        position: 'right',
                        offset: [0, 0],
                        textStyle: {
                            color: '#fff',
                            fontSize: 14,
                        },
                    },
                },
                itemStyle: {
                    normal: {
                        color: '#DC143C',
                    },
                    emphasis: {
                        color: '#08C7AE',
                    },
                },
                data: data_age[i].age_data.female,
            }
        ]
    });
}
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
