<script type="text/javascript" src="https://cdn.staticfile.org/echarts/5.3.0/echarts.min.js"></script> <script> RLQ.push([["jquery"],function(){
$(document).ready(function(){
$("div.tree-un").each(function(){
let datatitle = $(this).attr("data-title");
let datasubtitle = $(this).attr("data-subtitle");
let datapadding = Number($(this).attr("data-padding"));
let datasize = Number($(this).attr("data-size"));
var data = {};
let datatemp = data;
let text = $(this).attr("data-id");
let list = text.split("#");
var reg = new RegExp("-", "g" );
for (i in list){
let label = list[i];
//跳过空行。
if (label == ""){
continue;
};
let num = label.split("-").length-1;
let cleanlabel = label.replace(reg,"");
let value = cleanlabel.split(" ");
for (x = 1; x <= num;x++) {
if(typeof datatemp.children == "undefined"){
datatemp["children"] = [{}];
};
datatemp = datatemp.children;
if (x == num){
if (JSON.stringify(datatemp[datatemp.length-1]) != "{}"){
datatemp.push({});
};};
datatemp = datatemp[datatemp.length-1];
};
datatemp["name"] = value[0];
datatemp["value"] = value[1];
var color = {color: "#"+value[2]};
datatemp["itemStyle"] = color;
datatemp = data;
;
};
var dom = this; var myChart = echarts.init(dom); var app = {};
var option;
myChart.showLoading();
myChart.hideLoading();
var option = {
title: {
text: datatitle,
textStyle:{fontWeight:1000,fontFamily:'sans-serif',fontSize:35,},
subtext: datasubtitle,
subtextStyle:{fontWeight:100,fontFamily:'sans-serif',fontSize:11,},
},
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series:[
{
type: 'tree',
name: '第一主线',
data: [data],
top: '5%',
left: '7%',
bottom: '2%',
right: '10%',
symbolSize: 10,
label: {
position: 'right',
verticalAlign: 'middle',
align: 'left',
textStyle: {
fontWeight:400,
fontFamily:'sans-serif',
fontSize:datasize,
},
padding:datapadding,
backgroundColor: '#fff',
shadowColor: 'rgba(0, 0, 0, 0.26)',
shadowBlur:4,
shadowOffsetX:1,
shadowOffsetY:1,
borderRadius: 7,
},
leaves: {
label: {
position: 'right',
verticalAlign: 'middle',
align: 'left'
}
},
emphasis: {
focus: 'descendant'
},
expandAndCollapse: false,
animationDuration: 550,
animationDurationUpdate: 750,
},
],
stateAnimation:{easing:"exponentialOut"},
}; myChart.on('click', function (params) {
window.open(encodeURI(params.value));
});
if (option && typeof option === 'object') {
myChart.setOption(option);
}
});});
}]); </script>