ECharts设置Treemap属性

Treemap是一种常见的表达『层级数据』『树状数据』的可视化形式。它主要用面积的方式,便于突出展现出『树』的各层级中重要的节点。
目的:绘制Treemap,使得矩形的大小、颜色深浅分别代表不同的信息。
构思:Treemap首先会把数值映射到面积上,利用层级关系可以实现视觉映射,但因为要显示的数据大小、颜色没有关系,所以不考虑这种方法,考虑用visualMap来实现。
最终实现:Treemap 默认把第一个维度(Array 第一项)映射到『面积』上,决定把其他的某一个维度,映射到visualMap上。

          visualMap: [{
            type: 'continuous',//连续型
            dimension: 2,//对应的数组维度
            show: false,//颜色范围选择的小工具不显示
            min: Math.min(...arr),
            max: Math.max(...arr), //数组最大、最小值设定为颜色范围
            color: ['rgb(31, 66, 90)', 'rgb(108, 144, 166)', 'rgb(250, 250, 250)'],//颜色过渡,可自选
          }],

你可能感兴趣的:(ECharts设置Treemap属性)