myChart.showLoading();
$.get(ROOT_PATH + 'data/asset/data/flare.json', function (data) {
console.log(data);
// 第一层数据来源
var firstDataName=data.name;
// 第二层数据来源
var secondDataName=[];
// 第三层数据来源
var thirdDataName=[];
// 第四层数据来源
var fourthDataName=[];
data.children.forEach((item,index)=>{
secondDataName.push(item.name);
if(item.children){
item.children.forEach((item1,index1)=>{
thirdDataName.push(item1.name);
if(item1.children){
item1.children.forEach((item2,index2)=>{
fourthDataName.push(item2.name);
});
}
});
}
});
// console.log(firstDataName);
// console.log(secondDataName);
// console.log(thirdDataName);
// console.log(fourthDataName);
myChart.hideLoading();
// 控制echars默认展开项
let defaultArray=JSON.parse(localStorage.getItem("defaultArray"))||{suoyin:0,suoyinArray:[1]};
echarts.util.each(data.children, function (datum, index) {
datum.collapsed = true;
});
echarts.util.each(data.children, function (datum, index) {
if(index===defaultArray.suoyin){
datum.collapsed = false;
}
});
let recordIndex=defaultArray.suoyin;
echarts.util.each(data.children[recordIndex].children, function (datum, index) {
for(var j=0;j<=defaultArray.suoyinArray.length-1;j++){
if(index===defaultArray.suoyinArray[j]){
datum.collapsed = false;
}
}
});
// 控制echars一次只能展开一个分支
myChart.on('click',function(params){
console.log(params);
console.log(params.name);
//如果是第二层被点击了
if(secondDataName.indexOf(params.name)!=-1){
var secondIndexshow;
data.children.forEach((item,index)=>{
if(item.name===params.data.name){
secondIndexshow=index;
}
});
echarts.util.each(data.children, function (datum, index) {
if(index===secondIndexshow){
datum.collapsed = false;
}else{
datum.collapsed = true;
}
});
localStorage.setItem("defaultArray",JSON.stringify({suoyin:secondIndexshow,suoyinArray:[]}))
console.log(JSON.parse(localStorage.getItem("defaultArray")).suoyin);
// 重新加载百度图表
myChart.setOption(option,true);
}
secondIndexshow=JSON.parse(localStorage.getItem("defaultArray")).suoyin;
// 如果是第三层被点击了
if(thirdDataName.indexOf(params.name)!=-1){
var thirdIndexshow;
data.children[secondIndexshow].children.forEach((item,index)=>{
if(item.name===params.data.name){
thirdIndexshow=index;
}
});
echarts.util.each(data.children[secondIndexshow].children, function (datum, index) {
if(index===thirdIndexshow){
datum.collapsed = false;
}else{
datum.collapsed = true;
}
});
localStorage.setItem("defaultArray",JSON.stringify({suoyin:secondIndexshow,suoyinArray:[thirdIndexshow]}))
console.log(JSON.stringify({suoyin:secondIndexshow,suoyinArray:[thirdIndexshow]}));
// 重新加载百度图表
myChart.setOption(option,true);
}
});
myChart.setOption(option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove',
formatter:function(resp){
// console.log(resp);
// console.log(resp.name);
let sum=0;
// 第一层提示信息展示
if(firstDataName===resp.name){
// console.log("第一层数据格式化");
resp.data.children.forEach((item,index)=>{
if(item.children){
item.children.forEach((item1,index1)=>{
if(item1.children){
item1.children.forEach((item2,index2)=>{
if(item2.children){
item2.children.forEach((item3,index3)=>{
item3.value?sum=sum+item3.value:sum=sum+0;
});
}else{
item2.value?sum=sum+item2.value:sum=sum+0;
}
});
}else{
item1.value?sum=sum+item1.value:sum=sum+0;
}
});
}else{
item.value?sum=sum+item.value:sum=sum+0;
}
});
return firstDataName+' '+sum+ "万元";
}
// 第二层提示信息展示
if(secondDataName.indexOf(resp.name)!=-1){
// console.log("第二层数据格式化");
if(resp.data.children){
resp.data.children.forEach((item,index)=>{
if(item.children){
item.children.forEach((item1,index1)=>{
if(item1.children){
item1.children.forEach((item2,index2)=>{
if(item2.children){
item2.children.forEach((item3,index3)=>{
item3.value?sum=sum+item3.value:sum=sum+0;
});
}else{
item2.value?sum=sum+item2.value:sum=sum+0;
}
});
}else{
item1.value?sum=sum+item1.value:sum=sum+0;
}
});
}else{
item.value?sum=sum+item.value:sum=sum+0;
}
});
return firstDataName+' '+resp.name+' '+sum+ "万元";
}else{
return firstDataName+' '+resp.data.value+ "万元";
}
}
// 第三层提示信息展示
if(thirdDataName.indexOf(resp.name)!=-1){
// console.log("第三层数据格式化");
if(resp.data.children){
resp.data.children.forEach((item,index)=>{
if(item.children){
item.children.forEach((item1,index1)=>{
if(item1.children){
item1.children.forEach((item2,index2)=>{
if(item2.children){
item2.children.forEach((item3,index3)=>{
item3.value?sum=sum+item3.value:sum=sum+0;
});
}else{
item2.value?sum=sum+item2.value:sum=sum+0;
}
});
}else{
item1.value?sum=sum+item1.value:sum=sum+0;
}
});
}else{
item.value?sum=sum+item.value:sum=sum+0;
}
});
return firstDataName+' '+resp.name+' '+sum+ "万元";
}else{
return firstDataName+' '+resp.data.value+ "万元";
}
}
// 第四层提示信息展示(最后一层)
if(fourthDataName.indexOf(resp.name)!=-1){
// console.log("第四层数据格式化");
return resp.name+' '+resp.data.value+'万元';
}
}
},
series: [
{
type: 'tree',
data: [data],
top: '1%',
left: '7%',
bottom: '1%',
right: '20%',
symbolSize: 7,
label: {
normal: {
position: 'left',
verticalAlign: 'middle',
align: 'right',
fontSize: 9
}
},
leaves: {
label: {
normal: {
position: 'right',
verticalAlign: 'middle',
align: 'left'
}
}
},
expandAndCollapse: true,
animationDuration: 550,
animationDurationUpdate: 750
}
]
});
});