143Echarts - 矩形树图(ECharts Option Query)

简介: 143Echarts - 矩形树图(ECharts Option Query)
效果图

源代码
var uploadedDataURL = "data/asset/data/ec-option-doc-statistics-201604.json";
myChart.showLoading();
$.getJSON(uploadedDataURL, function (rawData) {
    myChart.hideLoading();
    function convert(source, target, basePath) {
        for (var key in source) {
            var path = basePath ? (basePath + '.' + key) : key;
            if (key.match(/^\$/)) {
            }
            else {
                target.children = target.children || [];
                var child = {
                    name: path
                };
                target.children.push(child);
                convert(source[key], child, path);
            }
        }
        if (!target.children) {
            target.value = source.$count || 1;
        }
        else {
            target.children.push({
                name: basePath,
                value: source.$count
            });
        }
    }
    var data = [];
    convert(rawData, data, '');
    myChart.setOption(option = {
        title: {
            text: 'ECharts 配置项查询分布',
            subtext: '2016/04',
            left: 'leafDepth'
        },
        tooltip: {},
        series: [{
            name: 'option',
            type: 'treemap',
            visibleMin: 300,
            data: data.children,
            leafDepth: 2,
            levels: [
                {
                    itemStyle: {
                        normal: {
                            borderColor: '#555',
                            borderWidth: 4,
                            gapWidth: 4
                        }
                    }
                },
                {
                    colorSaturation: [0.3, 0.6],
                    itemStyle: {
                        normal: {
                            borderColorSaturation: 0.7,
                            gapWidth: 2,
                            borderWidth: 2
                        }
                    }
                },
                {
                    colorSaturation: [0.3, 0.5],
                    itemStyle: {
                        normal: {
                            borderColorSaturation: 0.6,
                            gapWidth: 1
                        }
                    }
                },
                {
                    colorSaturation: [0.3, 0.5]
                }
            ]
        }]
    })
});
目录
相关文章
|
6月前
|
存储 JavaScript 数据可视化
vue3+echarts应用——深度遍历html的dom结构并用树图进行可视化
vue3+echarts应用——深度遍历html的dom结构并用树图进行可视化
161 1
147Echarts - 矩形树图(Gradient Mapping)
147Echarts - 矩形树图(Gradient Mapping)
62 0
146Echarts - 矩形树图(Basic Treemap)
146Echarts - 矩形树图(Basic Treemap)
203 0
145Echarts - 矩形树图(Show Parent Labels)
145Echarts - 矩形树图(Show Parent Labels)
73 0
|
3月前
|
资源调度 Apache 容器
Vue3使用echarts树图(tree)
本文介绍了如何在 Vue2 项目中使用 Echarts 实现树图(tree)功能。通过按需引入 Echarts 组件和相关依赖,文章详细展示了如何创建一个可自定义配置的树图组件 `TreeChart.vue`,包括树图数据源、容器尺寸、主题色等属性。此外,还提供了在线预览效果及代码示例,帮助读者快速实现树图功能。适用于需要展示层次结构数据的场景。
Vue3使用echarts树图(tree)
|
3月前
|
资源调度 JavaScript Apache
Vue2使用echarts树图(tree)
这篇文章介绍了如何在Vue 3框架中集成echarts库来创建一个树状图(Tree Chart)组件,支持自定义数据和交互事件。
124 0
Vue2使用echarts树图(tree)
144Echarts - 矩形树图(How $3.7 Trillion is Spent)
144Echarts - 矩形树图(How $3.7 Trillion is Spent)
47 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

热门文章

最新文章