* { margin:0; padding:0; } body { background:#000; } .fl { float:left; } .fr { float:right; } .cf:after { content:''; clear:both; display:table; } #home { width:1990px; margin:0 auto; } #home .svgWrap { position:relative; margin-bottom:1px; cursor:pointer; } #home .svgWrap:nth-child(2n) { margin-top:-90px; margin-left:-48px; } #home .svgWrap:nth-child(1n) { margin-left:-47px; } #home .svgWrap:nth-child(14n) { display:none; } .data { position:absolute; left:80px; top:64px; color:#fff; font-size:20px; } .scaleInfo { position:absolute; left:0; top:0; z-index:999; width:254px; height:229px; background:#000 url("img/icon-bg.png") no-repeat; color:#fff; font-size:26px; text-align:center; padding-top:60px; box-sizing:border-box; display:none; } .scaleInfo h3 { margin-bottom:20px; }
本地只是测试的假数据,大家可以替换自己想要的数据,这个用svg实现起来要比canvas好实现而且扩展性很强