zoukankan      html  css  js  c++  java
  • 系统后台图表生成文档说明-javascript

    1.引入jquery插件文件datas.js

    2.各图表分类

    • 表格
    $('#’+tableId).mTable({
        url:'',                        //数据来源,[必填]
        pageNum:1,                     //分页,默认为1,[可选]
        data:'',                      //请求查询的数据,[可选]
        format:[],                   //表格格式化顺序,根据返回的json的key值进行格式化,[必填]
        datePicker:false,           //表格是否包含日期组件,默认为false,[可选]
        init:false,                //表格日期组件初始化,[可选]
        callback:function($table){//表格回调处理,可增加超链接,单独处理某一列,[可选]
        }
    });
    • 表格分页器
    $('#'+pageId).mPage({
        pageNum:1,                     //当前页,默认为1,[可选]
        callback:function(pageNum){    //分页器回调,重置表格,[必填]
            //加载表格,即
            $('#'+tableId).mTable({...});
        }
    });
    • 图表控件
    $("#"+chartId).mChart({
        url:'',               //请求数据URL,[必填]
        type:'line',          //图表类型,默认是折线图,柱状图type为column,[可选]
        options:this.mData,  //图表配置,已默认加载,[可选]
        data:'',            //入参,查询条件,[可选]
        name:'订单量',      //图表参数名称,[可选]
        range :1,          //图表横轴间距,已自动计算部分,[可选]
        init:false        //是否初始化日期控件和select控件值,默认首次加载时需为true,[可选]
     });
    • 选择下拉框
    $('.ui-select").mSelect({
        target:'chart',             //选择框改变,对应加载的控件id,暂时只支持chart组件,[必填]
        url:'',                    //选择框改变,加载的数据源,[必填]
        type:'line'               //选择框改变,加载的chart组件类型,支持line,column,[可选]
    });
    • 日期控件
    $("#"+datepicker).mDate({
        url:'',                  //加载的url,[必填]
        target:'chart',         //目标对象的id,[必填]
        type:'chart',          //修改的数据图表型,可选值chart和table,默认是chart,[可选]
        format:[],            //表格格式化格式标准,[可选]
        name:'',             //图表series的名称,[可选]
        chartType:'line'    //图表类型,可选值line和column,默认值是line,[可选]
    });
  • 相关阅读:
    VSCode:无法创建临时目录
    网页很卡的原因
    用css做三角形
    移动端加载页面出现抖动、未加载完成时布局杂乱问题解决
    vue中使用axios进行ajax请求数据(跨域配置)
    fetch和XMLHttpRequest
    1-5-JS基础-数组应用及实例应用
    图片左右切换
    轮播图片切换
    轮播图片切换(函数合并)
  • 原文地址:https://www.cnblogs.com/winyou/p/5474478.html
Copyright © 2011-2022 走看看