146Echarts - 矩形树图(Basic Treemap)

简介: 146Echarts - 矩形树图(Basic Treemap)
效果图

源代码
option = {
    series: [{
        type: 'treemap',
        data: [{
            name: 'nodeA',            // First tree
            value: 10,
            children: [{
                name: 'nodeAa',       // First leaf of first tree
                value: 4
            }, {
                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月前
|
存储 JavaScript 数据可视化
vue3+echarts应用——深度遍历html的dom结构并用树图进行可视化
vue3+echarts应用——深度遍历html的dom结构并用树图进行可视化
164 1
152Echarts - 旭日图(Basic Sunburst)
152Echarts - 旭日图(Basic Sunburst)
66 0
147Echarts - 矩形树图(Gradient Mapping)
147Echarts - 矩形树图(Gradient Mapping)
65 0
145Echarts - 矩形树图(Show Parent Labels)
145Echarts - 矩形树图(Show Parent Labels)
74 0
|
3月前
|
资源调度 Apache 容器
Vue3使用echarts树图(tree)
本文介绍了如何在 Vue2 项目中使用 Echarts 实现树图(tree)功能。通过按需引入 Echarts 组件和相关依赖,文章详细展示了如何创建一个可自定义配置的树图组件 `TreeChart.vue`,包括树图数据源、容器尺寸、主题色等属性。此外,还提供了在线预览效果及代码示例,帮助读者快速实现树图功能。适用于需要展示层次结构数据的场景。
119 1
Vue3使用echarts树图(tree)
|
3月前
|
资源调度 JavaScript Apache
Vue2使用echarts树图(tree)
这篇文章介绍了如何在Vue 3框架中集成echarts库来创建一个树状图(Tree Chart)组件,支持自定义数据和交互事件。
146 0
Vue2使用echarts树图(tree)
163Echarts - 桑基图(Basic Sankey)
163Echarts - 桑基图(Basic Sankey)
76 0
157Echarts - 平行坐标系(Basic Parallel)
157Echarts - 平行坐标系(Basic Parallel)
38 0
144Echarts - 矩形树图(How $3.7 Trillion is Spent)
144Echarts - 矩形树图(How $3.7 Trillion is Spent)
48 0
143Echarts - 矩形树图(ECharts Option Query)
143Echarts - 矩形树图(ECharts Option Query)
63 0