echarts
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.bootcss.com/echarts/4.0.4/echarts.js"></script> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css"> <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> </head> <body style="background: #212529"> <div class="container-fluid"> <div class="row" style="width: 100%;height:100px;"> <div class="col-md-4"></div> <div class="col-md-4"><h1 align="center" style="color:#ffffff">数据库审计</h1></div> <div class="col-md-4"></div> </div> <div class="row"> <div class="col-md-4"> <div id="user" style="width: 100%;height:400px;"></div> </div> <div class="col-md-4"> <div id="ip" style="width: 100%;height:400px;"></div> </div> <div class="col-md-4"> <div id="alert" style="width: 100%;height:400px;"></div> </div> </div> <div class="row" style="width: 100%;height:50px;"></div> <div class="row"> <div class="col-md-12"> <div id="time" style="width: 100%;height:400px;"></div> </div> </div> </div> </body> </html>
<script type="text/javascript"> // 基于准备好的dom,初始化echarts实例 var userChart = echarts.init(document.getElementById('user'), 'dark'); // 指定图表的配置项和数据 var useroption = { title : { text: '数据库用户名分布', x:'center' }, tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, series : [ { name: '数据库用户名', type: 'pie', radius : '55%', center: ['50%', '60%'], data:[ {value:335, name:'user1'}, {value:310, name:'user2'}, {value:234, name:'user3'}, {value:135, name:'user4'}, {value:1548, name:'user5'} ], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; // 基于准备好的dom,初始化echarts实例 var ipChart = echarts.init(document.getElementById('ip'), 'dark'); // 指定图表的配置项和数据 var ipoption = { title : { text: '源IP分布', x:'center' }, tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, series : [ { name: '源IP', type: 'pie', radius : '55%', center: ['50%', '60%'], data:[ {value:335, name:'1.1.1.1'}, {value:123, name:'2.2.2.2'}, {value:20, name:'3.3.3.3'}, {value:30, name:'4.4.4.4'}, {value:1548, name:'5.5.5.5'} ], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; // 基于准备好的dom,初始化echarts实例 var alertChart = echarts.init(document.getElementById('alert'), 'dark'); // 指定图表的配置项和数据 var alertoption = { title : { text: '报警类型分布', x:'center' }, tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, series : [ { name: '报警类型', type: 'pie', radius : '55%', center: ['50%', '60%'], data:[ {value:335, name:'高危时间段查询'}, {value:310, name:'高频查询'}, ], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; // 基于准备好的dom,初始化echarts实例 var timeChart = echarts.init(document.getElementById('time'), 'dark'); // 指定图表的配置项和数据 var timeoption = { title: { text: '报警时间分布' }, tooltip: {}, xAxis: { data: ["0","1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23"] }, yAxis: {}, series: [{ name: '数量', type: 'bar', data: [5, 20, 36, 10, 10, 20, 12, 32, 5, 10, 26, 15, 14, 2, 1, 3, 5, 21, 32, 17, 12, 21, 1, 12] }] }; // 使用刚指定的配置项和数据显示图表。 userChart.setOption(useroption); ipChart.setOption(ipoption); alertChart.setOption(alertoption); timeChart.setOption(timeoption); </script>