echarts之热力图

非连续型热力图设定

• 指定值显示指定颜色
• 指定颜色有对应的文本
• 可自定义显示文本

实现图表如下

具体代码：

 // 基于准备好的dom，初始化echarts实例
echarts.init(document.getElementById('barPaymentAnalysisBar')).dispose()
let myChart =  echarts.init(document.getElementById("barPaymentAnalysisBar"));
const option = {
  tooltip: {},
  xAxis: {
    type: "category",
    data: [0, 1, 2, 3, 4, 2, 3, 7, 8, 9, 10, 11, 12, 13, 14, 12, 13, 17, 18, 19, 20]
  },
  yAxis: {
    type: "category",
    data: [0, 1, 2, 3, 4, 2, 3, 7, 8, 9, 10, 11, 12, 13, 14, 12, 13, 17, 18, 19]
  },
  tooltip: {
     trigger: 'axis',
     axisPointer: { // 坐标轴指示器，坐标轴触发有效
       type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
     },
     // 自定义tooltip
     formatter: function (item) {
       let res = item[0].name + ':<br/>';
       item.forEach((element, index) => {
         if (element.value === '-') element.value = 0;
         if (index == 3) element.value += '%';
         res += element.marker + element.seriesName + " : " + element.value + '<br />'
       })
       return res
     }
   },
  visualMap: {
    type: "piecewise",
    //特定数据有相对应的数据
    pieces: [
      {value: "3", label: 'aaa', color: '#ccc'}, 
      {value: "2", label: 'bbb', color: 'red'}, 
      {value: "1", label: 'ccc', color: '#409dfe'}, 
   ]
  },
  series: [{
    name: "Gaussian",
    type: "heatmap",
    label:{
      show:true,
      // 自定义 显示文本
      formatter:(params)=>{
        const {label} = params.data;
        return label
      }
    },
    data: [
      {value:[0,0,1],label:"文本"},
      [0, 1, 1],
      [0, 2, 1],
      [0, 3, 1],
      [0, 4, 1],
      [0, 2, 1],
      [0, 3, 1],
      [0, 7, 1],
      [0, 8, 1],
      [0, 9, 1],
      [0, 10, 1],
      [0, 11, 1],
      [0, 12, 1],
      [0, 13, 1],
      [0, 14, 1],
      [0, 12, 1],
      [0, 13, 1],
      [0, 17, 1],
      [0, 18, 1],
      [0, 19, 1],
      [0, 20, 1],
      [1, 0, 2],
      [12, 1, 2],
      [1, 2, 2],
      [1, 3, 2],
      [1, 4, 2],
      [10, 2, 2],
      [1, 3, 2],
      [1, 7, 2],
      [1, 8, 2],
      [1, 9, 3],
      [9, 10, 3],
      [1, 11, 3],
      [1, 12, 3],
      [7, 13, 3],
      [1, 14, 3],
      [1, 12, 3],
      [1, 13, 3],
      [2, 17, 3],
      [1, 18, 3],
      [3, 19, 3],
      [2, 20, 3],
    ],
    emphasis: {
      itemStyle: {
        borderColor: "#333",
        borderWidth: 1
      }
    },
    progressive: 1000,
    animation: false,
   
  }]
}
 // 绘制图表
myChart.setOption(option,true);
 clearInterval(this.tootipTimer);
 this.tootipTimer = tools.loopShowTooltip(myChart, option, {
   interval: 3000, // 轮播间隔时间
   loopSeries: true // 是否开启轮播循环
 });
 window.addEventListener('resize', () => {
   if (myChart) {
     myChart.resize()
   }
 })