创新互联ECharts教程：Treemap在ECharts中的使用

Treemap 是一种常见的表达层级数据和树状数据的可视化形式。它主要表示了由一个 Tree 状结构转化为平面空间矩形的状态，就像一张地图，通过面积的方式，便于突出展现出树的各层级中重要的节点。

成都创新互联是专业的肃北网站建设公司，肃北接单;提供做网站、网站设计,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行肃北网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

示例：

点击编辑实例 》》

视觉映射：

treemap 首先是把数值映射到面积这种视觉元素上。

此外，也支持对数据的其他维度进行视觉映射，例如映射到颜色、颜色明暗度上。

关于视觉设置，详见 series-treemap.levels。

下钻（drill down）：

drill down 功能即点击后才展示子层级。 设置了 leafDepth 后，下钻（drill down）功能开启。

如下是 drill down 的例子：

点击编辑实例 》》

注：treemap 的配置项 和 ECharts2 相比有一些变化，一些不太成熟的配置方式不再支持或不再兼容：

• center/size 方式的定位不再支持，而是统一使用 left/top/bottom/right/width/height 方式定位。
• breadcrumb 的配置被移动到了 itemStyle.normal/itemStyle.emphasis 外部，和 itemStyle 平级。
• root 的设置暂时不支持。目前可以使用 zoom 的方式来查看树更下层次的细节，或者使用 leafDepth 开启 "drill down" 功能。
• label 的配置被移动到了 itemStyle.normal/itemStyle.emphasis 外部，和 itemStyle 平级。
• itemStyle.normal.childBorderWidth、itemStyle.normal.childBorderColor 不再支持（因为这个配置方式只能定义两层的 treemap）。统一使用 series-treemap.levels 来进行各层级的定义。

本文标题：创新互联ECharts教程：Treemap在ECharts中的使用
网页链接：http://www.shufengxianlan.com/qtweb/news13/58063.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联