heatmap.js

https://www.patrick-wied.at/static/heatmapjs
image.png

bizchart热点地图

参考 https://bizcharts.net/product/BizCharts4/demo/361
image.png
二维数组生成数据格式，一列5个，5个为一组进行展示

  1. const data = [
  2.   [0, 0, 50],
  3.   [0, 1, 79],
  4.   [0, 2, 86],
  5.   [0, 3, 24],
  6.   [0, 4, 67],
  8.   [1, 0, 92],
  9.   [1, 1, 58],
  10.   [1, 2, 78],
  11.   [1, 3, 37],
  12.   [1, 4, 48],
  14.   [2, 0, 35],
  15.   [2, 1, 85],
  16.   [2, 2, 23],
  17.   [2, 3, 64],
  18.   [2, 4, 52],
  20.   [3, 0, 72],
  21.   [3, 1, 32],
  22.   [3, 2, 34],
  23.   [3, 3, 19],
  24.   [3, 4, 16],
  26.   [4, 0, 38],
  27.   [4, 1, 56],
  28.   [4, 2, 88],
  29.   [4, 3, 87],
  30.   [4, 4, 95],
  32.   [5, 0, 88],
  33.   [5, 1, 32],
  34.   [5, 2, 12],
  35.   [5, 3, 69],
  36.   [5, 4, 20],
  38.   [6, 0, 93],
  39.   [6, 1, 44],
  40.   [6, 2, 88],
  41.   [6, 3, 98],
  42.   [6, 4, 96],
  44.   [7, 0, 31],
  45.   [7, 1, 19],
  46.   [7, 2, 82],
  47.   [7, 3, 32],
  48.   [7, 4, 30],
  50.   [8, 0, 85],
  51.   [8, 1, 97],
  52.   [8, 2, 73],
  53.   [8, 3, 64],
  54.   [8, 4, 84],
  56.   [9, 0, 0],
  57.   [9, 1, 0],
  58.   [9, 2, 0],
  59.   [9, 3, 13],
  60.   [9, 4, 32],
  61. ]
  63. // reduce
  64. const source = data.reduce((prev, next) => {
  65.   const [name, day, sales] = next
  66.   prev = [{name, day, sales}, ...prev] // 倒序
  67.   // prev = [...prev, {name, day, sales}] // 正序
  68.   return prev
  69. }, [])
  71. // for of 迭代
  72. const source = []
  73. for(const key of data) {
  74.   const [name, day, sales] = key
  75.   source.push({name, day, sales})
  76. }

热力图数据格式

  1. [
  2.   { "name": 0, "day": 0, "sales": 50 },
  3.   { "name": 0, "day": 1, "sales": 79 },
  4.   { "name": 0, "day": 2, "sales": 86 },
  5.   { "name": 0, "day": 3, "sales": 24 },
  6.   { "name": 0, "day": 4, "sales": 67 },
  8.   { "name": 1, "day": 0, "sales": 92 },
  9.   { "name": 1, "day": 1, "sales": 58 },
  10.   { "name": 1, "day": 2, "sales": 78 },
  11.   { "name": 1, "day": 3, "sales": 37 },
  12.   { "name": 1, "day": 4, "sales": 48 },
  14.   { "name": 2, "day": 0, "sales": 35 },
  15.   { "name": 2, "day": 1, "sales": 85 },
  16.   { "name": 2, "day": 2, "sales": 23 },
  17.   { "name": 2, "day": 3, "sales": 64 },
  18.   { "name": 2, "day": 4, "sales": 52 },
  20.   { "name": 3, "day": 0, "sales": 72 },
  21.   { "name": 3, "day": 1, "sales": 32 },
  22.   { "name": 3, "day": 2, "sales": 34 },
  23.   { "name": 3, "day": 3, "sales": 19 },
  24.   { "name": 3, "day": 4, "sales": 16 },
  26.   { "name": 4, "day": 0, "sales": 38 },
  27.   { "name": 4, "day": 1, "sales": 56 },
  28.   { "name": 4, "day": 2, "sales": 88 },
  29.   { "name": 4, "day": 3, "sales": 87 },
  30.   { "name": 4, "day": 4, "sales": 95 },
  32.   { "name": 5, "day": 0, "sales": 88 },
  33.   { "name": 5, "day": 1, "sales": 32 },
  34.   { "name": 5, "day": 2, "sales": 12 },
  35.   { "name": 5, "day": 3, "sales": 69 },
  36.   { "name": 5, "day": 4, "sales": 20 },
  38.   { "name": 6, "day": 0, "sales": 93 },
  39.   { "name": 6, "day": 1, "sales": 44 },
  40.   { "name": 6, "day": 2, "sales": 88 },
  41.   { "name": 6, "day": 3, "sales": 98 },
  42.   { "name": 6, "day": 4, "sales": 96 },
  44.   { "name": 7, "day": 0, "sales": 31 },
  45.   { "name": 7, "day": 1, "sales": 19 },
  46.   { "name": 7, "day": 2, "sales": 82 },
  47.   { "name": 7, "day": 3, "sales": 32 },
  48.   { "name": 7, "day": 4, "sales": 30 },
  50.   { "name": 8, "day": 0, "sales": 85 },
  51.   { "name": 8, "day": 1, "sales": 97 },
  52.   { "name": 8, "day": 2, "sales": 73 },
  53.   { "name": 8, "day": 3, "sales": 64 },
  54.   { "name": 8, "day": 4, "sales": 84 },
  56.   { "name": 9, "day": 0, "sales": 0 },
  57.   { "name": 9, "day": 1, "sales": 0 },
  58.   { "name": 9, "day": 2, "sales": 0 },
  59.   { "name": 9, "day": 3, "sales": 13 },
  60.   { "name": 9, "day": 4, "sales": 32 }
  61. ]

echarts热力图