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
相关产品推荐
相关产品推荐

