zoukankan      html  css  js  c++  java
  • charts柱状图,定时刷新

    option:

    var dataoptionone = {
            title : {
                text: '数据存储情况',
                subtext: '数据表',
                x:'center'
            },
            tooltip: {
                  show: true
                 },
            toolbox: {
                  show: true,
                  feature: {
                      dataView: { show: true, readOnly: false },
    //                   magicType: { show: true, type: ['line', 'bar'] },
                      restore: { show: true },
                      saveAsImage: { show: true }
                 }
             },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['表的记录数','表的空间占有量']
            },
            xAxis: {
                type: 'category',
    //             boundaryGap: false,//加上x轴会是个点
                data: []
            },
            yAxis: {
                type: 'value'
            },
            series : [
               {
                   name:"表的记录数",
                   type:"bar",
                   itemStyle:{
                       normal:{
                           color:"#1C90DB",
                           label: {
                               show: true,
                               position: 'top',
    //                            formatter: '{c}'
                               formatter: '{b}
    {c}'
                           }
                       }
                   },
                   data:[]
               }, {
                   name:"表的空间占有量",
                   type:"bar",
                   itemStyle:{
                       normal:{
                           color:"#D070D0",
                           label: {
                               show: true,
                               position: 'top',
    //                            formatter: '{c}'
                               formatter: '{b}
    {c}K'
                           }
                       }
                   },
                   data:[]
               }
            ]
        };

    js:代码

    //查询表的记录数以及表的空间占有量
        $(function(){
            //第一个图
            var dataStorage_Chart = echarts.init(document.getElementById('dataone')); 
            var data_x =[];
            var data_count_y =[];
            var size_y=[];
            var tableCount ='${tableCount}';
            var tablelimit =4;
            var tablepage =1;
            var count =tableCount/4;
            init();
            clearInterval(timer1);
            timer1 =setInterval(function() {
                data_x =[];
                data_count_y =[];
                size_y=[];
                if(tablepage<count){
                    tablepage+=1;
                }else{
                    tablepage=1;
                }
                init();
            }, 5000)
            
            function init(){
                $.post("init/findImportTables",{page:tablepage,limit:tablelimit},function(msg){
                    $.each(msg,function(index,val){
                        data_x.push(val.table_name.insertStrPerIndex(10,"
    "));
                        data_count_y.push(val.data_count!=null?val.data_count:0);
                        if(val.size!=null){
                            var s =val.size.toUpperCase();
                            if(s.lastIndexOf("M")>0){
                                s =s.substring(0,s.length-1)*1024;
                            }else if(s.lastIndexOf("K")>0){
                                s =s.substring(0,s.length-1)*1;
                            }else{
                                s=s*1;
                            }
                            size_y.push(s);
                        }else{
                            size_y.push(0);
                        }
                        
                    })
                    console.log("y:"+size_y);
                    dataoptionone.xAxis.data=data_x;
                    dataoptionone.series[0].data=data_count_y;
                    dataoptionone.series[1].data=size_y;
                    dataStorage_Chart.setOption(dataoptionone); 
                });
            }
        })
    View Code

    jsp:

    <div id="dataone" style="height: 400px;">
                                    </div>
  • 相关阅读:
    Java基础--线程创建方式
    Java基础--static关键字
    Java基础--异常处理
    mybatis的#{}和${}的区别以及order by注入问题
    前后端分离结构中使用shiro进行权限控制
    Java FTP下载文件
    10个经典智力推理题!据说答对7道,智力在140!
    Java面试题总结之数据结构、算法和计算机基础(刘小牛和丝音的爱情故事1)
    Java面试题总结之JDBC 和Hibernate
    Java面试题总结之数据库与SQL语句
  • 原文地址:https://www.cnblogs.com/hy928302776/p/7065335.html
Copyright © 2011-2022 走看看