• Zrender:实现波浪纹效果


      1 <!doctype html>
      2 <html>
      3 <head>
      4 <meta charset="utf-8">
      5 <title>zrender</title>
      6 <meta name="vzrenderewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
      7 <meta name="format-detection" content="telephone=no">
      8 <meta name="apple-mobile-web-app-capable" content="yes">
      9 <meta name="apple-mobile-web-app-status-bar-style" content="black">
     10 <style>
     11 /*css reset*/
     12 html{font-family:"Helvetica Neue",Helvetica,STHeiTi,sans-serif;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;}
     13 body{-webkit-overflow-scrolling:touch;margin:0;}
     14 ul{margin:0;padding:0;list-style:none;outline:none;}
     15 dl,dd{margin:0;}
     16 a{display:inline-block;margin:0;padding:0;text-decoration:none;background:transparent;outline:none;color:#000;}
     17 a:link,a:visited,a:hover,a:active{text-decoration:none;color:currentColor;}
     18 a,dt,dd{-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;}
     19 img{border:0;}
     20 p{margin:0;}
     21 input,button,select,textarea{margin:0;padding:0;border:0;outline:0;background-color:transparent;}
     22 </style>
     23 </head>
     24 <body>
     25     <div id="box" style="height:400px;600px;border:1px solid black;"></div>
     26 
     27 <script src="zrender.js"></script>
     28 <script>
     29     var zr = zrender.init(document.getElementById('box'), {renderer: 'svg'}),
     30         h = zr.getHeight(),
     31         w = zr.getWidth();
     32     var line1 = new zrender.BezierCurve({
     33         shape: {
     34             x1: 0,
     35             y1: h,
     36             cpx1: w / 2 - 10,
     37             cpy1: h,
     38             cpx2: w / 2 - 10,
     39             cpy2: 0,
     40             x2: w,
     41             y2: 0
     42         },
     43         style: {
     44             stroke: '#e3e3e3',
     45             lineWidth: .5,
     46             // fill: '#e3e3e3',
     47         }
     48     });
     49     // zr.add(line1);
     50 
     51     var line2 = new zrender.BezierCurve({
     52         shape: {
     53             x1: 0,
     54             y1: h,
     55             cpx1: w / 2 + 10,
     56             cpy1: h,
     57             cpx2: w / 2 + 10,
     58             cpy2: 0,
     59             x2: w,
     60             y2: 0
     61         },
     62         style: {
     63             stroke: '#e3e3e3',
     64             lineWidth: .5,
     65             // fill: '#e3e3e3',
     66         }
     67     });
     68     // zr.add(line2);
     69     var mergeLine = zrender.path.mergePath([line1, line2], {
     70         style: {
     71             stroke: 'black',
     72             fill: '#e3e3e3'
     73         }
     74     })
     75     // zr.add(mergeLine);
     76 
     77     var Pin = zrender.Path.extend({
     78         type: 'pin',
     79         shape: {
     80             // x, y on the cusp
     81             x1: 0,
     82             y1: 0,
     83             x2: 0,
     84             y2: 0,
     85         },
     86         style: {
     87             stroke: '#000',
     88             fill: '#e3e3e3'
     89         },
     90         buildPath: function (path, shape) {
     91             var x1 = shape.x1;
     92             var y1 = shape.y1;
     93             var x2 = shape.x2;
     94             var y2 = shape.y2;
     95             path.moveTo(x1, y1);
     96             path.bezierCurveTo(
     97                 (x2 - x1) / 2 - 10, y1,
     98                 (x2 - x1) / 2 - 10, y2,
     99                 x2, y2
    100             );
    101 
    102             path.moveTo(x1, y1);
    103             path.bezierCurveTo(
    104                 (x2 - x1) / 2 + 10, y1,
    105                 (x2 - x1) / 2 + 10, y2,
    106                 x2, y2
    107             );
    108         }
    109     });
    110     var pin = new Pin({
    111         shape: {
    112             x1: 0,
    113             y1: h,
    114             x2: w,
    115             y2: 0,
    116         },
    117         // scale: [2, 2]
    118     });
    119     zr.add(pin);
    120 </script>
    121 </body>
    122 </html>

    这是一年前写的,整理文件的时候翻了出来。

    用这个波浪纹实现一个查看信息的页面。放一个jQuery版本的纯前端效果。

      1 <!DOCTYPE html>
      2 <html>
      3 <head>
      4     <meta charset="utf-8" />
      5     <title>Pin</title>
      6     <style>
      7     body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td,section,article,aside,header,footer,nav,dialog,figure,hgroup{margin:0;padding:0}input,select,textarea{font-size:100%}
      8     fieldset,img{border:0}caption,th{text-align:left}
      9     h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:500}ul,ol,li{list-style:none}
     10     em,i{font-style:normal}del{text-decoration:line-through}
     11     address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:500}
     12     img{border:0;max-width:100%}input,img{vertical-align:middle}
     13     input:focus,a:focus{outline:0}
     14     input:hover{-webkit-tap-highlight-color:transparent;-webkit-user-modify:read-write-plaintext-only}
     15     a{color:#353d44;text-decoration:none;-webkit-tap-highlight-color: transparent}
     16     a:active{opacity:.7}*{outline:0;-webkit-tap-highlight-color:transparent;-webkit-box-sizing:border-box}.hide{display:none}.clearfix{overflow:hidden;zoom:1}
     17     body{max-width:750px;min-width:320px;line-height:1.5;font-family:"Helvetica Neue", Helvetica, STHeiTi, sans-serif}html{font-size:50px}body{font-size:24px}
     18 
     19         #svg_main {
     20             overflow: auto;
     21             position: relative;
     22         }
     23         #html_main {
     24             position: absolute;
     25             font-size: 12px;
     26             color: #fff;
     27             z-index: 100;
     28         }
     29         .html-root {
     30             position: absolute;
     31             top: 200px;
     32             left: 295px;
     33             width: 188px;
     34             height: 113px;
     35             background-color: #9fccff;
     36         }
     37         .root-title {
     38             padding: 5px 10px;
     39             height: 47px;
     40             border-bottom: 1px solid #e3e3e3;
     41         }
     42         .root-contain {
     43             padding: 2px 10px;
     44         }
     45         .root-text {
     46             display: inline-block;
     47             width: 80px;
     48             text-align: left;
     49         }
     50         .root-num {
     51             color: #1969C5;
     52         }
     53         .html-index1 {
     54             position: absolute;
     55             top: 10px;
     56             left: 10px;
     57             width: 175px;
     58         }
     59         .html-index {
     60             position: relative;
     61             display: inline-block;
     62             margin-bottom: 10px;
     63             width: 100%;
     64             height: 56px;
     65             cursor: pointer;
     66             background-color: rgb(189, 216, 243);
     67         }
     68         .index-num {
     69             margin: 13px 0 2px 7px;
     70             font-size: 16px;
     71             color: #fff;
     72             font-weight: 700;
     73             line-height: 18px;
     74         }
     75         .index-text {
     76             margin-left: 7px;
     77             width: 161px;
     78             color: #216cc7;
     79         }
     80         .html-index-over {
     81             color: #216cc7 !important;
     82             background-color: rgb(242, 247, 253) !important;
     83         }
     84         .html-index-over .index-num {
     85             color: #216cc7 !important;
     86         }
     87         .mouseover-data {
     88             position: absolute;
     89             left: 0;
     90             padding: 3px 5px;
     91             width: 175px;
     92             height: 69px;
     93             color: #7F9DB9;
     94             background-color: #fff;
     95             border: 1px solid #e1e1e1;
     96             z-index: 100;
     97         }
     98         .mouseover-data:before {
     99             content: '';
    100             position: absolute;
    101             left: 50%;
    102             top: -10px;
    103             width: 0;
    104             height: 0;
    105             border-bottom: 10px solid #fff ;
    106             border-left: 10px solid transparent;
    107             border-right: 10px solid transparent;
    108         }
    109         .mouseover-data-text {
    110             display: inline-block;
    111             width: 73px;
    112             text-align: right;
    113         }
    114         .mouseover-data-num {
    115             margin-left: 1em;
    116             text-align: left;
    117         }
    118         .displaynone {
    119             display: none;
    120         }
    121         .html-index2 {
    122             position: absolute;
    123             top: 10px;
    124             left: 593px;
    125             width: 175px;
    126         }
    127         .html-index3 {
    128             position: absolute;
    129             top: 10px;
    130             left: 878px;
    131             width: 175px;
    132         }
    133         .html-index4 {
    134             position: absolute;
    135             top: 10px;
    136             left: 1163px;
    137             width: 175px;
    138         }
    139         .html-index5 {
    140             position: absolute;
    141             top: 10px;
    142             left: 1448px;
    143             width: 175px;
    144         }
    145         .index-control {
    146             position: absolute;
    147             top: 0;
    148             right: -30px;
    149             padding-left: 4px;
    150             width: 30px;
    151             height: 56px;
    152             /*background-color: #bdd8f3;*/
    153         }
    154         .index-root-control {
    155             display: inline-block;
    156             padding: 4px;
    157             width: 26px;
    158             height: 26px;
    159             background-color: #bdd8f3;
    160         }
    161     </style>
    162 </head>
    163 <body>
    164     <div id="svg_main" style="1800px;height:718px;">
    165         <div id="html_main">
    166             <div class="html-index1" id="index1" target-svg="wave1">
    167                 <div id="2" class="html-index">
    168                     <p class="index-num">32.12%</p>
    169                     <p class="index-text">目录2</p>
    170                     <div class="index-control">
    171                         <p class="index-root-control"></p>
    172                     </div>
    173                 </div>
    174                 <div class="mouseover-data">
    175                     <p>
    176                         <span class="mouseover-data-text">访问次数</span>
    177                         <span class="mouseover-data-num">6</span>
    178                     </p>
    179                     <p>
    180                         <span class="mouseover-data-text">平均访问时长</span>
    181                         <span class="mouseover-data-num">00:00:12</span>
    182                     </p>
    183                     <p>
    184                         <span class="mouseover-data-text">页面跳出率</span>
    185                         <span class="mouseover-data-num">10.12%</span>
    186                     </p>
    187                 </div>
    188                 <div id="2" class="html-index">
    189                     <p class="index-num">32.12%</p>
    190                     <p class="index-text">目录2</p>
    191                 </div>
    192             </div>
    193             <div id="root" class="html-root">
    194                 <p class="root-title">资讯模块-视频详情页-合集视频页-27480115</p>
    195                 <p class="root-contain">
    196                     <span class="root-text">访问次数</span>
    197                     <span class="root-num">97</span>
    198                 </p>
    199                 <p class="root-contain">
    200                     <span class="root-text">平均访问时长</span>
    201                     <span class="root-num">00:00:10</span>
    202                 </p>
    203                 <p class="root-contain">
    204                     <span class="root-text">页面跳出率</span>
    205                     <span class="root-num">12.12%</span>
    206                 </p>
    207             </div>
    208             <div class="html-index2" id="index2" target-svg="wave2">
    209                 <div id="3" class="html-index">
    210                     <p class="index-num">32.12%</p>
    211                     <p class="index-text">目录2</p>
    212                 </div>
    213             </div>
    214             <div class="html-index3" id="index3" target-svg="wave3">
    215                 <div id="3" class="html-index">
    216                     <p class="index-num">32.12%</p>
    217                     <p class="index-text">目录2</p>
    218                 </div>
    219             </div>
    220             <div class="html-index4" id="index4" target-svg="wave3">
    221                 <div id="3" class="html-index">
    222                     <p class="index-num">32.12%</p>
    223                     <p class="index-text">目录2</p>
    224                 </div>
    225             </div>
    226             <div class="html-index5" id="index5" target-svg="wave3">
    227                 <div id="3" class="html-index">
    228                     <p class="index-num">32.12%</p>
    229                     <p class="index-text">目录2</p>
    230                 </div>
    231             </div>
    232         </div>
    233     </div>
    234     <script src="jquery-2.2.3.min.js"></script>
    235     <script src="zrender.js"></script>
    236     <script src="wave.js"></script>
    237     <script type="text/javascript">
    238         var data1 = {
    239             root: {
    240                 id: 1,
    241                 num: '10.10',
    242                 text: '目录1',
    243                 visitNum: '10',
    244                 avgTime: '00:00:15',
    245                 jumpRate: '10.12',
    246             },
    247             data: [{
    248                 id: 1,
    249                 num: '10.10',
    250                 text: '目录1',
    251                 visitNum: '10',
    252                 avgTime: '00:00:15',
    253                 jumpRate: '10.12',
    254             }, {
    255                 id: 2,
    256                 num: '0.78',
    257                 text: '目录2',
    258                 visitNum: '10',
    259                 avgTime: '00:00:15',
    260                 jumpRate: '10.12',
    261             }, {
    262                 id: 3,
    263                 num: '20',
    264                 text: '目录3',
    265                 visitNum: '10',
    266                 avgTime: '00:00:15',
    267                 jumpRate: '10.12',
    268             }, {
    269                 id: 4,
    270                 num: '30',
    271                 text: '目录4',
    272                 visitNum: '10',
    273                 avgTime: '00:00:15',
    274                 jumpRate: '10.12',
    275             }, {
    276                 id: 5,
    277                 num: '20',
    278                 text: '目录5',
    279                 visitNum: '10',
    280                 avgTime: '00:00:15',
    281                 jumpRate: '10.12',
    282             }, {
    283                 id: 6,
    284                 num: '20',
    285                 text: '目录6',
    286                 visitNum: '10',
    287                 avgTime: '00:00:15',
    288                 jumpRate: '10.12',
    289             }, {
    290                 id: 7,
    291                 num: '20',
    292                 text: '其它',
    293                 visitNum: '10',
    294                 avgTime: '00:00:15',
    295                 jumpRate: '10.12',
    296             }, {
    297                 id: 8,
    298                 num: '20',
    299                 text: '离开应用',
    300             }]
    301         }
    302 
    303         var data2 = {
    304             root: {
    305                 id: 1,
    306                 num: '10.10',
    307                 text: '变更了root',
    308                 visitNum: '10',
    309                 avgTime: '00:00:15',
    310                 jumpRate: '10.12',
    311             },
    312             data: [{
    313                 id: 1,
    314                 num: '10.10',
    315                 text: '目录1',
    316                 visitNum: '10',
    317                 avgTime: '00:00:15',
    318                 jumpRate: '10.12',
    319             }, {
    320                 id: 2,
    321                 num: '0.78',
    322                 text: '目录2',
    323                 visitNum: '10',
    324                 avgTime: '00:00:15',
    325                 jumpRate: '10.12',
    326             }, {
    327                 id: 3,
    328                 num: '20',
    329                 text: '目录3',
    330                 visitNum: '10',
    331                 avgTime: '00:00:15',
    332                 jumpRate: '10.12',
    333             }, {
    334                 id: 4,
    335                 num: '30',
    336                 text: '目录4',
    337                 visitNum: '10',
    338                 avgTime: '00:00:15',
    339                 jumpRate: '10.12',
    340             }, {
    341                 id: 5,
    342                 num: '20',
    343                 text: '目录5',
    344                 visitNum: '10',
    345                 avgTime: '00:00:15',
    346                 jumpRate: '10.12',
    347             }, {
    348                 id: 6,
    349                 num: '20',
    350                 text: '我变了',
    351                 visitNum: '10',
    352                 avgTime: '00:00:15',
    353                 jumpRate: '10.12',
    354             }, {
    355                 id: 7,
    356                 num: '20',
    357                 text: '其它',
    358                 visitNum: '10',
    359                 avgTime: '00:00:15',
    360                 jumpRate: '10.12',
    361             }, {
    362                 id: 8,
    363                 num: '20',
    364                 text: '离开应用',
    365             }]
    366         }
    367 
    368         var zr = zrender.init(document.getElementById('svg_main'), {
    369             renderer: 'svg'
    370         });
    371         var elArr = [];
    372         var targetRoot = $('#root')[0];
    373         var rootWidth = targetRoot.offsetWidth,
    374             rootHeight = targetRoot.offsetHeight,
    375             rootLeft = targetRoot.offsetLeft,
    376             rootTop = targetRoot.offsetTop;
    377         var initNum = 0;  // 辅助记录zlArr内的位置
    378 
    379         function init(data) {
    380             var totalData = data;
    381             $('#index1').empty();
    382             $('#root').empty();
    383             $('#index2').empty();
    384             $('#index3').empty();
    385             $('#index4').empty();
    386             $('#index5').empty();
    387             elArr.forEach(function(item) {
    388                 zr.remove(item);
    389             })
    390             elArr.length = 0;
    391             initNum = 0;
    392             var text = '';
    393             var extraCss = '';
    394             var elWidth,
    395                 elHeight,
    396                 elLeft,
    397                 elTop;
    398             $('#root').append('<p class="root-title">' + totalData.root.text + '</p>' +
    399                 '<p class="root-contain">' +
    400                     '<span class="root-text">访问次数</span>' +
    401                     '<span class="root-num">' + totalData.root.visitNum + '</span>' +
    402                 '</p>' +
    403                 '<p class="root-contain">' +
    404                     '<span class="root-text">平均访问时长</span>' +
    405                     '<span class="root-num">' + totalData.root.avgTime + '</span>' +
    406                 '</p>' +
    407                 '<p class="root-contain">' +
    408                     '<span class="root-text">页面跳出率</span>' +
    409                     '<span class="root-num">' + totalData.root.jumpRate + '%</span>' +
    410                 '</p>');
    411             $('#root').attr('target-data', JSON.stringify(totalData.root));
    412 
    413             totalData.data.forEach(function(item, i) {
    414                 extraCss = '';
    415                 if (item.text == '离开应用') {
    416                     extraCss = ' html-index-over';
    417                 }
    418                 $('#index1').append('<div id="' + initNum + '" class="html-index' + extraCss + '" target-index="' + initNum + '" target-data=' + JSON.stringify(item) + '>' +
    419                         '<p class="index-num">' + item.num + '%</p>' +
    420                         '<p class="index-text">' + item.text + '</p>' +
    421                         '<div class="index-control displaynone">' +
    422                             '<p class="index-root-control">' +
    423                                 '<img src="control.png" />' +
    424                             '</p>' +
    425                         '</div>' +
    426                         '</div>');
    427 
    428                 // 获取目标元素的距离父元素的左边距,上边距以及目标元素的宽高
    429                 var target = $('#index1')[0].childNodes[2 * i];
    430                 elWidth = target.offsetWidth;
    431                 elHeight = target.offsetHeight;
    432                 elLeft = target.offsetLeft;
    433                 elTop = target.offsetTop;
    434 
    435                 // 补上父元素距离容器的上边距和左边距
    436                 var diffTop = $('.html-index1')[0].offsetTop,
    437                     diffLeft = $('.html-index1')[0].offsetLeft;
    438 
    439                 // 波浪图
    440                 elArr[elArr.length] = new Wave({
    441                     shape: {
    442                         x1: elWidth + diffLeft,
    443                         y1: elTop + 1 / 2 * elHeight + diffTop - 4,
    444                         x2: rootLeft,
    445                         y2: rootTop + 1 / 2 * rootHeight + diffTop - 4,
    446                         x3: elWidth + diffLeft,
    447                         y3: elTop + 1 / 2 * elHeight + diffTop + 4,
    448                         x4: rootLeft,
    449                         y4: rootTop + 1 / 2 * rootHeight + diffTop + 4,
    450                     },
    451                 });
    452                 zr.add(elArr[elArr.length - 1]);
    453                 initNum++;
    454 
    455                 // 矩形图
    456                 elArr[elArr.length] = new zrender.Rect({
    457                     shape: {
    458                         x: elWidth + diffLeft,
    459                         y: elTop + 1 / 2 * elHeight + diffTop - 6,
    460                          4,
    461                         height: 12,  
    462                     },
    463                     style: {
    464                         fill: '#89b7e8',
    465                         stroke: '#89b7e8',
    466                     }
    467                 })
    468                 zr.add(elArr[elArr.length - 1]);
    469                 initNum++;
    470 
    471                 if (item.text != '离开应用') {
    472                     $('#index1').append('<div class="mouseover-data displaynone" style="top: ' + (56 * (i + 1) + 10 * i) + 'px">' +
    473                         '<p>' +
    474                             '<span class="mouseover-data-text">访问次数</span>' +
    475                             '<span class="mouseover-data-num">' + item.visitNum +'</span>' +
    476                         '</p>' +
    477                         '<p>' +
    478                             '<span class="mouseover-data-text">平均访问时长</span>' +
    479                             '<span class="mouseover-data-num">' + item.avgTime + '</span>' +
    480                         '</p>' +
    481                         '<p>' +
    482                             '<span class="mouseover-data-text">页面跳出率</span>' +
    483                             '<span class="mouseover-data-num">' + item.jumpRate + '%</span>' +
    484                         '</p>' +
    485                     '</div>');
    486                 }
    487             })
    488 
    489             elArr.push('rootLeft');
    490             elArr[elArr.length] = new zrender.Rect({
    491                 shape: {
    492                     x: rootLeft - 10,
    493                     y: rootTop + 1 / 2 * rootHeight - 8,
    494                      10,
    495                     height: 26,  
    496                 },
    497                 style: {
    498                     fill: '#89b7e8',
    499                     stroke: '#89b7e8',
    500                 }
    501             })
    502             zr.add(elArr[elArr.length - 1]);
    503             initNum++;
    504         }
    505 
    506         init(data1);
    507 
    508         function generateNextColumn(targetId, data) {
    509             console.log(data)
    510             var totalData = data;
    511             var target = $(targetId);
    512             var containerId = null,
    513                 nextColumn = null;
    514             var targetWidth = target[0].offsetWidth,
    515                 targetHeight = target[0].offsetHeight,
    516                 targetLeft = target[0].offsetLeft,
    517                 targetTop = target[0].offsetTop;
    518             
    519             var x1, y1, x3, y3;
    520 
    521             if (targetId == '#root') {
    522                 containerId = '#root';
    523                 nextColumn = '#index2';
    524                 $('#index2, #index3, #index4, #index5').empty();
    525                 x1 = targetLeft + targetWidth;
    526                 y1 = targetTop + 1 / 2 * targetHeight - 4;
    527                 x3 = targetLeft + targetWidth;
    528                 y3 = targetTop + 1 / 2 * targetHeight + 4;
    529             } else {
    530                 containerId = target.parent().attr('id');
    531                 var lastNum = containerId.slice(-1);
    532 
    533                 nextColumn = '#index' + (~~lastNum + 1);
    534 
    535                 if ($(nextColumn)[0].childNodes.length) {
    536                     var start = $(nextColumn)[0].childNodes[0].getAttribute('target-index');
    537                     for (var i = start; i < elArr.length; i++) {
    538                         zr.remove(elArr[i]);
    539                     }
    540                 }
    541 
    542                 if (lastNum == 2) {
    543                     $('#index3, #index4, #index5').empty();
    544                 } else if (lastNum == 3) {
    545                     $('#index4, #index5').empty();
    546                 } else {
    547                     $('#index5').empty();
    548                 }
    549 
    550                 var diffTop = $('#' + containerId)[0].offsetTop,
    551                     diffLeft = $('#' + containerId)[0].offsetLeft;
    552                 x1 = diffLeft + targetWidth;
    553                 y1 = targetTop + 1 / 2 * targetHeight + diffTop - 4;
    554                 x3 = diffLeft + targetWidth;
    555                 y3 = targetTop + 1 / 2 * targetHeight + diffTop + 4;
    556             }
    557 
    558             var text = '';
    559             var extraCss = '';
    560             var elWidth,
    561                 elHeight,
    562                 elLeft,
    563                 elTop;
    564             totalData.data.forEach(function(item, i) {
    565                 extraCss = '';
    566                 if (item.text == '离开应用') {
    567                     extraCss = ' html-index-over';
    568                 }
    569                 $(nextColumn).append('<div id="' + initNum + '" class="html-index' + extraCss + '" target-index="' + (initNum + 1) + '" target-data=' + JSON.stringify(item) + '>' +
    570                         '<p class="index-num">' + item.num + '%</p>' +
    571                         '<p class="index-text">' + item.text + '</p>' +
    572                         '<div class="index-control displaynone">' +
    573                             '<p class="index-root-control">' +
    574                                 '<img src="control.png" />' +
    575                             '</p>' +
    576                         '</div>' +
    577                         '</div>');
    578 
    579                 // 获取目标元素的距离父元素的左边距,上边距以及目标元素的宽高
    580                 var nextTarget = $(nextColumn)[0].childNodes[2 * i];
    581                 elWidth = nextTarget.offsetWidth;
    582                 elHeight = nextTarget.offsetHeight;
    583                 elLeft = nextTarget.offsetLeft;
    584                 elTop = nextTarget.offsetTop;
    585 
    586                 // 补的高度差
    587                 var diffHeight = elHeight * (20 + parseFloat(item.num)) / 100 / 2;
    588 
    589                 // 补上父元素距离容器的上边距和左边距
    590                 var diffTop = $(nextColumn)[0].offsetTop,
    591                     diffLeft = $(nextColumn)[0].offsetLeft;
    592 
    593                 // 波浪图
    594                 elArr[elArr.length] = new Wave({
    595                     shape: {
    596                         x1: x1,
    597                         y1: y1,
    598                         x2: diffLeft,
    599                         y2: diffTop + elTop + 1 / 2 * elHeight - diffHeight,
    600                         x3: x3,
    601                         y3: y3,
    602                         x4: diffLeft,
    603                         y4: diffTop + elTop + 1 / 2 * elHeight + diffHeight,
    604                     },
    605                 });
    606                 zr.add(elArr[elArr.length - 1]);
    607                 initNum++;
    608 
    609                 // 矩形图
    610                 elArr[elArr.length] = new zrender.Rect({
    611                     shape: {
    612                         x: diffLeft - 3,
    613                         y: elTop + 1 / 2 * elHeight + diffTop - diffHeight - 2,
    614                          3,
    615                         height: diffHeight * 2 + 4,  
    616                     },
    617                     style: {
    618                         fill: '#89b7e8',
    619                         stroke: '#89b7e8',
    620                     }
    621                 })
    622                 zr.add(elArr[elArr.length - 1]);
    623                 initNum++;
    624 
    625                 if (item.text != '离开应用') {
    626                     $(nextColumn).append('<div class="mouseover-data displaynone" style="top: ' + (56 * (i + 1) + 10 * i) + 'px">' +
    627                         '<p>' +
    628                             '<span class="mouseover-data-text">访问次数</span>' +
    629                             '<span class="mouseover-data-num">' + item.visitNum +'</span>' +
    630                         '</p>' +
    631                         '<p>' +
    632                             '<span class="mouseover-data-text">平均访问时长</span>' +
    633                             '<span class="mouseover-data-num">' + item.avgTime + '</span>' +
    634                         '</p>' +
    635                         '<p>' +
    636                             '<span class="mouseover-data-text">页面跳出率</span>' +
    637                             '<span class="mouseover-data-num">' + item.jumpRate + '%</span>' +
    638                         '</p>' +
    639                     '</div>');
    640                 }
    641             })
    642 
    643             var y = y1 - 10,
    644                 width = 4;
    645             if (targetId == '#root') {
    646                 y = y1 - 4;
    647                 width = 10;
    648             }
    649 
    650             elArr[elArr.length] = new zrender.Rect({
    651                 shape: {
    652                     x: x1,
    653                     y: y,
    654                      width,
    655                     height: 26,
    656                 },
    657                 style: {
    658                     fill: '#89b7e8',
    659                     stroke: '#89b7e8',
    660                 }
    661             })
    662             zr.add(elArr[elArr.length - 1]);
    663             initNum++;
    664 
    665             if (targetId == '#root') {
    666                 $('#17').trigger('click')
    667             }
    668         }
    669 
    670         var lastClickTargetIndex1 = null,  // 记录#index1容器内上次点击的目标在elArr中的位置
    671             lastClickTargetIndex2 = null,
    672             lastClickTargetIndex3 = null,
    673             lastClickTargetIndex4 = null,
    674             lastClickTargetIndex5 = null;
    675         $('#index1, #index2, #index3, #index4, #index5').on('click', '.html-index', function(e) {
    676             var index = ~~$(this).parent().attr('id').slice(-1);
    677             var data = JSON.parse($(this).attr('target-data'));
    678 
    679             if (data.text != '离开应用' && data.text != '其它') {
    680                 if (index == 1) {
    681                     if (lastClickTargetIndex1) {
    682                         elArr[lastClickTargetIndex1].attr('style', {
    683                             fill: '#f1f1f1'
    684                         })
    685                     }
    686                     lastClickTargetIndex1 = $(this).attr('target-index');
    687                 }
    688                 if (index == 2) {
    689                     if (lastClickTargetIndex2) {
    690                         elArr[lastClickTargetIndex2].attr('style', {
    691                             fill: '#f1f1f1'
    692                         })
    693                     }
    694                     lastClickTargetIndex2 = $(this).attr('target-index');
    695                 }
    696                 if (index == 3) {
    697                     if (lastClickTargetIndex3) {
    698                         elArr[lastClickTargetIndex3].attr('style', {
    699                             fill: '#f1f1f1'
    700                         })
    701                     }
    702                     lastClickTargetIndex3 = $(this).attr('target-index');
    703                 }
    704                 if (index == 4) {
    705                     if (lastClickTargetIndex4) {
    706                         elArr[lastClickTargetIndex4].attr('style', {
    707                             fill: '#f1f1f1'
    708                         })
    709                     }
    710                     lastClickTargetIndex4 = $(this).attr('target-index');
    711                 }
    712                 if (index == 5) {
    713                     if (lastClickTargetIndex5) {
    714                         elArr[lastClickTargetIndex5].attr('style', {
    715                             fill: '#f1f1f1'
    716                         })
    717                     }
    718                     lastClickTargetIndex5 = $(this).attr('target-index');
    719                 }
    720                 elArr[$(this).attr('target-index')].attr('style', {
    721                     fill: '#daecff'
    722                 })
    723 
    724                 if (index != 1) {
    725                     generateNextColumn('#' + $(this).attr('id'), data2)
    726                 }
    727             }
    728         })
    729 
    730         $('#index1, #index2, #index3, #index4, #index5').on('mouseover', '.html-index', function() {
    731             var data = JSON.parse($(this).attr('target-data'));
    732             if (data.text != '离开应用' && data.text != '其它') {
    733                 $(this).next().removeClass('displaynone');
    734                 $(this).children('.index-control').removeClass('displaynone');
    735             }
    736         })
    737 
    738         $('#index1, #index2, #index3, #index4, #index5').on('mouseleave', '.html-index', function() {
    739             var data = JSON.parse($(this).attr('target-data'));
    740             if (data.text != '离开应用' && data.text != '其它') {
    741                 $(this).next().addClass('displaynone');
    742                 $(this).children('.index-control').addClass('displaynone');
    743             }  
    744         })
    745 
    746         $('#index1, #index2, #index3, #index4, #index5').on('click', '.index-root-control', function(e) {
    747             var data = JSON.parse($(this).parent().parent().attr('target-data'));
    748 
    749             init(data2);
    750             e.stopPropagation();
    751             generateNextColumn('#root', data2); 
    752         })
    753 
    754         generateNextColumn('#root', data1);
    755     </script>
    756 </body>
    757 </html>
  • 相关阅读:
    Salesforce 大数据量处理篇(一)Skinny Table
    salesforce零基础学习(九十九)Salesforce Data Skew(数据倾斜)
    将博客搬至CSDN,新地址见此文章内容
    Spring Boot
    SpringBoot的模块及结构
    不建议现场注入– Spring IOC
    程序员健康指南
    如何使用Chrome DevTools花式打断点
    这堂课一上40年, 他告诉学生:就算你进了麻省理工, 不懂这个也很难成功!
    非对称加密算法--RSA加密原理
  • 原文地址:https://www.cnblogs.com/youyouluo/p/11625196.html
Copyright © 2020-2023  润新知