https://echarts.apache.org/examples/zh/editor.html?c=heatmap-cartesian&lang=js
热力图原型 http://demo.skywalking.apache.org/

Heatmap按需引入

image.png

  1. import React, { useRef, useEffect } from 'react';
  2. import {number} from 'prop-types';
  4. import * as echarts from 'echarts/core';
  5. import {
  6.   TooltipComponent,
  7.   GridComponent,
  8.   VisualMapComponent
  9. } from 'echarts/components';
  10. import { HeatmapChart } from 'echarts/charts';
  11. import { CanvasRenderer } from 'echarts/renderers';
  13. echarts.use([
  14.   TooltipComponent,
  15.   GridComponent,
  16.   VisualMapComponent,
  17.   HeatmapChart,
  18.   CanvasRenderer
  19. ]);

formatter

image.png
tooltip格式化

  1. {
  2.   tooltip: {
  3.     position: 'top',
  4.     textStyle: {
  5.       fontSize: 13,
  6.       color: '#ccc',
  7.     },
  8.     formatter: a => {
  9.       console.log('a', a)
  10.       const [, start, end] = a.data || [];
  11.       return `${start * 100}${unit} [${end}]`;
  12.     },
  13.   },
  14. }

util.js

  1. export const colorBox = [
  2.   '#ffffff',
  3.   '#FDF0F0',
  4.   '#FAE2E2',
  5.   '#F8D3D3',
  6.   '#F6C4C4',
  7.   '#F4B5B5',
  8.   '#F1A7A7',
  9.   '#EF9898',
  10.   '#E86C6C',
  11.   '#E44E4E',
  12.   '#E23F3F',
  13.   '#DF3131',
  14.   '#DD2222',
  15.   '#CE2020',
  16.   '#C01D1D',
  17.   '#B11B1B',
  18.   '#A21919',
  19.   '#851414',
  20.   '#761212',
  21.   '#671010',
  22. ];
  24. export function generatePieces(maxValue, colorBox, minItem) {
  25.   console.log('max', maxValue, 'min', minItem)
  26.   if (maxValue < minItem) {
  27.     return [];
  28.   }
  29.   const pieces = [];
  30.   let quotient = 1;
  31.   let temp = {};
  32.   temp.max = minItem;
  33.   temp.min = minItem;
  34.   temp.color = colorBox[0];
  35.   pieces.push(temp);
  36.   if (maxValue && maxValue >= 19) {
  37.     quotient = Math.floor(maxValue / 19);
  38.     for (let i = 1; i < 20; i++) {
  39.       temp = {};
  40.       if (i === 1) {
  41.         temp.min = minItem;
  42.       } else {
  43.         temp.min = quotient * (i - 1);
  44.       }
  45.       temp.max = quotient * i;
  46.       temp.color = colorBox[i];
  47.       pieces.push(temp);
  48.     }
  49.   }
  50.   const length = pieces.length;
  51.   if (length) {
  52.     const item = pieces[length - 1];
  53.     item.max = maxValue;
  54.   }
  55.   return pieces;
  56. }

heatmapData

后台返回的数据

后台返回的扁平化，热力图数据，需要转换成，热力图格式的数据。

  1. {
  2.   "values": [
  3.     {
  4.       "id": "all_heatmap_20210918",
  5.       "values": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
  6.     },
  7.     {
  8.       "id": "all_heatmap_20210919",
  9.       "values": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
  10.     },
  11.     {
  12.       "id": "all_heatmap_20210920",
  13.       "values": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
  14.     },
  15.     {
  16.       "id": "all_heatmap_20210921",
  17.       "values": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
  18.     },
  19.     {
  20.       "id": "all_heatmap_20210922",
  21.       "values": [
  22.         32650, 54, 19, 16, 19, 7, 8, 2, 4, 0, 2, 2, 2, 0, 0, 0, 0, 1, 0, 0, 0
  23.       ]
  24.     }
  25.   ],
  26.   "buckets": [
  27.     { "min": "0", "max": "100" },
  28.     { "min": "100", "max": "200" },
  29.     { "min": "200", "max": "300" },
  30.     { "min": "300", "max": "400" },
  31.     { "min": "400", "max": "500" },
  32.     { "min": "500", "max": "600" },
  33.     { "min": "600", "max": "700" },
  34.     { "min": "700", "max": "800" },
  35.     { "min": "800", "max": "900" },
  36.     { "min": "900", "max": "1000" },
  37.     { "min": "1000", "max": "1100" },
  38.     { "min": "1100", "max": "1200" },
  39.     { "min": "1200", "max": "1300" },
  40.     { "min": "1300", "max": "1400" },
  41.     { "min": "1400", "max": "1500" },
  42.     { "min": "1500", "max": "1600" },
  43.     { "min": "1600", "max": "1700" },
  44.     { "min": "1700", "max": "1800" },
  45.     { "min": "1800", "max": "1900" },
  46.     { "min": "1900", "max": "2000" },
  47.     { "min": "2000", "max": "infinite+" }
  48.   ]
  49. }

转换成热力图的数据

  1. export function heatmapSource({ buckets, values }) {
  2.   const nodes = values.reduce((prev, next, x) => {
  3.     const { values: arr } = next;
  4.     const grids = arr.map((val, y) => [x, y, val]);
  5.     prev.push(...grids);
  6.     return prev;
  7.   }, []);
  9.   const _buckets = [
  10.     buckets[0]?.min,
  11.     ...buckets.map(it => it.max),
  12.   ];
  14.   return { nodes, buckets: _buckets };
  15. }

转换后的数据
image.png

渲染热力图的数据

  1. {
  2.   "buckets":[
  3.     "0","100","200","300","400","500","600","700","800","900",
  4.     "1000","1100","1200","1300","1400","1500","1600","1700","1800",
  5.     "1900","2000","infinite+"
  6.   ],
  7.   "nodes":[
  8.     [0,0,1485],
  9.     [0,1,104],
  10.     [0,2,124],
  11.     [0,3,195],[0,4,269],[0,5,277],[0,6,386],[0,7,451],[0,8,486],[0,9,541],[0,10,581],[0,11,639],[0,12,715],[0,13,688],[0,14,774],[0,15,681],[0,16,825],[0,17,796],[0,18,984],[0,19,953],[0,20,18316],[1,0,2485],[1,1,112],[1,2,158],[1,3,227],[1,4,256],[1,5,321],[1,6,372],[1,7,438],[1,8,513],[1,9,646],[1,10,641],[1,11,670],[1,12,716],[1,13,769],[1,14,733],[1,15,867],[1,16,760],[1,17,908],[1,18,970],[1,19,1017],[1,20,18002],[2,0,3181],[2,1,99],[2,2,172],[2,3,198],[2,4,278],[2,5,329],[2,6,404],[2,7,428],[2,8,495],[2,9,529],[2,10,666],[2,11,656],[2,12,674],[2,13,694],[2,14,780],[2,15,786],[2,16,804],[2,17,870],[2,18,865],[2,19,902],[2,20,18242],[3,0,641],[3,1,116],[3,2,150],[3,3,166],[3,4,264],[3,5,300],[3,6,382],[3,7,427],[3,8,517],[3,9,552],[3,10,654],[3,11,646],[3,12,672],[3,13,612],[3,14,776],[3,15,719],[3,16,860],[3,17,901],[3,18,947],[3,19,915],[3,20,18046],[4,0,1554],[4,1,90],[4,2,145],[4,3,193],[4,4,271],[4,5,337],[4,6,385],[4,7,431],[4,8,519],[4,9,581],[4,10,569],[4,11,679],[4,12,641],[4,13,732],[4,14,791],[4,15,873],[4,16,840],[4,17,865],[4,18,862],[4,19,984],[4,20,17955],[5,0,119476],[5,1,622],[5,2,230],[5,3,145],[5,4,89],[5,5,73],[5,6,43],[5,7,23],[5,8,30],[5,9,5],[5,10,14],[5,11,17],[5,12,10],[5,13,13],[5,14,12],[5,15,10],[5,16,14],[5,17,16],[5,18,19],[5,19,7],[5,20,219],[6,0,3430],[6,1,90],[6,2,149],[6,3,210],[6,4,287],[6,5,311],[6,6,420],[6,7,442],[6,8,480],[6,9,626],[6,10,612],[6,11,642],[6,12,666],[6,13,746],[6,14,838],[6,15,749],[6,16,794],[6,17,859],[6,18,959],[6,19,905],[6,20,18200],[7,0,842],[7,1,93],[7,2,165],[7,3,218],[7,4,274],[7,5,356],[7,6,432],[7,7,448],[7,8,512],[7,9,515],[7,10,606],[7,11,617],[7,12,628],[7,13,711],[7,14,756],[7,15,770],[7,16,824],[7,17,841],[7,18,938],[7,19,937],[7,20,18205],[8,0,119613],[8,1,683],[8,2,263],[8,3,147],[8,4,74],[8,5,86],[8,6,59],[8,7,37],[8,8,12],[8,9,23],[8,10,15],[8,11,22],[8,12,13],[8,13,19],[8,14,18],[8,15,24],[8,16,20],[8,17,16],[8,18,29],[8,19,9],[8,20,354],[9,0,2683],[9,1,103],[9,2,126],[9,3,209],[9,4,265],[9,5,318],[9,6,372],[9,7,461],[9,8,424],[9,9,558],[9,10,652],[9,11,617],[9,12,643],[9,13,653],[9,14,716],[9,15,796],[9,16,778],[9,17,812],[9,18,906],[9,19,949],[9,20,17942],[10,0,218],[10,1,74],[10,2,153],[10,3,223],[10,4,256],[10,5,317],[10,6,361],[10,7,437],[10,8,506],[10,9,567],[10,10,526],[10,11,609],[10,12,682],[10,13,723],[10,14,833],[10,15,829],[10,16,804],[10,17,846],[10,18,909],[10,19,931],[10,20,18208],[11,0,1166],[11,1,88],[11,2,157],[11,3,214],[11,4,263],[11,5,347],[11,6,414],[11,7,438],[11,8,476],[11,9,550],[11,10,550],[11,11,669],[11,12,632],[11,13,792],[11,14,726],[11,15,815],[11,16,935],[11,17,809],[11,18,934],[11,19,946],[11,20,18138],[12,0,121400],[12,1,639],[12,2,246],[12,3,121],[12,4,53],[12,5,44],[12,6,36],[12,7,29],[12,8,19],[12,9,7],[12,10,3],[12,11,3],[12,12,5],[12,13,7],[12,14,5],[12,15,3],[12,16,1],[12,17,4],[12,18,6],[12,19,0],[12,20,10],[13,0,16],[13,1,99],[13,2,155],[13,3,221],[13,4,287],[13,5,350],[13,6,415],[13,7,436],[13,8,519],[13,9,579],[13,10,584],[13,11,692],[13,12,624],[13,13,733],[13,14,688],[13,15,759],[13,16,902],[13,17,932],[13,18,897],[13,19,869],[13,20,18157],[14,0,96],[14,1,68],[14,2,150],[14,3,235],[14,4,245],[14,5,319],[14,6,330],[14,7,425],[14,8,456],[14,9,593],[14,10,652],[14,11,616],[14,12,678],[14,13,795],[14,14,766],[14,15,782],[14,16,761],[14,17,841],[14,18,829],[14,19,969],[14,20,18230],[15,0,37],[15,1,83],[15,2,131],[15,3,249],[15,4,265],[15,5,384],[15,6,377],[15,7,454],[15,8,486],[15,9,599],[15,10,650],[15,11,677],[15,12,635],[15,13,712],[15,14,779],[15,15,748],[15,16,876],[15,17,830],[15,18,923],[15,19,983],[15,20,18052],[16,0,18],[16,1,88],[16,2,169],[16,3,199],[16,4,249],[16,5,316],[16,6,417],[16,7,414],[16,8,582],[16,9,608],[16,10,640],[16,11,625],[16,12,730],[16,13,640],[16,14,756],[16,15,818],[16,16,801],[16,17,903],[16,18,869],[16,19,990],[16,20,18145],[17,0,120198],[17,1,690],[17,2,254],[17,3,141],[17,4,90],[17,5,69],[17,6,29],[17,7,27],[17,8,11],[17,9,15],[17,10,21],[17,11,15],[17,12,14],[17,13,10],[17,14,10],[17,15,14],[17,16,11],[17,17,16],[17,18,12],[17,19,12],[17,20,192],[18,0,3387],[18,1,115],[18,2,148],[18,3,215],[18,4,282],[18,5,295],[18,6,408],[18,7,433],[18,8,470],[18,9,572],[18,10,622],[18,11,643],[18,12,664],[18,13,726],[18,14,735],[18,15,828],[18,16,894],[18,17,894],[18,18,901],[18,19,921],[18,20,18211],[19,0,686],[19,1,69],[19,2,159],[19,3,194],[19,4,295],[19,5,361],[19,6,353],[19,7,439],[19,8,513],[19,9,622],[19,10,625],[19,11,641],[19,12,655],[19,13,720],[19,14,753],[19,15,814],[19,16,810],[19,17,852],[19,18,944],[19,19,1010],[19,20,18052],[20,0,1264],[20,1,93],[20,2,112],[20,3,210],[20,4,297],[20,5,284],[20,6,380],[20,7,450],[20,8,532],[20,9,487],[20,10,621],[20,11,710],[20,12,723],[20,13,744],[20,14,811],[20,15,846],[20,16,884],[20,17,927],[20,18,954],[20,19,897],[20,20,17969],[21,0,121140],[21,1,610],[21,2,256],[21,3,123],[21,4,87],[21,5,63],[21,6,37],[21,7,22],[21,8,13],[21,9,35],[21,10,10],[21,11,13],[21,12,18],[21,13,20],[21,14,22],[21,15,5],[21,16,17],[21,17,19],[21,18,9],[21,19,21],[21,20,379],[22,0,3028],[22,1,88],[22,2,139],[22,3,221],[22,4,244],[22,5,280],[22,6,369],[22,7,447],[22,8,473],[22,9,561],[22,10,632],[22,11,618],[22,12,674],[22,13,761],[22,14,870],[22,15,721],[22,16,807],[22,17,849],[22,18,892],[22,19,928],[22,20,17740],[23,0,688],[23,1,91],[23,2,157],[23,3,204],[23,4,285],[23,5,322],[23,6,377],[23,7,465],[23,8,527],[23,9,538],[23,10,613],[23,11,668],[23,12,719],[23,13,753],[23,14,734],[23,15,887],[23,16,809],[23,17,841],[23,18,971],[23,19,871],[23,20,18125],[24,0,1393],[24,1,43],[24,2,68],[24,3,95],[24,4,145],[24,5,134],[24,6,157],[24,7,198],[24,8,237],[24,9,191],[24,10,252],[24,11,285],[24,12,316],[24,13,280],[24,14,357],[24,15,314],[24,16,359],[24,17,342],[24,18,371],[24,19,414],[24,20,7512]
  12.   ]
  13. }