You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

ECharts treemap如何修改单个节点的背景颜色?

ECharts Treemap 单个节点背景色修改方法

ECharts treemap 支持自定义单个节点的背景色,直接在data项平级配置color不生效,是属性配置位置或样式优先级问题,按以下规则调整即可:

  • 颜色属性必须配置在节点的itemStyle字段下
    直接给data项加平级color属性不会被识别为矩形填充色,需要将色值写到对应节点的itemStyle.color中,已配置成功的label样式不受影响,可正常保留。参考配置写法:
option = {
  series: [
    {
      type: 'treemap',
      data: [
        {
          name: '目标节点',
          value: 120,
          itemStyle: {
            color: '#2d8cf0' // 此处配置的色值会作为节点矩形的背景填充色生效
          },
          label: {
            color: '#ffffff'
          }
        },
        {
          name: '其他节点',
          value: 80,
          itemStyle: {
            color: '#67c23a'
          }
        }
      ]
    }
  ]
}
  • 配置了visualMap自动映射颜色时,需跳过对应节点的视觉映射规则
    如果treemap绑定了visualMap组件按数值自动分配颜色,自定义的节点颜色会被映射规则覆盖,需要给自定义颜色的节点添加visualMap: false属性,阻断全局颜色映射的优先级:
{
  name: '自定义色节点',
  value: 90,
  visualMap: false, // 关闭该节点的visualMap颜色继承
  itemStyle: {
    color: '#e6a23c'
  }
}
  • 存在多层级嵌套节点时,子节点的itemStyle优先级高于父节点配置,子节点单独配置颜色后不会继承父节点色值。

内容的提问来源于stack exchange,提问作者damienc11

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.31 00:27:25