系统后台图表生成文档说明-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,[可选]
});
原文地址:https://www.cnblogs.com/winyou/p/5474478.html