如何在Echarts热图项目/片段之间添加填充？

Question

我尝试类似于 https://status.wistia.com/ 的设计，所以我想在每个热图的项目/片段之间添加填充。

https://echarts.apache.org/examples/en/editor.html?c=heatmap-cartesian&edit=1&reset=1

我尝试了许多设置，例如 itemGap、padding，但我无法在热图中每个单元格旁边获得空白。

Answer 1

解决方案

ECharts 提供了设置元素格式的选项，允许您为元素添加轮廓，还可以自定义其大小和颜色。我不认为这个解决方案是完美的，但它产生了期望的结果，目前，这是唯一可用的选择

const option = {
  // ...
  series: [{
    itemStyle: {
      borderWidth: 5,
      borderColor: 'rgba(255, 255, 255, 1)',
    },
  }],
  // ...
}

series-heatmap.itemStyle.borderWidth

- ECharts 文档

series-heatmap.itemStyle.borderColor

- ECharts 文档

要使 X 和 Y 轴标签 (

lineStyle

) 可见，您需要使用偏移值将轴移得更远。通过将

axisLine.onZero

设置为 false，轴本身将远离图表，从而防止白色边框阻碍它。

const option = {
  // ...
  xAxis: {
    // set margin between X axis and chart
    offset: 5,// need minimum value of borderWidth or higher
    axisLine: {
      onZero: false,
    }
  },
  yAxis: {
    // set margin between Y axis and chart
    offset: 5, // need minimum value of borderWidth or higher
    axisLine: {
      onZero: false,
    }
  },
  // ...
}

xAxis.offset

- ECharts 文档

xAxis.axisLine.onZero

- ECharts 文档

yAxis.offset

- ECharts 文档

yAxis.axisLine.onZero

- ECharts 文档

示例

/**
 ** Initialize
 */
const chartDom = document.getElementById('chart')
const chart = echarts.init(chartDom)

/**
 ** Data
 */
const data = [
  [0, 0, 5],
  [1, 0, 1],
  [2, 0, "-"],
  [3, 0, "-"],
  [4, 0, "-"],
  [5, 0, "-"],
  [6, 0, "-"],
  [7, 0, "-"],
  [8, 0, "-"],
  [9, 0, "-"],
  [10, 0, "-"],
  [11, 0, 2],
  [12, 0, 4],
  [13, 0, 1],
  [14, 0, 1],
  [15, 0, 3],
  [16, 0, 4],
  [17, 0, 6],
  [18, 0, 4],
  [19, 0, 4],
  [20, 0, 3],
  [21, 0, 3],
  [22, 0, 2],
  [23, 0, 5],
  [0, 1, 7],
  [1, 1, "-"],
  [2, 1, "-"],
  [3, 1, "-"],
  [4, 1, "-"],
  [5, 1, "-"],
  [6, 1, "-"],
  [7, 1, "-"],
  [8, 1, "-"],
  [9, 1, "-"],
  [10, 1, 5],
  [11, 1, 2],
  [12, 1, 2],
  [13, 1, 6],
  [14, 1, 9],
  [15, 1, 11],
  [16, 1, 6],
  [17, 1, 7],
  [18, 1, 8],
  [19, 1, 12],
  [20, 1, 5],
  [21, 1, 5],
  [22, 1, 7],
  [23, 1, 2],
  [0, 2, 1],
  [1, 2, 1],
  [2, 2, "-"],
  [3, 2, "-"],
  [4, 2, "-"],
  [5, 2, "-"],
  [6, 2, "-"],
  [7, 2, "-"],
  [8, 2, "-"],
  [9, 2, "-"],
  [10, 2, 3],
  [11, 2, 2],
  [12, 2, 1],
  [13, 2, 9],
  [14, 2, 8],
  [15, 2, 10],
  [16, 2, 6],
  [17, 2, 5],
  [18, 2, 5],
  [19, 2, 5],
  [20, 2, 7],
  [21, 2, 4],
  [22, 2, 2],
  [23, 2, 4],
  [0, 3, 7],
  [1, 3, 3],
  [2, 3, "-"],
  [3, 3, "-"],
  [4, 3, "-"],
  [5, 3, "-"],
  [6, 3, "-"],
  [7, 3, "-"],
  [8, 3, 1],
  [9, 3, "-"],
  [10, 3, 5],
  [11, 3, 4],
  [12, 3, 7],
  [13, 3, 14],
  [14, 3, 13],
  [15, 3, 12],
  [16, 3, 9],
  [17, 3, 5],
  [18, 3, 5],
  [19, 3, 10],
  [20, 3, 6],
  [21, 3, 4],
  [22, 3, 4],
  [23, 3, 1],
  [0, 4, 1],
  [1, 4, 3],
  [2, 4, "-"],
  [3, 4, "-"],
  [4, 4, "-"],
  [5, 4, 1],
  [6, 4, "-"],
  [7, 4, "-"],
  [8, 4, "-"],
  [9, 4, 2],
  [10, 4, 4],
  [11, 4, 4],
  [12, 4, 2],
  [13, 4, 4],
  [14, 4, 4],
  [15, 4, 14],
  [16, 4, 12],
  [17, 4, 1],
  [18, 4, 8],
  [19, 4, 5],
  [20, 4, 3],
  [21, 4, 7],
  [22, 4, 3],
  [23, 4, "-"],
  [0, 5, 2],
  [1, 5, 1],
  [2, 5, "-"],
  [3, 5, 3],
  [4, 5, "-"],
  [5, 5, "-"],
  [6, 5, "-"],
  [7, 5, "-"],
  [8, 5, 2],
  [9, 5, "-"],
  [10, 5, 4],
  [11, 5, 1],
  [12, 5, 5],
  [13, 5, 10],
  [14, 5, 5],
  [15, 5, 7],
  [16, 5, 11],
  [17, 5, 6],
  [18, 5, "-"],
  [19, 5, 5],
  [20, 5, 3],
  [21, 5, 4],
  [22, 5, 2],
  [23, 5, "-"],
  [0, 6, 1],
  [1, 6, "-"],
  [2, 6, "-"],
  [3, 6, "-"],
  [4, 6, "-"],
  [5, 6, "-"],
  [6, 6, "-"],
  [7, 6, "-"],
  [8, 6, "-"],
  [9, 6, "-"],
  [10, 6, 1],
  [11, 6, "-"],
  [12, 6, 2],
  [13, 6, 1],
  [14, 6, 3],
  [15, 6, 4],
  [16, 6, "-"],
  [17, 6, "-"],
  [18, 6, "-"],
  [19, 6, "-"],
  [20, 6, 1],
  [21, 6, 2],
  [22, 6, 2],
  [23, 6, 6]
]

/**
 ** Option
 */
const option = {
  tooltip: {
    position: 'top'
  },
  grid: {
    height: '50%',
    top: '10%'
  },
  xAxis: {
    type: 'category',
    data: ["12a", "1a", "2a", "3a", "4a", "5a", "6a", "7a", "8a", "9a", "10a", "11a", "12p", "1p", "2p", "3p", "4p", "5p", "6p", "7p", "8p", "9p", "10p", "11p"],
    offset: 5,
    axisLine: {
      onZero: false,
    }
  },
  yAxis: {
    type: 'category',
    data: ["Saturday", "Friday", "Thursday", "Wednesday", "Tuesday", "Monday", "Sunday"],
    offset: 5,
    axisLine: {
      onZero: false,
    }
  },
  visualMap: {
    min: 0,
    max: 10,
    calculable: true,
    orient: 'horizontal',
    left: 'center',
    bottom: '15%'
  },
  series: [
    {
      name: 'Punch Card',
      type: 'heatmap',
      data: data,
      label: {
        show: true
      },
      // Item Default Style
      itemStyle: {
        borderWidth: 5,
        borderColor: 'rgba(255, 255, 255, 1)',
      },
      // When Hover
      emphasis: {
        // Item Hover Style
        itemStyle: {
          borderWidth: 5,
          borderColor: 'rgba(255, 255, 255, 1)',
        }
      }
    }
  ]
}

/**
 ** Render Chart
 */
chart.setOption(option)

<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.2/echarts.min.js" integrity="sha512-VdqgeoWrVJcsDXFlQEKqE5MyhaIgB9yXUVaiUa8DR2J4Lr1uWcFm+ZH/YnzV5WqgKf4GPyHQ64vVLgzqGIchyw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div id="chart" style="width: 800px; height: 300px;"></div>