tree环ECharts Gallery

20:11:45图表已生成
代码
var data = [{
    "name": "主机信息",
    "children": [{
        "name": "主机总数",
        "children": [{
            "name": "linux",
            "value": 50
        }, {
            "name": "unix",
            "value": 21
        }, {
            "name": "windows",
            "value": 12
        }]
    }]
}, {
    "name": "人脸识别",
    "children": [{
        "name": "在线用户数",
        "children": [{
            "name": "一次",
            "value": 4
        }, {
            "name": "三次",
            "value": 0
        }, {
            "name": "二次",
            "value": 2
        }, {
            "name": "五次以上",
            "value": 0
        }, {
            "name": "四次",
            "value": 0
        }, {
            "name": "未使用",
            "value": 0
        }]
    }, {
        "name": "布控数",
        "children": [{
            "name": "已撤控",
            "value": 1
        }, {
            "name": "布控中",
            "value": 4
        }, {
            "name": "布控到期",
            "value": 1
        }, {
            "name": "未布控",
            "value": 1
        }]
    }, {
        "name": "用户数",
        "children": [{
            "name": "一次",
            "value": 10
        }, {
            "name": "三次",
            "value": 0
        }, {
            "name": "二次",
            "value": 3
        }, {
            "name": "五次以上",
            "value": 0
        }, {
            "name": "四次",
            "value": 0
        }, {
            "name": "未使用",
            "value": 1
        }]
    }]
}, {
    "name": "基础平台",
    "children": [{
        "name": "在线用户数",
        "children": [{
            "name": "一次",
            "value": 5
        }, {
            "name": "三次",
            "value": 0
        }, {
            "name": "二次",
            "value": 2
        }, {
            "name": "五次以上",
            "value": 0
        }, {
            "name": "四次",
            "value": 0
        }, {
            "name": "未使用",
            "value": 0
        }]
    }, {
        "name": "用户总数",
        "children": [{
            "name": "一次",
            "value": 12
        }, {
            "name": "三次",
            "value": 0
        }, {
            "name": "二次",
            "value": 3
        }, {
            "name": "五次以上",
            "value": 0
        }, {
            "name": "四次",
            "value": 0
        }, {
            "name": "未使用",
            "value": 0
        }]
    }, {
        "name": "设备在线数",
        "children": [{
            "name": "一类点",
            "value": 9
        }, {
            "name": "二类点",
            "value": 5
        }, {
            "name": "外接单位",
            "value": 1
        }]
    }, {
        "name": "设备总数",
        "children": [{
            "name": "一类点",
            "value": 9
        }, {
            "name": "二类点",
            "value": 5
        }, {
            "name": "外接单位",
            "value": 2
        }]
    }]
}, {
    "name": "安全平台",
    "children": [{
        "name": "在线数",
        "value": 7
    }, {
        "name": "安全边界 ",
        "value": 107
    }, {
        "name": "用户数",
        "children": [{
            "name": "一次",
            "value": 12
        }, {
            "name": "三次",
            "value": 0
        }, {
            "name": "二次",
            "value": 3
        }, {
            "name": "五次以上",
            "value": 0
        }, {
            "name": "四次",
            "value": 0
        }, {
            "name": "未使用",
            "value": 0
        }]
    }, {
        "name": "资产统计",
        "value": 5818
    }]
}, {
    "name": "容器信息",
    "children": [{
        "name": "容器总数",
        "children": [{
            "name": "test",
            "value": 7
        }, {
            "name": "多维视频感知平台",
            "value": 4
        }]
    }]
}, {
    "name": "移动猎鹰",
    "children": [{
        "name": "建群数",
        "value": 304
    }, {
        "name": "查人数",
        "value": 8403
    }, {
        "name": "查车数",
        "value": 8645
    }, {
        "name": "活跃数",
        "value": 14949
    }, {
        "name": "用户总数",
        "children": [{
            "name": "在线数",
            "value": 7
        }, {
            "name": "离线数",
            "value": 7
        }]
    }, {
        "name": "留存率",
        "value": 35.26
    }, {
        "name": "驻车采集数",
        "value": 2930
    }]
}, {
    "name": "视频作战",
    "children": [{
        "name": "今年新增案件数",
        "children": [{
            "name": "侵犯公民人身权利民主权利案",
            "value": 0
        }, {
            "name": "侵犯财产案",
            "value": 0
        }, {
            "name": "其他盗窃",
            "value": 0
        }, {
            "name": "军人违反职责案",
            "value": 0
        }, {
            "name": "危害公共安全案",
            "value": 0
        }, {
            "name": "危害国家安全案",
            "value": 0
        }, {
            "name": "危害国防利益案",
            "value": 0
        }, {
            "name": "妨害社会管理秩序案",
            "value": 0
        }, {
            "name": "渎职案",
            "value": 0
        }, {
            "name": "破坏社会主义市场经济秩序案",
            "value": 0
        }, {
            "name": "贪污贿赂案",
            "value": 0
        }]
    }, {
        "name": "去年新增案件数",
        "children": [{
            "name": "侵犯公民人身权利民主权利案",
            "value": 0
        }, {
            "name": "侵犯财产案",
            "value": 1
        }, {
            "name": "其他盗窃",
            "value": 3
        }, {
            "name": "军人违反职责案",
            "value": 1
        }, {
            "name": "危害公共安全案",
            "value": 0
        }, {
            "name": "危害国家安全案",
            "value": 0
        }, {
            "name": "危害国防利益案",
            "value": 0
        }, {
            "name": "妨害社会管理秩序案",
            "value": 5
        }, {
            "name": "渎职案",
            "value": 2
        }, {
            "name": "破坏社会主义市场经济秩序案",
            "value": 1
        }, {
            "name": "贪污贿赂案",
            "value": 2
        }]
    }, {
        "name": "在线用户数",
        "children": [{
            "name": "一次",
            "value": 4
        }, {
            "name": "三次",
            "value": 0
        }, {
            "name": "二次",
            "value": 2
        }, {
            "name": "五次以上",
            "value": 0
        }, {
            "name": "四次",
            "value": 0
        }, {
            "name": "未使用",
            "value": 0
        }]
    }, {
        "name": "用户总数",
        "children": [{
            "name": "一次",
            "value": 10
        }, {
            "name": "三次",
            "value": 0
        }, {
            "name": "二次",
            "value": 3
        }, {
            "name": "五次以上",
            "value": 0
        }, {
            "name": "四次",
            "value": 0
        }, {
            "name": "未使用",
            "value": 1
        }]
    }]
}, {
    "name": "解析中心",
    "children": [{
        "name": "布控任务总数",
        "children": [{
            "name": "1",
            "value": 0
        }, {
            "name": "2",
            "value": 0
        }, {
            "name": "3",
            "value": 0
        }]
    }]
}, {
    "name": "运维平台",
    "children": [{
        "name": "交换机",
        "children": [{
            "name": "一类接入",
            "value": 1
        }, {
            "name": "一类核心",
            "value": 9
        }, {
            "name": "一类核心",
            "value": 7
        }, {
            "name": "一类汇聚",
            "value": 2
        }, {
            "name": "一类汇聚",
            "value": 1
        }, {
            "name": "二类接入",
            "value": 6
        }, {
            "name": "二类核心",
            "value": 1
        }, {
            "name": "二类核心",
            "value": 1
        }, {
            "name": "二类汇聚",
            "value": 3
        }]
    }, {
        "name": "视频设备",
        "children": [{
            "name": "不满24小时",
            "value": 23
        }, {
            "name": "完全没录像",
            "value": 12
        }, {
            "name": "满24小时",
            "value": 125
        }]
    }, {
        "name": "路由器",
        "children": [{
            "name": "一类接入",
            "value": 1
        }, {
            "name": "一类核心",
            "value": 9
        }, {
            "name": "一类汇聚",
            "value": 2
        }, {
            "name": "二类接入",
            "value": 6
        }, {
            "name": "二类核心",
            "value": 1
        }, {
            "name": "二类汇聚",
            "value": 3
        }]
    }]
}];
//十六进制颜色值的正则表达式  
var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
//转换rgb
var colorRgbArr = function(text) {
    var sColor = text.toLowerCase();
    if (sColor && reg.test(sColor)) {
        if (sColor.length === 4) {
            var sColorNew = "#";
            for (var i = 1; i < 4; i += 1) {
                sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
            }
            sColor = sColorNew;
        }
        //处理六位的颜色值  
        var sColorChange = [];
        for (var i = 1; i < 7; i += 2) {
            sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));
        }
        return sColorChange;
    } else {
        return sColor;
    }
};

/*RGB颜色转换为16进制*/
var colorHex = function(text) {

    var that = text;
    if (/^(rgb|RGB)/.test(that)) {
        var aColor = that.replace(/(?:||rgb|RGB)*/g, "").split(",");
        var strHex = "#";
        for (var i = 0; i < aColor.length; i++) {
            var hex = Number(aColor[i].replace('(', "").replace(')', "")).toString(16);
            if (hex === "0") {
                hex += hex;
            }
            strHex += hex;
        }
        if (strHex.length !== 7) {
            strHex = that;
        }
        return strHex;
    } else if (reg.test(that)) {
        var aNum = that.replace(/#/, "").split("");
        if (aNum.length === 6) {
            return that;
        } else if (aNum.length === 3) {
            var numHex = "#";
            for (var i = 0; i < aNum.length; i += 1) {
                numHex += (aNum[i] + aNum[i]);
            }
            return numHex;
        }
    } else {
        return that;
    }
};

var _level_colors = ["#3354b3", "#304fa9", "#203676", "#2a4698", "#1c2f69", "#13204a", "#2c479a", "#2a4697", "#263f89"];


function processTrees(trees, a) {
    a = a || [];
    var colors = a.slice(0, a.length);
    for (var i = 0, l = trees.length; i < l; i++) {
        var temp = trees[i];
        var _colors = [];
        Object.keys(temp).map(function(k) {
            if ('name' !== k && 'value' !== k && 'children' !== k) {
                delete temp[k];
            }
        });
        var color = colors[i];
        if (color) {
            temp.itemStyle = {
                color: color
            };

            if (temp.children) {
                var rgb = colorRgbArr(color),
                    _o = rgb[2],
                    step = Math.round((255 - rgb[2]) * 1 / 10) / 1;
                /** 生成 10种 颜色 */
                while (_colors.length <= 10) {
                    rgb[2] = rgb[2] + step;
                    if (rgb[2] <= 255) {
                        var _temp = colorHex('rgb(' + rgb.join(',') + ')');
                        _colors.push(_temp);
                    } else {
                        break;
                    }
                }

                // processTrees(temp.children, _colors);
            }
        }
        if (temp && null === temp.children) {
            delete temp.children;
        } else {
            delete temp.value;
        }
    }

}
processTrees(data, _level_colors);
option = {
    "title": {
        "textStyle": {
            "fontSize": 14,
            "align": "center"
        },
        "subtextStyle": {
            "align": "center"
        }
    },
    "tooltip": {},
    "series": {
        "type": "sunburst",
        "highlightPolicy": "ancestor",
        "data": data,
        "radius": [0, "95%"],
        "sort": null,
        "levels": [{}, {
            "r0": "15%",
            "r": "35%",
            "itemStyle": {
                "borderWidth": 2
            },
            "label": {
                "rotate": "tangential"
            }
        }, {
            "r0": "35%",
            "r": "70%",
            "label": {
                "align": "right"
            }
        }, {
            "r0": "70%",
            "r": "72%",
            "label": {
                "position": "outside",
                "padding": 3,
                "silent": false
            },
            "itemStyle": {
                "borderWidth": 3
            }
        }]
    }
};
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
