动画参考 https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay
image.png

  1. const option = {
  2.   backgroundColor: '#062e65',
  3.   stack: true,
  4.   grid: { bottom: 0, top: 0, left: 0, right: 0 },
  5.   xAxis: {
  6.     data: [],
  7.     silent: true,
  8.     splitLine: { show: false },
  9.     axisLine: { show: false }
  10.   },
  11.   yAxis: {
  12.     silent: true,
  13.     splitLine: { show: false },
  14.     axisLine: { show: false },
  15.     axisTick: { show: false },
  16.     axisLabel: { show: false }
  17.   },
  18.   series: [
  19.     {
  20.       type: 'bar',
  21.       data: [ // building
  22.         40, 41.3, 42, 42.6, 43.5, 44, 44.5, 44.6, 44.7, 44.7, 44.6, 44.5, 44,
  23.         43.5, 42.6, 42, 41.3, 0, 30, 30, 30, 34, 34, 34, 34, 34, 0, 13, 13, 13,
  24.         15, 31, 15, 13, 13, 13, 48, 48, 48, 48, 48, 48, 48, 5, 5, 5, 5, 5, 5, 5,
  25.         15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 12.3, 13, 13.6, 14.5, 15, 15.5,
  26.         15.6, 15.7, 15.7, 15.6, 15.5, 15, 14.5, 13.6, 13, 12.3, 0, 9, 9, 9, 9,
  27.         9, 9, 9, 48, 47.5, 47, 46.5, 46, 45.5, 45, 45, 45, 45, 45, 0, 23, 24,
  28.         25, 26, 27, 26, 25, 24, 23, 0, 48, 49, 50, 51, 52, 51, 50, 49, 48, 38.3,
  29.         39, 39.6, 40.5, 41, 41.5, 41.6, 41.7, 41.7, 41.6, 41.5, 41, 40.5, 39.6,
  30.         39, 38.3, 0, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 0, 4.3, 5, 5.6,
  31.         6.5, 7, 7.5, 7.6, 7.7, 7.7, 7.6, 7.5, 7, 6.5, 5.6, 5, 4.3
  32.       ],
  33.       itemStyle: { normal: { color: 'rgb(38, 41, 57)' } },
  34.       animationDelay: function (idx) {
  35.         return idx * 10;
  36.       },
  37.       zlevel: 2, // 最前面的图层
  38.     },
  39.     {
  40.       type: 'bar',
  41.       data: [ // building2
  42.         56, 64, 56, 48, 48, 40, 32, 32, 47.3, 47.3, 47.4, 45.5, 46, 46.5, 49.4,
  43.         50, 50.7, 0, 9, 9, 9, 7, 7, 7, 5, 5, 39, 0, 39, 38.5, 36, 19.5, 35,
  44.         36.5, 36, 35.5, 48, 47.5, 20.5, 21, 21.5, 22, 22.5, 66, 66.5, 67, 67.5,
  45.         68, 0, 12, 2, 3, 6, 23, 8, 7, 8, 9, 15, 16, 9.7, 9, 8.4, 3.5, 3, 2.5, 0,
  46.         12.3, 12.3, 12.4, 12.5, 13, 14, 15.4, 16.5, 17.7, 30.5, 22, 66, 66, 66,
  47.         68, 84, 68, 27, 27.5, 28, 0, 46, 45.5, 45, 44.5, 44, 43.5, 43, 43, 20,
  48.         19, 18, 47, 46, 47, 48, 49, 50, 73, 0, 22, 21.5, 21, 20.5, 20, 19.5, 19,
  49.         18.5, 18, 17.5, 19, 19, 19, 17, 17, 17, 19, 19, 19, 15, 16.5, 18.4, 20,
  50.         21.7, 59, 41, 39, 37, 0
  51.       ],
  52.       zlevel: 1,
  53.       itemStyle: { normal: { color: 'rgb(28, 31, 47)' } },
  54.       animationDelay: function (idx) {
  55.                 return idx * 10 + 300
  56.             },
  57.     }
  58.   ],
  59.   animationEasing: 'elasticOut',
  60.   animationDelayUpdate: function (idx) {
  61.     return idx * 5;
  62.   }
  63. };

生成 series.data

  1. const  roofs = [
  2.   [1, 2, 3, 4, 5, 4, 3, 2, 1], // 三角形
  3.   [2, 2, 2, 4, 4, 4, 2, 2, 2], // 凸出的形状
  4.   [2, 2, 2, 4, 20, 4, 2, 2, 2],
  5.   [10, 9, 8, 7, 6, 5, 4, 3, 2, 1],
  6.   [6, 6, 6, 6, 6, 5, 4, 3, 2, 1],
  7.   [ 0.3, 1, 1.6, 2.5, 3, 3.5, 3.6, 3.7, 3.7, 3.6, 3.5, 3, 2.5, 1.6, 1, 0.3],
  8.   [6, 6, 6, 6, 6, 2, 2, 2],
  9.   [6, 5.5, 5, 4.5, 4, 3.5, 3, 2.5, 2, 1.5],
  10.   [1, 1, 1, 1, 1, 1.5, 2, 2.5, 3, 3.5, 4],
  11.   [1, 1, 1, 1, 1, 1, 1],
  12.   [4, 4, 4, 2, 2, 2, 4, 4, 4],
  13. ];
  15. function build(height) {
  16.   let arr = [100]
  17.   let l = 14
  18.   let h = height || 50
  20.   function addFloor(arr, l) {
  21.     const a = []
  22.     for (let i = 0;i < arr.length;i++) {
  23.       a.push(arr[i] + l)
  24.     }
  25.     return a
  26.   }
  28.   for (let i = 0;i < l;i++) {
  29.     const newRoof = addFloor(roofs[r(11)], r(h))
  30.     if (Math.random() < 0.5) {
  31.       newRoof.reverse()
  32.     }
  33.     arr = arr.concat(newRoof)
  34.     if (Math.random() < 0.5) {
  35.       arr.push(0)
  36.     }
  37.   }
  38.   return arr
  39. }
  41. const building = build()
  42. const building2 = (function () {
  43.   let b = build(100)
  44.   for (let i = 0;i < b.length;i++) {
  45.     if (b[i] > building[i]) {
  46.       b[i] = b[i] - building[i]
  47.     }
  48.   }
  49.   return b
  50. })()