tree环echarts 配置项内容和展示
tree环
配置项如下
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
}
}]
}
};
截图如下
