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,[可选] });