本实验所用数据来自于国家数据网站，网址为http://data.stats.gov.cn/easyquery.htm?cn=E0103。
所用数据为2010-2019年各省年度GDP，如下图所示：
动态图表制作过程
(1)本动态图表使用Echarts绘制。首先新建一个HTML文件。
(2)引入 echarts.js。
(3)设置动态图表的宽度和高度，并初始化echarts实例。
(4)加入数据。
(5)设置动态图表的播放速度和颜色。
(6)完成后使用浏览器打开HTML文件即可看到动态图表。
完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>2010-2019各省GDP排名</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 1080px;height:720px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var years = ['2010', '2011', '2012','2013', '2014', '2015','2016', '2017', '2018', '2019'];
var jdData = [
['北京市','天津市','河北省','山西省','内蒙古自治区','辽宁省','吉林省','黑龙江省','上海市','江苏省','浙江省','安徽省','福建省',
'江西省','山东省','河南省','湖北省','湖南省','广东省','广西壮族自治区','海南省','重庆市','四川省',
'贵州省','云南省','西藏自治区','陕西省','甘肃省','青海省','宁夏回族自治区','新疆维吾尔自治区'],
['北京市','天津市','河北省','山西省','内蒙古自治区','辽宁省','吉林省','黑龙江省','上海市','江苏省','浙江省','安徽省','福建省',
'江西省','山东省','河南省','湖北省','湖南省','广东省','广西壮族自治区','海南省','重庆市','四川省',
'贵州省','云南省','西藏自治区','陕西省','甘肃省','青海省','宁夏回族自治区','新疆维吾尔自治区'],
['北京市','天津市','河北省','山西省','内蒙古自治区','辽宁省','吉林省','黑龙江省','上海市','江苏省','浙江省','安徽省','福建省',
'江西省','山东省','河南省','湖北省','湖南省','广东省','广西壮族自治区','海南省','重庆市','四川省',
'贵州省','云南省','西藏自治区','陕西省','甘肃省','青海省','宁夏回族自治区','新疆维吾尔自治区'],
['北京市','天津市','河北省','山西省','内蒙古自治区','辽宁省','吉林省','黑龙江省','上海市','江苏省','浙江省','安徽省','福建省',
'江西省','山东省','河南省','湖北省','湖南省','广东省','广西壮族自治区','海南省','重庆市','四川省',
'贵州省','云南省','西藏自治区','陕西省','甘肃省','青海省','宁夏回族自治区','新疆维吾尔自治区'],
['北京市','天津市','河北省','山西省','内蒙古自治区','辽宁省','吉林省','黑龙江省','上海市','江苏省','浙江省','安徽省','福建省',
'江西省','山东省','河南省','湖北省','湖南省','广东省','广西壮族自治区','海南省','重庆市','四川省',
'贵州省','云南省','西藏自治区','陕西省','甘肃省','青海省','宁夏回族自治区','新疆维吾尔自治区'],
['北京市','天津市','河北省','山西省','内蒙古自治区','辽宁省','吉林省','黑龙江省','上海市','江苏省','浙江省','安徽省','福建省',
'江西省','山东省','河南省','湖北省','湖南省','广东省','广西壮族自治区','海南省','重庆市','四川省',
'贵州省','云南省','西藏自治区','陕西省','甘肃省','青海省','宁夏回族自治区','新疆维吾尔自治区'],
['北京市','天津市','河北省','山西省','内蒙古自治区','辽宁省','吉林省','黑龙江省','上海市','江苏省','浙江省','安徽省','福建省',
'江西省','山东省','河南省','湖北省','湖南省','广东省','广西壮族自治区','海南省','重庆市','四川省',
'贵州省','云南省','西藏自治区','陕西省','甘肃省','青海省','宁夏回族自治区','新疆维吾尔自治区'],
['北京市','天津市','河北省','山西省','内蒙古自治区','辽宁省','吉林省','黑龙江省','上海市','江苏省','浙江省','安徽省','福建省',
'江西省','山东省','河南省','湖北省','湖南省','广东省','广西壮族自治区','海南省','重庆市','四川省',
'贵州省','云南省','西藏自治区','陕西省','甘肃省','青海省','宁夏回族自治区','新疆维吾尔自治区'],
['北京市','天津市','河北省','山西省','内蒙古自治区','辽宁省','吉林省','黑龙江省','上海市','江苏省','浙江省','安徽省','福建省',
'江西省','山东省','河南省','湖北省','湖南省','广东省','广西壮族自治区','海南省','重庆市','四川省',
'贵州省','云南省','西藏自治区','陕西省','甘肃省','青海省','宁夏回族自治区','新疆维吾尔自治区'],
['北京市','天津市','河北省','山西省','内蒙古自治区','辽宁省','吉林省','黑龙江省','上海市','江苏省','浙江省','安徽省','福建省',
'江西省','山东省','河南省','湖北省','湖南省','广东省','广西壮族自治区','海南省','重庆市','四川省',
'贵州省','云南省','西藏自治区','陕西省','甘肃省','青海省','宁夏回族自治区','新疆维吾尔自治区']
]
var data = [
[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],
[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],
[17879.4, 12893.88, 26575.01, 12112.83, 15880.58, 24846.43, 11939.24, 13691.58, 20181.72, 54058.22, 34665.33, 17212.05, 19701.78, 12948.88, 50013.24, 29599.31, 22250.45, 22154.23, 57067.92, 13035.1, 2855.54, 11409.6, 23872.8, 6852.2, 10309.47, 701.03, 14453.68, 5650.2, 1893.54, 2341.29, 7505.31],
[19800.81, 14442.01, 28442.95, 12665.25, 16916.5, 27213.22, 13046.4, 14454.91, 21818.15, 59753.37, 37756.59, 19229.34, 21868.49, 14410.19, 55230.32, 32191.3, 24791.83, 24621.67, 62474.79, 14449.9, 3177.56, 12783.26, 26392.07, 8086.86, 11832.31, 815.67, 16205.45, 6330.69, 2122.06, 2577.57, 8443.84],
[21330.83, 15726.93, 29421.15, 12761.49, 17770.19, 28626.58, 13803.14, 15039.38, 23567.7, 65088.32, 40173.03, 20848.75, 24055.76, 15714.63, 59426.59, 34938.24, 27379.22, 27037.32, 67809.85, 15672.89, 3500.72, 14262.6, 28536.66, 9266.39, 12814.59, 920.83, 17689.94, 6836.82, 2303.32, 2752.1, 9273.46],
[23014.59, 16538.19, 29806.11, 12766.49, 17831.51, 28669.02, 14063.13, 15083.67, 25123.45, 70116.38, 42886.49, 22005.63, 25979.82, 16723.78, 63002.33, 37002.16, 29550.19, 28902.21, 72812.55, 16803.12, 3702.76, 15717.27, 30053.1, 10502.56, 13619.17, 1026.39, 18021.86, 6790.32, 2417.05, 2911.77, 9324.8],
[25669.13, 17885.39, 32070.45, 13050.41, 18128.1, 22246.9, 14776.8, 15386.09, 28178.65, 77388.28, 47251.36, 24407.62, 28810.58, 18499, 68024.49, 40471.79, 32665.38, 31551.37, 80854.91, 18317.64, 4053.2, 17740.59, 32934.54, 11776.73, 14788.42, 1151.41, 19399.59, 7200.37, 2572.49, 3168.59, 9649.7],
[28014.94, 18549.19, 34016.32, 15528.42, 16096.21, 23409.24, 14944.53, 15902.68, 30632.99, 85869.76, 51768.26, 27018, 32182.09, 20006.31, 72634.15, 44552.83, 35478.09, 33902.96, 89705.23, 18523.26, 4462.54, 19424.73, 36980.22, 13540.83, 16376.34, 1310.92, 21898.81, 7459.9, 2624.83, 3443.56, 10881.96],
[33105.97, 13362.92, 32494.61, 15958.13, 16140.76, 23510.54, 11253.81, 12846.48, 36011.82, 93207.55, 58002.84, 34010.91, 38687.77, 22716.51, 66648.87, 49935.9, 42021.95, 36329.68, 99945.22, 19627.81, 4910.69, 21588.8, 42902.1, 15353.21, 20880.63, 1548.39, 23941.88, 8104.07, 2748, 3510.21, 12809.39],
[35371.28, 14104.28, 35104.52, 17026.68, 17212.53, 24909.45, 11726.82, 13612.68, 38155.32, 99631.52, 62351.74, 37113.98, 42395, 24757.5, 71067.53, 54259.2, 45828.31, 39752.12, 107671.07, 21237.14, 5308.93, 23605.77, 46615.82, 16769.34, 23223.75, 1697.82, 25793.17, 8718.3, 2965.95, 3748.48, 13597.11]
];
option = {
baseOption: {
timeline: {
data: years,
axisType: 'category',
autoPlay: true,
playInterval: 2000,//播放速度
left: '10%',
right: '10%',
bottom: '0%',
width: '80%',
label: {
normal: {
textStyle: {
color: '#ff8800',
}
},
emphasis: {
textStyle: {
color: '#fff'
}
}
},
symbolSize: 10,
lineStyle: {
color: '#555'
},
checkpointStyle: {
borderColor: '#777',
borderWidth: 2
},
controlStyle: {
showNextBtn: true,
showPrevBtn: true,
normal: {
color: '#ff8800',
borderColor: '#ff8800'
},
emphasis: {
color: '#aaa',
borderColor: '#aaa'
}
},
},
title: {
text: '',
right: '2%',
bottom: '8%',
textStyle: {
fontSize: 50,
color: '#666'
}
},
tooltip: {
'trigger': 'axis'
},
calculable: true,
grid: {
left: '8%',
right: '2%',
bottom: '6%',
top: '0%',
containLabel: true
},
label: {
normal: {
textStyle: {
color: '#fff'
}
}
},
yAxis: [{
offset: '37',
'type': 'category',
data: '',
nameTextStyle: {
color: '#fff'
},
axisLabel: {
//rotate:45,
textStyle: {
fontSize: 12,
color: '#333',
},
interval: 0
},
axisLine: {
lineStyle: {
color: '#333'
},
},
splitLine: {
show: false,
lineStyle: {
color: '#333'
}
},
}],
xAxis: [{
'type': 'value',
'name': '',
splitNumber: 8,
nameTextStyle: {
color: '#333'
},
axisLine: {
lineStyle: {
color: '#333'
}
},
axisLabel: {
formatter: '{value} '
},
splitLine: {
show: true,
lineStyle: {
color: '#ccc'
}
},
}],
series: [{
'name': '',
'type': 'bar',
markLine: {
label: {
normal: {
show: false
}
},
lineStyle: {
normal: {
color: 'red',
width: 3
}
},
},
barWidth: '50%',
label: {
normal: {
show: true,
position: 'inside',
formatter: '{c}'
}
},
itemStyle: {
normal: {
color: function(params) {
var colorList = [ //设置颜色
'#bcd3bb', '#e88f70', '#9dc5c8', '#e1e8c8',
'#7b7c68', '#e5b5b5', '#f0b489', '#928ea8',
'#bda29a', '#376956', '#c3bed4', '#495a80',
'#9966cc', '#bdb76a', '#eee8ab', '#a35015',
'#04dd98', '#d9b3e6', '#b6c3fc', '#315dbc','#6bc0fb', '#7fec9d', '#fedd8b', '#ffa597', '#84e4dd', '#749f83',
'#ca8622', '#bda29a', '#a8d8ea', '#aa96da', '#fcbad3'
];
return colorList[params.dataIndex]
},
}
},
}],
animationDurationUpdate: 2000,
animationEasingUpdate: 'quinticInOut'
},
options: []
};
for (var n = 0; n < years.length; n++) {
var res = [];
//alert(jdData.length);
for (j = 0; j < data[n].length; j++) {
res.push({
name: jdData[n][j],
value: data[n][j]
});
}
res.sort(function(a, b) {
return b.value - a.value;
}).slice(0, 6);
res.sort(function(a, b) {
return a.value - b.value;
});
var res1 = [];
var res2 = [];
//console.log(res);
for (t = 0; t < res.length; t++) {
res1[t] = res[t].name;
res2[t] = res[t].value;
}
console.log(res1);
console.log("----------------");
console.log(jdData[n]);
option.options.push({
title: {
text: years[n] + '年'
},
yAxis: {
data: res1,
},
series: [{
data: res2
}]
});
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
版权声明：本文为Wing_kin666原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。