制作如图所示的排名动态图，我们需要两个东西，一个是相关数据的CSV文件，第二就是软件。
 
软件下载地址：百度云https://pan.baidu.com/s/1vZwEr01mEPaj5wPSheHQTA
 
密码：qwnt
 
 
 
解压之后使用浏览器打开dist文件夹的bargraph.html，选择CSV文件进行上传。
 
 
CSV文件夹必须是固定的格式，如下图所示：
 
 
name即名字，date是时间，type是可以进行的标注，value就是值。
 
接下来就去愉快玩耍吧。
 
参考博文：
 
B站数据可视化排行榜项目入门指南
 
 vx:kitmyfaceplease2；欢迎关注公众号：锐多宝的地理空间；
 
 

 
 

 
     作者：刘早起早起
 
     来源：早起Python
 
大家好，今天我们要讲的是如何使用Pyecharts制作动态排名变化图????
 

 
制作这样的一个动态图使用到的是Pyecharts中的TimeLine(时间线轮播图)，代码实现起来其实稍有难度，但我希望能通过讲解这样一张动态图的制作过程，来让各位读者可以使用Pyecharts将任何一种图动起来，我们开始吧！
 

 
首先我们需要思考一下这样一种动态图的生成逻辑，不就是把每天的数据制作成一张条形图然后轮动吗，OK那我们的数据要整理成啥样呢？一个dataframe，每列是一个国家近20天的数据，还有一个存储20天时间的list????
 

 
搞定数据之后我们去Pyecharts官方示例网站找到一个类似的图
 
http://gallery.pyecharts.org/#/Timeline/timeline_bar_with_graphic
 

 
官网示例代码和效果都给你了，我们要做的就是将这段代码改成我们需要的形式，现在我们将这段代码复制到Notebook中，并修改将图显示在notebook中

 

 
接下来我们观察这段代码与图，首先要改的是，把他每次两组变量改为一组变量，然后删掉和修改一些不需要的文字????

 

 
上图左边是修改前的代码，右边是代码修改的部分，就不用多做解释了，直接看图，现在我们的图就成了这样????
 

 
是不是有点意思了，接下来也是稍微有一点难度的部分就是修改坐标轴和对应的数据，这时我们先观察下这段代码如何控制坐标轴和数据

 

 
可以看到x轴调用了Faker.choose()，y轴调用了Faker.values()打印我们单独调用一下出来看看
 

 
你看这俩方法每次返回一个list，并且这个list是变化的，并且要注意到他的X写在循环外，所以x轴一直没有变，但y轴的值写在了循环里面，通过这样的方式来让每次生成的图数据不一样。
 

 
所以我们接下来的目的就很明确了，因为我们的条形图是有顺序的所以我们需要写两个函数，在生成每一张图的时候，返回一组x轴数据，一组y轴数据，并且是按照顺序排列的，所以可以这么写????
 

 
稍微解释一下修改的地方，get_value()函数就是将df1传进去，再把每一行的数据传出来，k是用来识别调用次数的，这样可以保证每次调用下一行的数据。接着在循环里面，将我们传出来的确诊数量和国家名使用Pandas进行排序并返回两个list，此时这两个list一一对应并且确诊数量是降序排列。

 
此时我们的需求就实现了，用这个X，Y替换掉源代码的X，Y即可
 

 
其实到这里，就已经结束了，点击播放就可以实现轮动了，但接下来可以稍微修改部分代码来调整细节

 

 
上面这两处修改就是调整了每张图的切换时间，自动播放和反转XY轴，此时就大功告成，你的条形图就成功的动起来????

 

 

 
以上就是从0到1制作动态条形图的过程，感兴趣的一定要敲一遍代码。注意本文用柱状图示例，但是不管条形图还是饼图还是折线图甚至地图，体现到代码不就是Bar还是Line吗，想制作不同的动态图不就是修改一行代码的事吗。我们再回顾一下刚刚的步骤：思考想要做的图——>从官网找个demo——>观察代码——>修改部分代码——>搞定！学会了吗？
 
注：本文使用的数据与代码，点击阅读原文即可获取(使用电脑端才可以正常下载)，当然鼓励自己尝试一点一点写～
 

 
◆ ◆ ◆  ◆ ◆
 

 
长按二维码关注我们
 

 
数据森麟公众号的交流群已经建立，许多小伙伴已经加入其中，感谢大家的支持。大家可以在群里交流关于数据分析&数据挖掘的相关内容，还没有加入的小伙伴可以扫描下方管理员二维码，进群前一定要关注公众号奥，关注后让管理员帮忙拉进群，期待大家的加入。

 
管理员二维码：

 

 
猜你喜欢
 
● 笑死人不偿命的知乎沙雕问题排行榜
 
● 用Python扒出B站那些“惊为天人”的阿婆主！
 
● 全球股市跳水大战，谁最坑爹！
 
● 上万条数据撕开微博热搜的真相！
 
● 你相信逛B站也能学编程吗
 

数据可视化，Echarts实现动态排名变化，带时间轴，标签颜色和条形图一起变化
 
实现的效果图：
 

 文末附Echarts图表链接
 
源码如下：
 
 var years = ['2016', '2017', '2018'];
 var jdData = [
     ['香港同胞', '澳门同胞', '台湾同胞', '日  本', '韩  国', '蒙  古', '印度尼西亚', '马来西亚', '菲律宾', '新加坡', '泰  国', '印  度', '越  南', '缅  甸', '朝  鲜', '巴基斯坦', '其  它'],
     ['香港同胞', '澳门同胞', '台湾同胞', '日  本', '韩  国', '蒙  古', '印度尼西亚', '马来西亚', '菲律宾', '新加坡', '泰  国', '印  度', '越  南', '缅  甸', '朝  鲜', '巴基斯坦', '其  它'],
     ['香港同胞', '澳门同胞', '台湾同胞', '日  本', '韩  国', '蒙  古', '印度尼西亚', '马来西亚', '菲律宾', '新加坡', '泰  国', '印  度', '越  南', '缅  甸', '朝  鲜', '巴基斯坦', '其  它']
 ]
 var data = [
     [13.2, 1.11, 13.6, 9284, 64138, 2237, 4779, 48877, 2371, 36224, 12956, 2499, 4778, 594, 717, 534, 16487],
     [15.26, 1.31, 16.68, 10331, 91580, 1909, 40469, 67490, 1765, 36982, 15371, 3643, 2871, 762, 962, 757, 34414],
     [14.23, 1.31, 21.13, 10873, 94964, 2966, 129748, 59827, 8519, 38344, 18495, 3531, 1369, 544, 2005, 975, 33855, ],
 ];

 option = {

     baseOption: {
         backgroundColor: '#2c343c', //背景颜色
         timeline: {
             data: years,
             axisType: 'category',
             autoPlay: true,
             playInterval: 1500, //播放速度

             left: '5%',
             right: '5%',
             bottom: '0%',
             width: '90%',
             //  height: null,
             label: {
                 normal: {
                     textStyle: {

                         color: 'red',
                     }
                 },
                 emphasis: {
                     textStyle: {
                         color: 'red'
                     }
                 }
             },
             symbolSize: 10,
             lineStyle: {
                 color: '#red'
             },
             checkpointStyle: {
                 borderColor: '#red',
                 borderWidth: 2
             },
             controlStyle: {
                 showNextBtn: true,
                 showPrevBtn: true,
                 normal: {
                     color: '#ff8800',
                     borderColor: '#ff8800'
                 },
                 emphasis: {
                     color: 'red',
                     borderColor: 'red'
                 }
             },

         },
         title: {
             text: '',
             right: '2%',
             bottom: '8%',
             textStyle: {
                 fontSize: 50,
                 color: 'black' //标题字体颜色
             }
         },
         tooltip: {
             'trigger': 'axis'
         },
         calculable: true,
         grid: {
             left: '8%',
             right: '2%',
             bottom: '6%',
             top: '0%',
             containLabel: true
         },
         label: {
             normal: {
                 textStyle: {
                     color: 'red'
                 }
             }
         },
         yAxis: [{

             nameGap: 50,
             offset: '37',
             'type': 'category',
             interval: 50,
             //inverse: ture,//图表倒叙或者正序排版
             data: '',
             nameTextStyle: {
                 color: 'red'
             },


             axisLabel: {
                 //rotate:45,
                 show: false,
                 textStyle: {
                     fontSize: 32,

                     color: function(params, Index) { // 标签国家字体颜色

                         //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);//随机生成颜色

                         var colorarrays = ['#6bc0fb', '#7fec9d', '#fedd8b', '#ffa597', '#84e4dd', '#749f83',
                             '#ca8622', '#bda29a', '#a8d8ea', '#aa96da', '#fcbad3', '#ffffd2',
                             '#f38181', '#fce38a', '#eaffd0', '#95e1d3', '#e3fdfd', '#749f83', '#ca8622'
                         ];

                         //console.log("111", Index, colorarrays[Index],params); //打印序列

                         return colorarrays[jdData[0].indexOf(params)];
                     },


                 }, //rotate:45,
                 interval: 50
             },
             axisLine: {

                 lineStyle: {
                     color: 'balck' //Y轴颜色
                 },
             },
             splitLine: {
                 show: false,
                 lineStyle: {
                     color: 'balck'
                 }
             },

         }],
         xAxis: [{
             'type': 'value',
             'name': '',

             splitNumber: 8, //轴线个数
             nameTextStyle: {
                 color: 'balck'
             },
             axisLine: {
                 lineStyle: {
                     color: '#ffa597' //X轴颜色
                 }
             },
             axisLabel: {
                 formatter: '{value} '
             },
             splitLine: {
                 show: true,
                 lineStyle: {
                     color: '#fedd8b'
                 }
             },
         }],
         series: [{
                 'name': '',
                 'type': 'bar',
                 markLine: {
                     label: {
                         normal: {
                             show: false
                         }
                     },
                     lineStyle: {
                         normal: {
                             color: 'red',
                             width: 3
                         }
                     },
                 },
                 label: {
                     normal: {
                         show: true,
                         position: 'right', //数值显示在右侧
                         formatter: '{c}'
                     }
                 },
                 itemStyle: {
                     normal: {
                         color: function(params) {
                             // build a color map as your need.
                             //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);//随机生成颜色         
                             var colorList = ['#6bc0fb', '#7fec9d', '#fedd8b', '#ffa597', '#84e4dd', '#749f83',
                                 '#ca8622', '#bda29a', '#a8d8ea', '#aa96da', '#fcbad3', '#ffffd2',
                                 '#f38181', '#fce38a', '#eaffd0', '#95e1d3', '#e3fdfd', '#749f83', '#ca8622'
                             ];
                             // return colorList[params.dataIndex]

                             console.log("111", params.name); //打印序列
                             return colorList[jdData[0].indexOf(params.name)];
                         },

                     }
                 },
             },

             {
                 'name': '',
                 'type': 'bar',
                 markLine: {
                     
                     
                     label: {
                         normal: {
                             show: false
                         }
                     },
                     lineStyle: {
                         
                         normal: {
                             color: 'red',
                             width: 3
                         }
                     },
                 },
                 barWidth: '50%',
                 barGap: '-100%',
                 label: {
                     normal: {
                         show: true,
                         fontSize: 16,  //标签国家字体大小
                         position: 'left', //数值显示在右侧
                         formatter: function(p) {
                             return p.name;
                         }
                     }
                 },
                 itemStyle: {
                     normal: {
                         
                         
                         color: function(params) {
                             // build a color map as your need.
                             //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);//随机生成颜色         
                             var colorList = ['#6bc0fb', '#7fec9d', '#fedd8b', '#ffa597', '#84e4dd', '#749f83',
                                 '#ca8622', '#bda29a', '#a8d8ea', '#aa96da', '#fcbad3', '#ffffd2',
                                 '#f38181', '#fce38a', '#eaffd0', '#95e1d3', '#e3fdfd', '#749f83', '#ca8622'
                             ];
                             // return colorList[params.dataIndex]

                             // console.log("111", params.name); //打印序列
                             return colorList[jdData[0].indexOf(params.name)];
                         },

                     }
                 },
             }
         ],

         animationEasingUpdate: 'quinticInOut',
         animationDurationUpdate: 1500, //动画效果
     },

     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;
     }
     option.options.push({
         title: {
             text: years[n] + '年'
         },
         yAxis: {
             data: res1,
         },
         series: [{
             data: res2
         }, {
             data: res2
         }]
     });
 }
 
有问题可以在评论区留言或者在Echarts图表评论区留言，我会积极回复大家。
 颜色搭配的不是很好，如果有更好的配色方案，还请多多指教~
 
Echarts图表链接: https://gallery.echartsjs.com/editor.html?c=xa9hX1DtmR
 
未经允许禁止转载*！！*

 
1960-2018年世界各国GDP排名变化--Python动图实现
 
数据
代码
结果展示
 

 
数据
 
数据来源：https://data.worldbank.org.cn/
 
去看原文
 
代码
 
#coding=utf-8

import pandas as pd
import matplotlib.pyplot as plt
import matplotlib.animation as animation
import PlotUtil
import sys

def is_country(x, fields):
  for field in fields:
    if field in x.encode("utf-8"):
      return False
  return True

def main():
  # 读取数据
  gdp = pd.read_excel("API_NY.GDP.MKTP.CD_DS2_zh_excel_v2_103680.xls")

  # 筛选：去掉世界、一些地区性的数据
  fields = ["世界", "收入国家", "地区", "南亚", "组织成员", "人口","北美", "联盟", "IBRD", "IDA", "重债穷国"]
  gdp["is_country"] = gdp.apply(lambda x: is_country(x["Country Name"], fields), axis = 1)
  gdp = gdp[gdp["is_country"] == True]

  datas = []
  for year in range(1960, 2019):
    year = str(year)
    gdp.sort_values(year, inplace = True, ascending = False)
    print(year,"==========================================")
    print(gdp[0:15][["Country Name", year]])

    data = gdp[0:15] #排序，取前15名
    data.sort_values(year, inplace = True, ascending = True)
    data[year] = data[year] / 10 ** 11

    datas.append([year, data[year].tolist(), data["Country Name"].tolist()])

  # 绘制动态图
  plot = PlotUtil.Plot(datas)
  plot.showGif("gdp.gif")

if __name__ == '__main__':
  main()
 
结果展示
 

 原文有源码，更多内容，请关注地学数据处理分析。