Zrender：实现波浪纹效果
Posted youyouluo
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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 htmlfont-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 ulmargin:0;padding:0;list-style:none;outline:none; 15 dl,ddmargin:0; 16 adisplay:inline-block;margin:0;padding:0;text-decoration:none;background:transparent;outline:none;color:#000; 17 a:link,a:visited,a:hover,a:activetext-decoration:none;color:currentColor; 18 a,dt,dd-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent; 19 imgborder:0; 20 pmargin:0; 21 input,button,select,textareamargin:0;padding:0;border:0;outline:0;background-color:transparent; 22 </style> 23 </head> 24 <body> 25 <div id="box" style="height:400px;width: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,hgroupmargin:0;padding:0input,select,textareafont-size:100% 8 fieldset,imgborder:0caption,thtext-align:left 9 h1,h2,h3,h4,h5,h6font-size:100%;font-weight:500ul,ol,lilist-style:none 10 em,ifont-style:normaldeltext-decoration:line-through 11 address,caption,cite,code,dfn,em,th,varfont-style:normal;font-weight:500 12 imgborder:0;max-width:100%input,imgvertical-align:middle 13 input:focus,a:focusoutline:0 14 input:hover-webkit-tap-highlight-color:transparent;-webkit-user-modify:read-write-plaintext-only 15 acolor:#353d44;text-decoration:none;-webkit-tap-highlight-color: transparent 16 a:activeopacity:.7*outline:0;-webkit-tap-highlight-color:transparent;-webkit-box-sizing:border-box.hidedisplay:none.clearfixoverflow:hidden;zoom:1 17 bodymax-width:750px;min-width:320px;line-height:1.5;font-family:"Helvetica Neue", Helvetica, STHeiTi, sans-serifhtmlfont-size:50pxbodyfont-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="width: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 width: 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 width: 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 width: 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: 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>
以上是关于Zrender：实现波浪纹效果的主要内容，如果未能解决你的问题，请参考以下文章