刷爆全网的动态排序条形图，竟然被DeepSeek一秒生成!

你肯定见过这样的刷爆全网的各种GDP动态图

以前总感觉这样的图表一般人做不出来，所以只有羡慕的份。而今天兰色教你用deepseek快速制作帅气的动态排序条形图。兰色原创纯干货，同学们如果觉得有用，记得在最下面点赞和转发、收藏。

准备工作：

数据源（直接粘到到表格中再分列）

项目 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020

郑州 326 422 509 583 607 622 719 745 834 870

北京 518 611 700 776 808 903 926 1008 1048 1088

上海 712 773 812 896 931 1011 1048 1062 1117 1174

南京 877 921 1012 1035 1119 1156 1241 1269 1329 1353

天津 192 217 257 276 356 387 451 495 578 607

成都 677 705 731 808 854 937 964 989 1084 1172

洛阳 443 500 544 642 713 760 823 875 897 993

南阳 588 608 683 758 830 895 982 997 1093 1160

西安 772 782 869 897 925 1021 1049 1120 1196 1223

广州 232 248 327 398 419 463 513 574 642 654

Html模板代码，下面要粘贴给Deepseek

const updateFrequency = 2000;
const dimension = 0;
const countryColors = {
  Australia: '#00008b',
  Canada: '#f00',
  China: '#ffde00',
  Cuba: '#002a8f',
  Finland: '#003580',
  France: '#ed2939',
  Germany: '#000',
  Iceland: '#003897',
  India: '#f93',
  Japan: '#bc002d',
  'North Korea': '#024fa2',
  'South Korea': '#000',
  'New Zealand': '#00247d',
  Norway: '#ef2b2d',
  Poland: '#dc143c',
  Russia: '#d52b1e',
  Turkey: '#e30a17',
  'United Kingdom': '#00247d',
  'United States': '#b22234'
};
$.when(
  $.getJSON(CDN_PATH + 'emoji-flags@1.3.0/data.json'),
  $.getJSON(ROOT_PATH + '/data/asset/data/life-expectancy-table.json')
).done(function (res0, res1) {
  const flags = res0[0];
  const data = res1[0];
  const years = [];
  for (let i = 0; i < data.length; ++i) {
    if (years.length === 0 || years[years.length - 1] !== data[i][4]) {
      years.push(data[i][4]);
    }
  }
  function getFlag(countryName) {
    if (!countryName) {
      return '';
    }
    return (
      flags.find(function (item) {
        return item.name === countryName;
      }) || {}
    ).emoji;
  }
  let startIndex = 10;
  let startYear = years[startIndex];
  option = {
    grid: {
      top: 10,
      bottom: 30,
      left: 150,
      right: 80
    },
    xAxis: {
      max: 'dataMax',
      axisLabel: {
        formatter: function (n) {
          return Math.round(n) + '';
        }
      }
    },
    dataset: {
      source: data.slice(1).filter(function (d) {
        return d[4] === startYear;
      })
    },
    yAxis: {
      type: 'category',
      inverse: true,
      max: 10,
      axisLabel: {
        show: true,
        fontSize: 14,
        formatter: function (value) {
          return value + '{flag|' + getFlag(value) + '}';
        },
        rich: {
          flag: {
            fontSize: 25,
            padding: 5
          }
        }
      },
      animationDuration: 300,
      animationDurationUpdate: 300
    },
    series: [
      {
        realtimeSort: true,
        seriesLayoutBy: 'column',
        type: 'bar',
        itemStyle: {
          color: function (param) {
            return countryColors[param.value[3]] || '#5470c6';
          }
        },
        encode: {
          x: dimension,
          y: 3
        },
        label: {
          show: true,
          precision: 1,
          position: 'right',
          valueAnimation: true,
          fontFamily: 'monospace'
        }
      }
    ],
    // Disable init animation.
    animationDuration: 0,
    animationDurationUpdate: updateFrequency,
    animationEasing: 'linear',
    animationEasingUpdate: 'linear',
    graphic: {
      elements: [
        {
          type: 'text',
          right: 160,
          bottom: 60,
          style: {
            text: startYear,
            font: 'bolder 80px monospace',
            fill: 'rgba(100, 100, 100, 0.25)'
          },
          z: 100
        }
      ]
    }
  };
  // console.log(option);
  myChart.setOption(option);
  for (let i = startIndex; i < years.length - 1; ++i) {
    (function (i) {
      setTimeout(function () {
        updateYear(years[i + 1]);
      }, (i - startIndex) * updateFrequency);
    })(i);
  }
  function updateYear(year) {
    let source = data.slice(1).filter(function (d) {
      return d[4] === year;
    });
    option.series[0].data = source;
    option.graphic.elements[0].style.text = year;
    myChart.setOption(option);
  }
});

制作步骤：

打开Deepseek官网，把代码和表格数据复制给它，中间加提示词：

以上是动态条形图html代码，请帮我替换为下面的数据并用html格式输出，另外图表颜色要使用随机色

很快代码就生会成，点击运行HTML,就可能看到动态的图表了。

下载方法：复制代码粘贴到一文本文件中，再把文本文件的后由txt改为html。再双击运行即可。

在PPT中的使用方法：在PPT中插入一图表或图形，插入超链接，通过浏览找到刚改名的html文件。以后播放幻灯片时随时打开动态图播放。