如何在ECharts热力图单元格右下角显示勾选标记？

要实现confirmed: true的单元格右下角显示勾选标记，需要调整标签的布局逻辑，以下是两种可行方案：

方案一：使用富文本标签实现 #

通过ECharts的富文本（rich）功能，将原标签与勾选标记分离布局，让勾选标记定位到单元格右下角：

option = {
  // 其他配置...
  series: [
    {
      type: 'heatmap',
      data: yourDataSource, // 你的[{x,y,label,confirmed}, ...]数据
      label: {
        show: true,
        position: 'inside',
        formatter: (params) => {
          const { label, confirmed } = params.data;
          if (!confirmed) return label;
          // 用富文本分别控制标签和勾选的位置
          return `{centerLabel|${label}}\n{checkMark|✓}`;
        },
        rich: {
          centerLabel: {
            align: 'center',
            verticalAlign: 'middle',
            fontSize: 12
          },
          checkMark: {
            align: 'right',
            verticalAlign: 'bottom',
            fontSize: 14,
            color: '#2ecc71', // 可选：设置勾选颜色
            padding: [0, 3, 3, 0] // 调整内边距，让勾选贴近右下角
          }
        }
      },
      // 其他系列配置...
    }
  ]
};

方案二：使用标记点（markPoint）实现 #

通过添加标记点，单独为confirmed: true的单元格添加右下角勾选，不影响原标签布局：

option = {
  // 其他配置...
  series: [
    {
      type: 'heatmap',
      data: yourDataSource,
      label: {
        show: true,
        position: 'inside', // 原标签保持居中显示
        formatter: (params) => params.data.label
      },
      // 添加标记点
      markPoint: {
        symbol: '✔', // 勾选符号，也可以用自定义路径
        symbolSize: 14,
        label: {
          show: true,
          color: '#2ecc71',
          fontSize: 14
        },
        // 定位到单元格右下角
        position: 'rightBottom',
        // 动态生成需要显示勾选的标记点数据
        data: yourDataSource
          .filter(item => item.confirmed)
          .map(item => ({
            coord: [item.x, item.y],
            symbolOffset: [4, 4] // 微调偏移，让勾选更贴合角落
          }))
      },
      // 其他系列配置...
    }
  ]
};

关键说明 #

• 方案一适合希望标签与勾选在同一文本容器内的场景，通过富文本的对齐属性实现定位。
• 方案二更灵活，勾选标记独立于原标签，不会影响原标签的布局，适合需要精准控制位置的场景。

内容的提问来源于stack exchange，提问作者F_V