如何移除ECharts热力图中的所有背景着色与颜色

问题描述 #

我尝试渲染一款在网格/图表框架内无背景色的ECharts热力图，已经把各类相关属性设为false或transparent，但没效果。现在图表有灰色交替网格线和着色，我想移除这些元素，得到一个无背景、无着色的空图表。原代码如下：

function App(){
   return (
      <EChart
         backgroundColor={'transparent'} // Remove background color
         tooltip={{
            //position: 'top'
            show: false
         }}
         style={{
            height: '600px',
            width: '40%'
         }}
         grid={{
            show: false,
            background: 'transparent'
            //height: '50%',
            //top: '10%'
         }}
         xAxis={{
            type: 'category',
            data: days,
            splitArea: {
               show: true
            }
         }}
         yAxis={{
            type: 'category',
            data: hours,
            splitArea: {
               show: true
            }
         }}
         visualMap={{
            min: 0,
            max: 10,
            calculable: true,
            orient: 'horizontal',
            left: 'center',
            bottom: '0%',
            textStyle: {
               color: 'white'
            },
            inRange: {
               color: ['#f6ffed', '#b7eb8f', '#73d13d', '#389e0d', '#135200'] // Custom color palette try https://ant.design/docs/spec/colors#programmatic-usage
            }
         }}
         textStyle={{
            color: 'white'
         }}
         series={[
            {
               name: 'Tweets By Day By Hour',
               type: 'heatmap',
               data: data,
               shading: false,
               itemStyle: {
                  color: 'transparent' // Make background bars transparent
               },
               label: {
                  show: true,
                  color: 'black'
               },
               emphasis: {
                  itemStyle: {
                     shadowBlur: 10,
                     shadowColor: 'transparent',
                     color: 'transparent'
                  }
               }
            }
         ]}
      />
   )
}

修改方案 #

要实现完全无背景、无网格着色的空热力图，调整以下关键配置：

• 关闭网格交替区域：x轴和y轴的splitArea.show设为false，这是灰色交替网格的直接来源。
• 移除视觉映射组件：如果不需要颜色映射，直接注释或删除visualMap配置，避免它影响热力图的着色逻辑；如果需要保留组件但隐藏，添加visualMap.show: false。
• 优化热力图系列样式：将label.show设为false（不需要文字时），同时添加emphasis.disabled: true禁用hover高亮效果，避免样式干扰。
• 隐藏坐标轴元素（可选）：如果连坐标轴都不需要显示，给x轴和y轴分别添加axisLine.show: false、axisTick.show: false、axisLabel.show: false。

修改后的完整代码 #

function App(){
   return (
      <EChart
         backgroundColor={'transparent'}
         tooltip={{
            show: false
         }}
         style={{
            height: '600px',
            width: '40%'
         }}
         grid={{
            show: false,
            background: 'transparent'
         }}
         xAxis={{
            type: 'category',
            data: days,
            splitArea: {
               show: false // 关闭x轴网格交替区域
            },
            axisLine: { show: false }, // 隐藏x轴线条
            axisTick: { show: false }, // 隐藏x轴刻度
            axisLabel: { show: false } // 隐藏x轴标签
         }}
         yAxis={{
            type: 'category',
            data: hours,
            splitArea: {
               show: false // 关闭y轴网格交替区域
            },
            axisLine: { show: false }, // 隐藏y轴线条
            axisTick: { show: false }, // 隐藏y轴刻度
            axisLabel: { show: false } // 隐藏y轴标签
         }}
         // 不需要视觉映射则注释/删除此段配置
         // visualMap={{
         //    min: 0,
         //    max: 10,
         //    calculable: true,
         //    orient: 'horizontal',
         //    left: 'center',
         //    bottom: '0%',
         //    textStyle: {
         //       color: 'white'
         //    },
         //    inRange: {
         //       color: ['#f6ffed', '#b7eb8f', '#73d13d', '#389e0d', '#135200']
         //    }
         // }}
         textStyle={{
            color: 'white'
         }}
         series={[
            {
               name: 'Tweets By Day By Hour',
               type: 'heatmap',
               data: data,
               shading: false,
               itemStyle: {
                  color: 'transparent'
               },
               label: {
                  show: false // 隐藏标签文字
               },
               emphasis: {
                  disabled: true // 禁用hover高亮
               }
            }
         ]}
      />
   )
}

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