Widget:ECharts-Tree

<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>