// 播放
var dot8543E0 =
'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABYUlEQVQ4T42TfXXCQBDEZxwgIShoHDR7BooEJMRBQQHUAQ5KDbDUAVXQSMDB9k16xzvyKPT+guzb337MLDF57t4CeAHQRcRcYZLfAI4APszsVKew/uPufUQsSa6UYGZnxd19loE9yXczeyt5F4C77wGczEzJfz53V7w1s8XYXa7QA5g9Si7UDDmb2ZaaOSJ2KSXNPj53F117WJvZcKudw+FwJNkLoJbUukYoAH2bRUSXZ17fWLaKtMykZV0pQ7XEo35HxEKLnRRp1LkAQ0qpmahRVJB0GklxgRqSl2LK/RcgQ5YRscqAEVwAWsa9EToAGwCf6qLyxu8Id5ao7T/LjdMClVJtkXGbUlKlooIcKdf19eKquBTaC1wbqTEzGerhc/ctgGE0UkWVD3Q0Ms94Aze01028AphfWXnSugyyIflVvCEZI+JJcJI7VS45V9eYlyNLL+RCAMUfA0lJp+Qra/8Av9T2fUP5hw0AAAAASUVORK5CYII=';
// 暂停
var dotffa897 =
'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABAElEQVQ4T62T0VHDQAxEVx2kBDrAJbCuIHQQKohLSAeYDkwFUIFFCaECUgIdbEYenecgiYch8df5TvsknfYMV372W+/uKwBbAGsATZ7vAbwDeCH5XWt+ANx9A+AZwCuAgWQI4e4B6iStzawjORTIDAixpN7MHorwTHWNpI8aMgGy7C8AvCQusKgmIXfRTgHsAKxIdlVglNpngnmd/9HCgeRuAozjuDezTZ3d3UWyJJjX5U4kDW3bNmcDMugioD6/DeAWLVx3iTFGSYclDyyOMS/lT0YK2wB4IhnWxomV041v6fvayltJjznuSXwCqFxZfH8fe5I+zSxE/eJj+s/LPgJF2tcRaVQF3AAAAABJRU5ErkJggg==';
// 每屏展示数据条数，从0开始
var zoomLength =80;
var iconImg = dotffa897;
var temp = null;
function initEchartIcon() {
if (temp) {
clearInterval(temp);
}
iconImg = iconImg == dotffa897 ? dot8543E0 : dotffa897;
}
option = {
backgroundColor:"#232323",
graphic: [
{
type: 'group',
left: '4%',
bottom: 1,
children: [
{
type: 'rect',
z: 100,
left: 'left',
top: 'middle',
shape: {
width: 20,
height: 10
},
style: {
fill: '#232323',
stroke: '#232323',
lineWidth: 1,
shadowBlur: 8,
shadowOffsetX: 3,
shadowOffsetY: 3,
shadowColor: 'rgba(0,0,0,0.3)'
}
},
{
type: 'text',
z: 100,
left: 'left',
top: 'middle',
style: {
fill: '#e4bfad',
text: [
'数据来源：国家统计局，公开资料整理，刘卓、王学义:《生育变迁：1949～2019年中国生育影响因素研究》'
].join('\n'),
font: '12px Microsoft YaHei'
}
}
]
}
],
title: {
text: '中国历年新生人口及相关事件（1949——2021）',
textStyle: {
color: '#e4bfad',
fontfamily: "sans-serif",
fontSize: 26
},
// subtext: '数据来源：中国统计年鉴等',
subtextStyle: {
color:'#e4bfad',
fontSize: 12,
fontWeight: 'normal'},
},
tooltip: {
trigger: 'axis',
},
toolbox: {
right: 30,
itemGap: 15,
feature: {
myTool1: {
show: false,
title: iconImg === dotffa897 ? '暂停' : '播放',
icon: iconImg,
onclick() {
initEchartIcon();
},
},
},
},
dataZoom: [
{
type: 'inside',
startValue: 0,
endValue: zoomLength, // 每屏展示数据条数，从0开始
},
{
type: 'slider',
show:false,
startValue: 0,
endValue: zoomLength,
},
],
xAxis: {
// name: '年份',
nameTextStyle:{
color:"#e4bfad",
fontSize:12,
},
axisLabel: {
textStyle: {
color: '#e4bfad',//坐标值得具体的颜色
}
},
data: [
"1949", "1950", "1951", "1952", "1953", "1954", "1955", "1956", "1957", "1958", "1959", "1960", "1961", "1962", "1963", "1964", "1965", "1966", "1967", "1968", "1969", "1970", "1971", "1972", "1973", "1974", "1975", "1976", "1977", "1978", "1979", "1980", "1981", "1982", "1983", "1984", "1985", "1986", "1987", "1988", "1989", "1990", "1991", "1992", "1993", "1994", "1995", "1996", "1997", "1998", "1999", "2000", "2001", "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017", "2018", "2019", "2020","2021"],
},
yAxis: {
name: '单位:万',
nameTextStyle:{
color:"#e4bfad",
fontSize:12,
// padding:'20,15,0,0',
},
splitLine:{show: true},//去除网格线
axisLabel: {
textStyle: {
color: '#e4bfad',//坐标值得具体的颜色
}
},
splitLine: {
show: false,
},
},
grid: {
left: '4%',
right: '4%',
bottom: '10%',
top:'15%',
containLabel: true
},
series: [
{
name: '新生人口（万）：',
type: 'bar',
barWidth : 5,
color: '#7ea4df',
data: [1275, 1419, 1349, 1622, 1637, 2232,
{
value: 1965,
itemStyle: {
color: '#8b4044'
},
}
, {
value: 1961,
itemStyle: {
color: ' #8b4044'
},
}, 2138, 1889,
{
value: 1635,
itemStyle: {
color: ' #df9446'
},
}
, {
value: 1402,
itemStyle: {
color: ' #df9446'
},
}, {
value: 949,
itemStyle: {
color: ' #df9446'
},
}, 2451, {
value: 2934,
itemStyle: {
color: ' #8b4044'
},
}, 2721, 2679, 2554, 2543, 2731, 2690, 2710, {
value: 2551,
itemStyle: {
color: '#8b4044'
},
}, 2550, 2447, 2226, 2102, 1849, 1783, {
value: 1733,
itemStyle: {
color: '#df9446'
},
}, 1715, 1776, {
value: 2064,
itemStyle: {
color: '#8b4044'
},
}, {
value: 2230,
itemStyle: {
color: ' #8b4044'
},
}, 2052, 2050, 2196, 2374, 2508, 2445, 2396, 2374, 2250, 2113, 2120, 2098, 2052, 2057, 2028, {
value: 1934,
itemStyle: {
color: '#df9446'
},
}, 1827, 1765, 1696, {
value: 1641,
itemStyle: {
color: ' #df9446'
},
}, {
value: 1594,
itemStyle: {
color: ' #df9446'
},
}, 1588, 1612, 1581, 1591, 1604, 1587, 1588, {
value: 1600,
itemStyle: {
color: '#8b4044'
},
}, 1635, {
value: 1640,
itemStyle: {
color: '#8b4044'
},
}, 1687, 1655, {
value: 1786,
itemStyle: {
color: '#8b4044'
},
}, 1723, 1523, 1465, 1200,{
value: 1062,
itemStyle: {
color: '#df9446'
},}],
},
{
name: '相关事件：',
type: 'bar',
color: ' #fff',
data: [, , , , , , '二战结束后，世界范围内婴儿潮，中国第一波婴儿潮', '党的八大提出“赞成在生育方面加以适当的节制”', , , '三年自然灾害', '三年自然灾害', '三年自然灾害', , '三年自然灾害结束，中国第二波婴儿潮', , , , ,, , , '1971年中国开始实行计划生育政策', , , , , , , '计划生育第一次以法律形式载入宪法', , , '1980年中国开始实行独生子女政策', '中国第三波婴儿潮；计划生育被定为基本国策', , , , , , , , , , , , , , , , '金融危机', , , , '2002实施《人口与计划生育法》', '2003年开始，中国每年人口出生数开始基本稳定', , , , , , , , '80后一代进入结婚生育期，高成本导致多数人生一个或者晚生；2011年11月，中国各地全面实施双独二孩政策', , '2013年11月，《中共中央关于全面深化改革若干重大问题的决定》提出“启动实施一方是独生子女的夫妇可生育两个孩子的政策”', , , '2016年1月1日我国正式施行“全面二孩政策”，原计划会有第四波婴儿潮，翟振武砖家就预测二胎放开会有4995万', , , , ,"2021年7月20日国家公布，为进一步优化生育政策，实施一对夫妻可以生育三个子女政策及配套支持措施",],
},
],
};
var currentIndex = -1;
var e = zoomLength; // 结束
var s = 0; // 开始
temp = setInterval(function () {
var dataLen0 = option.series[0].data.length;
var seriesCurrentIndex = 0;
for (let index = 0; index < option.series.length; index++) {
const element = option.series[index].data;
if (element[currentIndex + 1]) {
seriesCurrentIndex = index;
break;
}
}
// 取消之前高亮的图形
myChart.dispatchAction({
type: 'downplay',
seriesIndex: seriesCurrentIndex,
dataIndex: currentIndex,
});
var highlightIndex0 = (currentIndex + 1) % dataLen0;
currentIndex = highlightIndex0;
if (highlightIndex0 <= zoomLength || e > dataLen0) {
e = zoomLength;
s = 0;
} else {
e += 1;
s += 1;
}
myChart.dispatchAction({
type: 'dataZoom',
startValue: s,
endValue: e,
});
// 高亮当前图形
myChart.dispatchAction({
type: 'highlight',
seriesIndex: seriesCurrentIndex,
dataIndex: currentIndex,
});
// 显示 tooltip
myChart.dispatchAction({
type: 'showTip',
seriesIndex: seriesCurrentIndex,
dataIndex: currentIndex,
});
}, 2000);