2002全国宏观经济指标echarts 柱状配置项内容和展示
人口金字塔，并伴随时间轴而变化
配置项如下
var dataMap = {};
var myData = ['北京', '天津', '河北', '山西', '内蒙古', '辽宁', '吉林', '黑龙江', '上海',
'江苏', '浙江', '安徽', '福建', '江西', '山东', '河南', '湖北', '湖南', '广东', '广西',
'海南', '重庆', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆'
];
function dataFormatter(obj) {
var temp;
for (var year = 2002; year <= 2011; year++) {
var max = 0;
var sum = 0;
temp = obj[year];
for (var i = 0, l = temp.length; i < l; i++) {
max = Math.max(max, temp[i]);
sum += temp[i];
obj[year][i] = {
name: myData[i],
value: temp[i]
}
}
obj[year + 'max'] = Math.floor(max / 100) * 100;
obj[year + 'sum'] = sum;
}
return obj;
}
dataMap.datanan = dataFormatter({
//max : 60000,
2011: [16251.93, 11307.28, 24515.76, 11237.55, 14359.88, 22226.7,
10568.83, 12582, 19195.69, 49110.27, 32318.85, 15300.65,
17560.18, 11702.82, 45361.85, 26931.03, 19632.26, 19669.56,
53210.28, 11720.87, 2522.66, 10011.37, 21026.68, 5701.84,
8893.12, 605.83, 12512.3, 5020.37, 1670.44, 2102.21, 6610.05
],
2010: [14113.58, 9224.46, 20394.26, 9200.86, 11672, 18457.27,
8667.58, 10368.6, 17165.98, 41425.48, 27722.31, 12359.33,
14737.12, 9451.26, 39169.92, 23092.36, 15967.61, 16037.96,
46013.06, 9569.85, 2064.5, 7925.58, 17185.48, 4602.16, 7224.18,
507.46, 10123.48, 4120.75, 1350.43, 1689.65, 5437.47
],
2009: [12153.03, 7521.85, 17235.48, 7358.31, 9740.25, 15212.49,
7278.75, 8587, 15046.45, 34457.3, 22990.35, 10062.82, 12236.53,
7655.18, 33896.65, 19480.46, 12961.1, 13059.69, 39482.56,
7759.16, 1654.21, 6530.01, 14151.28, 3912.68, 6169.75, 441.36,
8169.8, 3387.56, 1081.27, 1353.31, 4277.05
],
2008: [11115, 6719.01, 16011.97, 7315.4, 8496.2, 13668.58, 6426.1,
8314.37, 14069.87, 30981.98, 21462.69, 8851.66, 10823.01,
6971.05, 30933.28, 18018.53, 11328.92, 11555, 36796.71, 7021,
1503.06, 5793.66, 12601.23, 3561.56, 5692.12, 394.85, 7314.58,
3166.82, 1018.62, 1203.92, 4183.21
],
2007: [9846.81, 5252.76, 13607.32, 6024.45, 6423.18, 11164.3,
5284.69, 7104, 12494.01, 26018.48, 18753.73, 7360.92, 9248.53,
5800.25, 25776.91, 15012.46, 9333.4, 9439.6, 31777.01, 5823.41,
1254.17, 4676.13, 10562.39, 2884.11, 4772.52, 341.43, 5757.29,
2703.98, 797.35, 919.11, 3523.16
],
2006: [8117.78, 4462.74, 11467.6, 4878.61, 4944.25, 9304.52, 4275.12,
6211.8, 10572.24, 21742.05, 15718.47, 6112.5, 7583.85, 4820.53,
21900.19, 12362.79, 7617.47, 7688.67, 26587.76, 4746.16,
1065.67, 3907.23, 8690.24, 2338.98, 3988.14, 290.76, 4743.61,
2277.35, 648.5, 725.9, 3045.26
],
2005: [6969.52, 3905.64, 10012.11, 4230.53, 3905.03, 8047.26,
3620.27, 5513.7, 9247.66, 18598.69, 13417.68, 5350.17, 6554.69,
4056.76, 18366.87, 10587.42, 6590.19, 6596.1, 22557.37, 3984.1,
918.75, 3467.72, 7385.1, 2005.42, 3462.73, 248.8, 3933.72,
1933.98, 543.32, 612.61, 2604.19
],
2004: [6033.21, 3110.97, 8477.63, 3571.37, 3041.07, 6672, 3122.01,
4750.6, 8072.83, 15003.6, 11648.7, 4759.3, 5763.35, 3456.7,
15021.84, 8553.79, 5633.24, 5641.94, 18864.62, 3433.5, 819.66,
3034.58, 6379.63, 1677.8, 3081.91, 220.34, 3175.58, 1688.49,
466.1, 537.11, 2209.09
],
2003: [5007.21, 2578.03, 6921.29, 2855.23, 2388.38, 6002.54, 2662.08,
4057.4, 6694.23, 12442.87, 9705.02, 3923.11, 4983.67, 2807.41,
12078.15, 6867.7, 4757.45, 4659.99, 15844.64, 2821.11, 713.96,
2555.72, 5333.09, 1426.34, 2556.02, 185.09, 2587.72, 1399.83,
390.2, 445.36, 1886.35
],
2002: [4315, 2150.76, 6018.28, 2324.8, 1940.94, 5458.22, 2348.54,
3637.2, 5741.03, 10606.85, 8003.67, 3519.72, 4467.55, 2450.48,
10275.5, 6035.48, 4212.82, 4151.54, 13502.42, 2523.73, 642.73,
2232.86, 4725.01, 1243.43, 2312.82, 162.04, 2253.39, 1232.03,
340.65, 377.16, 1612.6
]
});
dataMap.datanv = dataFormatter({
//max : 4000,
2011: [136.27, 159.72, 2905.73, 641.42, 1306.3, 1915.57, 1277.44,
1701.5, 124.94, 3064.78, 1583.04, 2015.31, 1612.24, 1391.07,
3973.85, 3512.24, 2569.3, 2768.03, 2665.2, 2047.23, 659.23,
844.52, 2983.51, 726.22, 1411.01, 74.47, 1220.9, 678.75,
155.08, 184.14, 1139.03
],
2010: [124.36, 145.58, 2562.81, 554.48, 1095.28, 1631.08, 1050.15,
1302.9, 114.15, 2540.1, 1360.56, 1729.02, 1363.67, 1206.98,
3588.28, 3258.09, 2147, 2325.5, 2286.98, 1675.06, 539.83,
685.38, 2482.89, 625.03, 1108.38, 68.72, 988.45, 599.28,
134.92, 159.29, 1078.63
],
2009: [118.29, 128.85, 2207.34, 477.59, 929.6, 1414.9, 980.57,
1154.33, 113.82, 2261.86, 1163.08, 1495.45, 1182.74, 1098.66,
3226.64, 2769.05, 1795.9, 1969.69, 2010.27, 1458.49, 462.19,
606.8, 2240.61, 550.27, 1067.6, 63.88, 789.64, 497.05, 107.4,
127.25, 759.74
],
2008: [112.83, 122.58, 2034.59, 313.58, 907.95, 1302.02, 916.72,
1088.94, 111.8, 2100.11, 1095.96, 1418.09, 1158.17, 1060.38,
3002.65, 2658.78, 1780, 1892.4, 1973.05, 1453.75, 436.04,
575.4, 2216.15, 539.19, 1020.56, 60.62, 753.72, 462.27, 105.57,
118.94, 691.07
],
2007: [101.26, 110.19, 1804.72, 311.97, 762.1, 1133.42, 783.8,
915.38, 101.84, 1816.31, 986.02, 1200.18, 1002.11, 905.77,
2509.14, 2217.66, 1378, 1626.48, 1695.57, 1241.35, 361.07,
482.39, 2032, 446.38, 837.35, 54.89, 592.63, 387.55, 83.41,
97.89, 628.72
],
2006: [88.8, 103.35, 1461.81, 276.77, 634.94, 939.43, 672.76, 750.14,
93.81, 1545.05, 925.1, 1011.03, 865.98, 786.14, 2138.9,
1916.74, 1140.41, 1272.2, 1532.17, 1032.47, 323.48, 386.38,
1595.48, 382.06, 724.4, 50.9, 484.81, 334, 67.55, 79.54, 527.8
],
2005: [88.68, 112.38, 1400, 262.42, 589.56, 882.41, 625.61, 684.6,
90.26, 1461.51, 892.83, 966.5, 827.36, 727.37, 1963.51,
1892.01, 1082.13, 1100.65, 1428.27, 912.5, 300.75, 463.4,
1481.14, 368.94, 661.69, 48.04, 435.77, 308.06, 65.34, 72.07,
509.99
],
2004: [87.36, 105.28, 1370.43, 276.3, 522.8, 798.43, 568.69, 605.79,
83.45, 1367.58, 814.1, 950.5, 786.84, 664.5, 1778.45, 1649.29,
1020.09, 1022.45, 1248.59, 817.88, 278.76, 428.05, 1379.93,
334.5, 607.75, 44.3, 387.88, 286.78, 60.7, 65.33, 461.26
],
2003: [84.11, 89.91, 1064.05, 215.19, 420.1, 615.8, 488.23, 504.8,
81.02, 1162.45, 717.85, 749.4, 692.94, 560, 1480.67, 1198.7,
798.35, 886.47, 1072.91, 658.78, 244.29, 339.06, 1128.61,
298.69, 494.6, 40.7, 302.66, 237.91, 48.47, 55.63, 412.9
],
2002: [82.44, 84.21, 956.84, 197.8, 374.69, 590.2, 446.17, 474.2,
79.68, 1110.44, 685.2, 783.66, 664.78, 535.98, 1390, 1288.36,
707, 847.25, 1015.08, 601.99, 222.89, 317.87, 1047.95, 281.1,
463.44, 39.75, 282.21, 215.51, 47.31, 52.95, 305
]
});
option = {
baseOption: {
timeline: {
show: true, //隐藏坐标轴
axisType: 'category',
autoPlay: true,
playInterval: 1000,
data: ['2002-01-01', '2003-01-01', '2004-01-01', {
value: '2005-01-01',
tooltip: {
formatter: '{b} GDP达到一个高度'
},
symbol: 'diamond',
symbolSize: 16
}, '2006-01-01', '2007-01-01', '2008-01-01', '2009-01-01',
'2010-01-01', {
value: '2011-01-01',
tooltip: {
formatter: function(params) {
return params.name + 'GDP达到又一个高度';
}
},
symbol: 'diamond',
symbolSize: 18
},
],
label: {
formatter: function(s) {
return (new Date(s)).getFullYear();
}
},
},
legend: {
data: ['帅哥', '美女'],
top: 4,
right: '10%',
textStyle: {
color: '#fff',
},
},
toolbox: {
feature: {
dataView: {
show: true,
readOnly: false
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
grid: [{
show: false,
left: '4%',
top: 60,
bottom: 30,
containLabel: true,
width: '46%',
}, {
show: false,
left: '50.5%',
top: 80,
bottom: 30,
width: '4%',
}, {
show: false,
right: '4%',
top: 60,
bottom: 30,
containLabel: true,
width: '46%',
}, ],
xAxis: [{
type: 'value',
inverse: true,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
position: 'top',
axisLabel: {
show: true,
textStyle: {
color: '#B2B2B2',
fontSize: 12,
},
},
splitLine: {
show: true,
lineStyle: {
color: '#1F2022',
width: 1,
type: 'solid',
},
},
}, {
gridIndex: 1,
show: false,
}, {
gridIndex: 2,
type: 'value',
axisLine: {
show: false,
},
axisTick: {
show: false,
},
position: 'top',
axisLabel: {
show: true,
textStyle: {
color: '#B2B2B2',
fontSize: 12,
},
},
splitLine: {
show: true,
lineStyle: {
color: '#1F2022',
width: 1,
type: 'solid',
},
},
}, ],
yAxis: [{
type: 'category',
inverse: true,
position: 'right',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false,
margin: 8,
textStyle: {
color: '#9D9EA0',
fontSize: 12,
},
},
data: myData,
}, {
gridIndex: 1,
type: 'category',
inverse: true,
position: 'left',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: true,
textStyle: {
color: '#9D9EA0',
fontSize: 12,
},
},
data: myData.map(function(value) {
return {
value: value,
textStyle: {
align: 'center',
}
}
}),
}, {
gridIndex: 2,
type: 'category',
inverse: true,
position: 'left',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false,
textStyle: {
color: '#9D9EA0',
fontSize: 12,
},
},
data: myData,
}, ],
series: [{
name: '男性',
type: 'bar',
barGap: 20,
barWidth: 20,
label: {
normal: {
show: false,
},
emphasis: {
show: true,
position: 'left',
offset: [0, 0],
textStyle: {
color: '#fff',
fontSize: 14,
},
},
},
itemStyle: {
normal: {
color: '#659F83',
},
emphasis: {
color: '#08C7AE',
},
},
}, {
name: '女性',
type: 'bar',
barGap: 20,
barWidth: 20,
xAxisIndex: 2,
yAxisIndex: 2,
label: {
normal: {
show: false,
},
emphasis: {
show: true,
position: 'right',
offset: [0, 0],
textStyle: {
color: '#fff',
fontSize: 14,
},
},
},
itemStyle: {
normal: {
color: '#F68989',
},
emphasis: {
color: '#F94646',
},
},
}, {
name: 'GDP占比',
type: 'pie',
center: ['75%', '35%'],
radius: '28%',
z: 100
}]
},
options: [{
title: {
text: '2002全国宏观经济指标'
},
series: [{
data: dataMap.datanan['2002']
}, {
data: dataMap.datanv['2002']
}, ]
}, {
title: {
text: '2003全国宏观经济指标'
},
series: [{
data: dataMap.datanan['2003']
}, {
data: dataMap.datanv['2003']
}, ]
}, {
title: {
text: '2004全国宏观经济指标'
},
series: [{
data: dataMap.datanan['2004']
}, {
data: dataMap.datanv['2004']
}, ]
}, {
title: {
text: '2005全国宏观经济指标'
},
series: [{
data: dataMap.datanan['2005']
}, {
data: dataMap.datanv['2005']
}, ]
}, {
title: {
text: '2006全国宏观经济指标'
},
series: [{
data: dataMap.datanan['2006']
}, {
data: dataMap.datanv['2006']
}, ]
}, {
title: {
text: '2007全国宏观经济指标'
},
series: [{
data: dataMap.datanan['2007']
}, {
data: dataMap.datanv['2007']
}, ]
}, {
title: {
text: '2008全国宏观经济指标'
},
series: [{
data: dataMap.datanan['2008']
}, {
data: dataMap.datanv['2008']
}, ]
}, {
title: {
text: '2009全国宏观经济指标'
},
series: [{
data: dataMap.datanan['2009']
}, {
data: dataMap.datanv['2009']
}, ]
}, {
title: {
text: '2010全国宏观经济指标'
},
series: [{
data: dataMap.datanan['2010']
}, {
data: dataMap.datanv['2010']
}, ]
}, {
title: {
text: '2011全国宏观经济指标'
},
series: [{
data: dataMap.datanan['2011']
}, {
data: dataMap.datanv['2011']
}, ]
}]
};
截图如下
