中国2016年年龄结构echarts 柱状配置项内容和展示
样本以1‰左右的抽样比从总体中抽选
配置项如下
//------------------------------------引用请注明出处
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,
}
]
});
}
截图如下
