// 树结构
function creatTreeCharts(options) {
// 获取参数
options = this.getOptions(options);
// 初始化树
this.initTree(options);
}
creatTreeCharts.prototype.getOptions = function(options) {
// 参数
options = $.extend({}, {
id: 'main',
menuFloor: 'all',
orient: 'LR'
}, options || {});
this.options = options;
return options;
}
// 获取树状图数据
creatTreeCharts.prototype._getData = function() {
let self = this;
let arr = [];
let paramJson = getEditParamJson(form);
baseAjax(serverUrl + serviceInfo.LINKPATH002.url,
JSON.stringify(paramJson), function (data) {
if (data && "0" === data.resCode) {
arr = data.rows;
} else {
if (data && data.resMsg != undefined) {
$.msg.alert(data.resMsg);
}
}
}, false);
return arr;
}
// 初始化树结构
creatTreeCharts.prototype.initTree = function(options) {
options = this.getOptions(options);
let self = this;
// 获取数据
let arr = deepClone(this._getData());
let chartDom = document.getElementById(options.id);
let myChart = echarts.init(chartDom);
let option;
let numArr = [];
let color={
color:"red"
};
if(!arr || arr.length == 0) {
return;
}
// 销毁后重新渲染,避免多次渲染导致的一些列问题
myChart.dispose();
chartDom = document.getElementById(options.id);
myChart = echarts.init(chartDom);
// 处理数据
if(options.menuFloor == 'all') {
arr.forEach(function (datum, index) {
datum.collapsed = false;
if(datum.recursion != ''){
datum.itemStyle = color;
datum.label = color;
}
numArr.push(datum);
});
}else{
arr.forEach(function (datum, index) {
if(datum.recursion != ''){
datum.itemStyle = color;
datum.label = color;
}
datum.menuFloor == options.menuFloor && (datum.collapsed = true) && numArr.push(datum);
});
}
// 构造数据
let datas = deepClone(buildTree(numArr)[0]); //层级数据
let numLevel = deepLevel(datas); //最深层级数
// 赋值高度
let autoHeight = numArr.length * 30; //每个节点高度设为30
let autoWith = numLevel * 180; //每个节点高度设为30
let opsition = {
top: '10%',
right: '15%'
}
if(numArr.length == 1){ //只有一个节点时,下载图片提示显示不全
autoHeight = 50;
if(options.orient == 'RL'){ //方向从右到左
opsition = {
top: '80%',
right: '30%'
}
}
}else if(numArr.length == 2) {
opsition = {
top: '10%',
right: '20%'
}
}
if(numLevel >= 5) {
opsition = {
top: '5%',
right: '15%'
}
myChart.resize({height:autoHeight, width: autoWith});
}else{
myChart.resize({height:autoHeight});
}
this.optionChart = {
tooltip: { //提示信息
trigger: 'item',
triggerOn: 'mousemove',
formatter: function (params) {
let { data } = params;
let info = '<p>类型:'+data.typeName+'</p>'+'<p>编码:'+data.code+'</p>'+'<p>描述:'+data.desc+'</p>'+(data.recursion && data.recursion != ""? '<p>'+data.recursion+'</p>':"")+(data.bakMsg && data.bakMsg != ""?'<p>备注:'+data.bakMsg+'</p>': "");
return info;
},
},
toolbox: {
show: true,
right: 20,
top: -5,
feature: {
mark: {show: true},
dataView: {show: false, readOnly: false},
restore: {show: true},
saveAsImage: {show: true}
}
},
series: [
{
type: 'tree',
data: [datas],
top: opsition.top,
left: '10%',
bottom: '1%',
right: opsition.right,
symbolSize: 7,
orient: options.orient, //控制方向,从右到左
// initialTreeDept: -1,
label: {
position: 'top',
verticalAlign: 'middle',
align: 'middle',
fontSize: 12,
},
leaves: {
label: {
position: 'top',
verticalAlign: 'middle',
align: 'middle'
}
},
emphasis: {
focus: 'ancestor' //祖先:ancestor ,后代:descendant
},
expandAndCollapse: true,
animationDuration: 550,
animationDurationUpdate: 750
}
]
}
// 渲染
myChart.setOption(this.optionChart);
option && myChart.setOption(option, true);
// // 清除点击事件
// myChart.off('click');
// // 点击事件
// myChart.on('click', function(params) {
// var name = params.data.name;//点击的节点的name
// alert('点击---'+name)
// });
}
// 刷新
creatTreeCharts.prototype.refersh = function(options) {
// let newOPtions = $.extend({}, this.options, options || {});
// this.initTree(newOPtions);
let chartDom = document.getElementById(this.options.id);
let myChart = echarts.init(chartDom);
myChart.setOption(this.optionChart, true);
}
creatTreeCharts.prototype.reverse = function() {
let newOPtions = this.options;
newOPtions.orient = newOPtions.orient == 'RL'? 'LR': 'RL';
this.initTree(newOPtions);
}
function buildTree (arr) {
let temp = {}
let tree = {}
// 数组转 键值对
arr.forEach(item => {
item.name = item.code+'('+item.typeName+')';
// item.children = []
temp[item.id] = item
})
let tempKeys = Object.keys(temp)
tempKeys.forEach(key => {
// 获取当前项
let item = temp[key]
// 当前项 pId
let _itemPId = item.pid
// 获取父级项
let parentItemByPid = temp[_itemPId]
if (parentItemByPid) {
if (!parentItemByPid.children) {
parentItemByPid.children = [];
}
parentItemByPid.children.push(item)
} else {
tree[item.id] = item
}
})
// 对象转数组并返回
return Object.keys(tree).map(key => tree[key])
}
function deepLevel(data) {
var num = 0;
function recursion(obj,k) {
num = Math.max(num,k);
// console.log(k);
if (obj.children)
obj.children.forEach(function(v, i){
recursion(v,k+1);
});
}
recursion(data,1);
// console.log("最深层级数"+num);
return num;
}
// 深拷贝
function deepClone(obj) {
let objClone = Array.isArray(obj) ? [] : {};
if (obj && typeof obj === "object") {
for (key in obj) {
if (obj.hasOwnProperty(key)) {
//判断ojb子元素是否为对象,如果是,递归复制
if (obj[key] && typeof obj[key] === "object") {
objClone[key] = deepClone(obj[key]);
} else {
//如果不是,简单复制
objClone[key] = obj[key];
}
}
}
}
return objClone;
}