echarts大数据统计图表扩展特效代码下载
1. 引入JS
<script src="jquery.min.js"></script><script src="echarts.min.js"></script><script src="monitor.js"></script>
2. HTML代码
<div class="main"> <div id="layer02" class="layer" style="height:15%;"> <div id="layer02_01" style="width:20%;"> <div class="layer02-data"> <span style="font-size:26px;">400000</span> <span style="font-size:16px;">台</span> </div> <canvas width="200" height="100"></canvas> </div> <div id="layer02_02" style="width:20%;"> <div class="layer02-data"> <span style="font-size:26px;">400000</span> <span style="font-size:16px;">KB</span> </div> <canvas width="200" height="100"></canvas> </div> <div id="layer02_03" style="width:21%;"> <div class="layer02-data"> <span style="font-size:26px;">31457280</span> <span style="font-size:16px;">MB</span> </div> <canvas width="200" height="100"></canvas> </div> <div id="layer02_04" style="width:12%;"> <div class="layer02-data"> <span style="font-size:26px;">50</span> <span style="font-size:16px;">PB</span> </div> <canvas width="120" height="100"></canvas> </div> <div id="layer02_05" style="width:12%;"> <div class="layer02-data"> <span style="font-size:26px;">25</span> <span style="font-size:16px;">个</span> </div> <canvas width="120" height="100"></canvas> </div> <div id="layer02_06" style="width:12%;"> <div class="layer02-data"> <span style="font-size:26px;">5</span> <span style="font-size:16px;">个</span> </div> <canvas width="120" height="100"></canvas> </div> </div> <div id="layer03" class="layer" style="height:40%;"> <div id="layer03_left" style="width:48%;" class="layer03-panel"> <div id="layer03_left_label01" class="layer03-left-label">接入机型占比</div> <!-- <div id="layer03_left_label02" class="layer03-left-label">(左)在线数量 (右)上线率</div> --> <div id="layer03_left_01" class="layer03-left-chart" style="width:16%;"> <canvas width="100" height="200" style="margin:30px 0 0 20px;"></canvas> </div> <div id="layer03_left_02" class="layer03-left-chart" style="width:80%;"></div> <!-- <div id="layer03_left_03" class="layer03-left-chart" style="width:80%;"></div> --> </div> <div id="layer03_right" style="width:50%;" class="layer03-panel"> <div id="layer03_right_label">存储</div> <div id="layer03_right_chart01" class="layer03-right-chart"> <canvas width="130" height="150" style="margin:40px 0 0 20px;"></canvas> <div class="layer03-right-chart-label">Hdfs</div> </div> <div id="layer03_right_chart02" class="layer03-right-chart"> <canvas width="130" height="150" style="margin:40px 0 0 20px;"></canvas> <div class="layer03-right-chart-label">Rdbms</div> </div> <div id="layer03_right_chart03" class="layer03-right-chart"> <canvas width="130" height="150" style="margin:40px 0 0 20px;"></canvas> <div class="layer03-right-chart-label">Rdies</div> </div> </div> </div> <div id="layer04" class="layer" style="height:30%;"> <div id="layer04_left" class="layer04-panel"> <div id="layer04_left_label" class="layer04-panel-label">30天日均线流量趋势</div> <div id="layer04_left_chart" class="layer04-panel-chart"></div> </div> <div id="layer04_right" class="layer04-panel"> <div id="layer04_right_label" class="layer04-panel-label"> <span>集群性能/</span><span style="color:#00A09A;">近一个小时</span> </div> <div id="layer04_right_chart" class="layer04-panel-chart"></div> </div> </div> </div>
