echarts 树状表格 自定义配置每块颜色

本文介绍如何在ECharts中为树图配置颜色以展示不同维度的数据,如涨跌幅,并通过颜色深浅来表现程度差异。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

echarts 我用的不多,网上我百度了好多,但是没有一个是我想要的效果,网上的 表格颜色大多是跟着 name(种类) 或者 value(面积) 走的 , 我这边除了这两个维度,这里的还需要把另外的一个参数表现出来,颜色代表了程度。
echart 自带是这样的
这个是我的 在这里插入图片描述
涨跌幅 负的是绿的,正的是红的然后根据颜色深浅表现出来程度,哈哈 功能其实很简单,但是就是百度不到,最后还是去翻文档才找到的 ,话就到这 ,上代码

series: [{
        type: 'treemap',
        data: [{
            name: 'nodeA',            // First tree
            value: 10,
            abb:"iphone", // 这里可以加其他的参数 可以在tooltip 里面拿到
             add:"iphone4s",
             itemStyle: {   // 这里配置每个块的颜色
                    color:'blue' 
                  },
            children: [{
                name: 'nodeAa',       // First leaf of first tree
                value: 4,
                 itemStyle: {
                    color:'green' 
                  },
            }, {
                name: 'nodeAb',       // Second leaf of first tree
                value: 6
            }]
        }, {
            name: 'nodeB',            // Second tree
            value: 20,
            children: [{
                name: 'nodeBa',       // Son of first tree
                value: 20,
                children: [{
                    name: 'nodeBa1',  // Granson of first tree
                    value: 20
                }]
            }]
        }]
    }]

真的很简单,我百度了一下午,害~~

评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值