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

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

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
                }]
            }]
        }]
    }]

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

### Echarts 树状图节点自定义 #### 定义树图的样式和行为 为了实现更复杂的视觉效果,可以利用 `itemStyle` 和 `label` 属性来自定义每个节点的颜色、字体和其他外观属性[^2]。 对于更加动态的行为定制,比如交互响应,则可以通过监听事件并编写回调函数的方式完成。ECharts 支持多种类型的图表事件处理机制,允许开发者针对用户的操作作出即时反馈。 ```javascript // 初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); option = { series: [{ type: 'tree', data: [yourData], top: '1%', left: '7%', bottom: '1%', right: '20%', symbolSize: 10, initialTreeDepth: -1, // 显示全部层级 label: { position: 'left', verticalAlign: 'middle', align: 'right', fontSize: 9 }, itemStyle: { borderColor: '#fff' }, leaves: { // 叶子结点设置 label: { normal: { position: 'right', verticalAlign: 'middle', align: 'left' } } }, expandAndCollapse: true, animationDuration: 550, animationDurationUpdate: 750 }] }; myChart.setOption(option); ``` 此代码片段展示了如何创建一个基本的树形结构,并设置了部分可视化选项,如节点颜色(`itemStyle`)、标签位置(`label`)等。此外还启用了折叠/展开功能(`expandAndCollapse`)以便于查看不同层次的内容。 如果想要进一步控制树的整体尺寸及其相对于容器的位置,虽然标准 API 中确实只提供了根节点定位的功能,但是可以通过获取底层 ZRender 实例来进行更多细节上的调整[^1]: ```javascript var zr = myChart.getZrender(); zr.resize({ width: newWidth, height: newHeight }); ``` 上述方法能够改变整个渲染区域大小,从而间接影响到内部元素的实际呈现比例与分布情况。
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值