145Echarts - 矩形树图(Show Parent Labels)

简介: 145Echarts - 矩形树图(Show Parent Labels)
效果图

源代码
myChart.showLoading();
$.get('data/asset/data/disk.tree.json', function (diskData) {
    myChart.hideLoading();
    function colorMappingChange(value) {
        var levelOption = getLevelOption(value);
        chart.setOption({
            series: [{
                levels: levelOption
            }]
        });
    }
    var formatUtil = echarts.format;
    function getLevelOption() {
        return [
            {
                itemStyle: {
                    normal: {
                        borderColor: '#777',
                        borderWidth: 0,
                        gapWidth: 1
                    }
                },
                upperLabel: {
                    normal: {
                        show: false
                    }
                }
            },
            {
                itemStyle: {
                    normal: {
                        borderColor: '#555',
                        borderWidth: 5,
                        gapWidth: 1
                    },
                    emphasis: {
                        borderColor: '#ddd'
                    }
                }
            },
            {
                colorSaturation: [0.35, 0.5],
                itemStyle: {
                    normal: {
                        borderWidth: 5,
                        gapWidth: 1,
                        borderColorSaturation: 0.6
                    }
                }
            }
        ];
    }
    myChart.setOption(option = {
        title: {
            text: 'Disk Usage',
            left: 'center'
        },
        tooltip: {
            formatter: function (info) {
                var value = info.value;
                var treePathInfo = info.treePathInfo;
                var treePath = [];
                for (var i = 1; i < treePathInfo.length; i++) {
                    treePath.push(treePathInfo[i].name);
                }
                return [
                    '<div class="tooltip-title">' + formatUtil.encodeHTML(treePath.join('/')) + '</div>',
                    'Disk Usage: ' + formatUtil.addCommas(value) + ' KB',
                ].join('');
            }
        },
        series: [
            {
                name:'Disk Usage',
                type:'treemap',
                visibleMin: 300,
                label: {
                    show: true,
                    formatter: '{b}'
                },
                upperLabel: {
                    normal: {
                        show: true,
                        height: 30
                    }
                },
                itemStyle: {
                    normal: {
                        borderColor: '#fff'
                    }
                },
                levels: getLevelOption(),
                data: diskData
            }
        ]
    });
});
目录
相关文章
|
6月前
|
存储 JavaScript 数据可视化
vue3+echarts应用——深度遍历html的dom结构并用树图进行可视化
vue3+echarts应用——深度遍历html的dom结构并用树图进行可视化
162 1
147Echarts - 矩形树图(Gradient Mapping)
147Echarts - 矩形树图(Gradient Mapping)
62 0
146Echarts - 矩形树图(Basic Treemap)
146Echarts - 矩形树图(Basic Treemap)
204 0
|
3月前
|
资源调度 Apache 容器
Vue3使用echarts树图(tree)
本文介绍了如何在 Vue2 项目中使用 Echarts 实现树图(tree)功能。通过按需引入 Echarts 组件和相关依赖,文章详细展示了如何创建一个可自定义配置的树图组件 `TreeChart.vue`,包括树图数据源、容器尺寸、主题色等属性。此外,还提供了在线预览效果及代码示例,帮助读者快速实现树图功能。适用于需要展示层次结构数据的场景。
101 1
Vue3使用echarts树图(tree)
|
3月前
|
资源调度 JavaScript Apache
Vue2使用echarts树图(tree)
这篇文章介绍了如何在Vue 3框架中集成echarts库来创建一个树状图(Tree Chart)组件,支持自定义数据和交互事件。
129 0
Vue2使用echarts树图(tree)
144Echarts - 矩形树图(How $3.7 Trillion is Spent)
144Echarts - 矩形树图(How $3.7 Trillion is Spent)
47 0
143Echarts - 矩形树图(ECharts Option Query)
143Echarts - 矩形树图(ECharts Option Query)
62 0
|
11月前
142Echarts - 矩形树图(Disk Usage)
142Echarts - 矩形树图(Disk Usage)
34 0
141Echarts - 树图(From Top to Bottom Tree)
141Echarts - 树图(From Top to Bottom Tree)
53 0
140Echarts - 树图(Radial Tree)
140Echarts - 树图(Radial Tree)
46 0