{{# var lang001 = {"ch": "源IP", "en": "Src IP"}, lang002 = {"ch": "源端口", "en": "Src Port"}, lang003 = {"ch": "目标IP", "en": "Dst IP"}, lang004 = {"ch": "目标端口", "en": "Dst Port"}, lang005 = { "ch": "用于反映连接信息中，源目IP/端口的离散趋势", "en": "Used to reflect the dispersion trend of Source/Destination IP and Port in connection information" }; }}  <div style="margin: 10px;">     <div class="paui-color-disable">{{ lang005[g_lang] || "用于反映连接信息中，源目IP/端口的离散趋势" }}</div>     <div class="layui-row" style="height: 400px;" id="paui-session-flow-chart"></div> </div>  <script> layui.use(function(){     var $ = layui.$;     var pdata = JSON.parse('{{- JSON.stringify(d) }}');       var parallel_render = function(data){         var legend = [];         for(var key in data){             legend.push(key);         }         var chartDom = document.getElementById('paui-session-flow-chart');         var myChart = echarts.init(chartDom);          var schema = [             { name: 'sip', index: 0, text: '{{ lang001[g_lang] || "源IP" }}' },             { name: 'sport', index: 3, text: '{{ lang002[g_lang] || "源端口" }}' },             { name: 'tip', index: 4, text: '{{ lang003[g_lang] || "目标IP" }}' },             { name: 'tport', index: 7, text: '{{ lang004[g_lang] || "目标端口" }}' }         ];         var lineStyle = {             width: 1,             opacity: 0.5         };         var option = {             legend: {                 bottom: 10,                 data: legend,                 itemGap: 5,                 textStyle: {                     color: '#ccc',                     fontSize: 10                 }             },             tooltip: {                 padding: 5,                 borderWidth: 1,                 backgroundColor: 'rgba(20, 20, 20, 0.6)',                 borderColor: '#666',                 textStyle: {                     color: "#ddd",                     fontSize: 12                 },                 axisPointer: {                     type: 'shadow'                 },                 formatter:function(para){                     return `                     <span>源地址：${para.data.slice(0,4).join('.')}:${para.data[4]}</span></br>                     <span>目标地址：${para.data.slice(5,9).join('.')}:${para.data[8]}</span>                     `                 }             },             parallelAxis: [                 { dim: 0, max: 255, name: schema[0].text },                 { dim: 1, max: 255 },                 { dim: 2, max: 255 },                 { dim: 3, max: 255 },                 { dim: 4, name: schema[1].text, max:65535 },                 { dim: 5, name: schema[2].text, max: 255 },                 { dim: 6, max: 255 },                 { dim: 7, max: 255 },                 { dim: 8, max: 255 },                 { dim: 9, name: schema[3].text, max:65535 }             ],             parallel: {                 left: '5%',                 right: '8%',                 bottom: 40,                 parallelAxisDefault: {                     type: 'value',                     nameLocation: 'end',                     nameGap: 20,                     nameTextStyle: {                         color: '#333',                         fontSize: 12                     },                     axisLine: {                         lineStyle: {                             color: '#aaa'                         }                     },                     axisTick: {                         lineStyle: {                             color: '#777'                         }                     },                     splitLine: {                         show: false                     },                     axisLabel: {                         color: '#333'                     }                 }             },             series: []         };                  for(var key in data){             option.series.push({                 name: key,                 type: 'parallel',                 inactiveOpacity:0,                 lineStyle: {                     color:g_app_color[data[key].colorType]                 },                 data: data[key].data.map(function(item){                     return item.data;                 })                              })         }                  option && myChart.setOption(option);         myChart.on('legendselectchanged', function (event) {             var selected = event.name;              var legend = myChart.getOption().legend;             myChart.getOption().series.forEach(function(item){                 legend[0].selected[item.name]=item.name==selected;             });             myChart.setOption({ legend: legend });         });     };       /*查询应用的大类Id*/     var findCateByName = function(treeTree, nodeId){         var node = treeTree[nodeId];         if (!treeTree[node.pid]) {             return {                 name:node.app_cname,                 mark: node.app_name,                 id: node.id             };         } else {             return findCateByName(treeTree, node.pid)         }     };       var groupBy = function(array,key){         return array.reduce(function(result,currentItem){             var groupKey = currentItem.cate[key];             if (!result[groupKey]) {                 result[groupKey] = {                     colorType: currentItem.cate.mark,                     data:[]                 };             }             result[groupKey].data.push(currentItem);             return result;                  },{});     };       var dealparallel_data = function(tableData){         pa_ajax({             url: '/cgi-bin/proto/ajax_app',             data: {'action': 'get_app_tree'},             success: function(json){                 if(json.code != 0)                     alert_err(json.msg);                 else {                 var res = tableData.map(function(item){                         var result = {                             data:item.dst.split(/[.:-]+/),                             cate:findCateByName(json.data, item.app_id)                         };                         return result;                     });                     parallel_render(groupBy(res, 'name'));                 }             }         });     };       dealparallel_data(pdata);  }) </script>