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>
  • 相关阅读:
    【Python】错误、调试和测试
    【c++ primer, 5e】函数指针
    【英语学习】【17/4/1】
    【c++ primer, 5e】函数匹配
    FIRST GAME.
    【Thinking in Java, 4e】访问权限控制
    【c++ primer, 5e】特殊用途语言特性
    Top-Down笔记 #01# 计算机网络概述
    NHibernate之映射文件配置说明
    Web Service 部署到IIS服务器
  • 原文地址:https://www.cnblogs.com/hy928302776/p/7065335.html
Copyright © 2011-2022 走看看