小智报表实战系列 -2 商品销售交叉表

<link rel="stylesheet" href="/xzreport.css"><script type="module" src="/xzreportdesigner.js"></script>const dataset = [ //  添加数据集按钮  { id: 1,value: "新建Json数据集"  },  { id: 2,value: "新建Http接口数据集" },  { id: 3,value: "API服务数据集"  },  { id: 4,value: "外部数据集"  }];const options = {  row: 100,  col: 25,  width: () => document.documentElement.clientWidth,  renderArrow: true,  // 是否显式 扩展方向图标  showFreeze: true,  // 是否显式冻结线  showGrid: true,   // 是否显式网格线  showPreviewToolbar: true,  showBottombar: true,  showSelect: true,  dataset}const _onUpdateDatasetList = [  {    "name": "商品区域销售",    "id": "商品区域销售",    "type": 4,    "columns": [      {"name": "公司名称","data_type": 3}, {"name": "商品类别","data_type": 3},{"name": "商品",   "data_type": 3},      {"name": "区域名称", "data_type": 3},{"name": "销售额",  "data_type": 2},{"name": "年份",   "data_type": 3},      {"name": "季度",     "data_type": 3},{"name": "目标完成比",  "data_type": 2}],    "params": [      {"name": "商品",   "data_type": 3}, { "name": "区域名称",  "data_type": 3 },{ "name": "公司名称",  "data_type": 3 }]  }]options.onUpdateDatasetList =  () => {  return new Promise((resolve, reject) => {//Promise 异步回调    resolve(_onUpdateDatasetList);// 返回后台获取的数据集列表  })}onMounted(() => {// 页面加载时,初始化报表设计器  sheetDesign = XZReportDesigner("#action_3_4_main", options);})

const {config, data} = sheetDesign.getData(); //报表设计器的保存事件

const option = {  mode: 'read', view: { width: 1920px, height:1080px },   // 设置报表的宽高  renderArrow: true,  // 是否显式 扩展方向图标  showFreeze: true,  // 是否显式冻结线  showGrid: true,   // 是否显式网格线  showPreviewToolbar: true,  showBottombar: true,  showSelect: true,};......onMounted(() => {....    //sheetConfig是报表设计器中getData().config    //data       是报表设计器中getData().data    spreadSheet = XZReport("#containerxzreport1", option, sheetConfig, data);....}实现数据接口const onUpdateData = (datasets, params) => {  console.log("datasets:", datasets, "params:", params);  return new Promise((resolve, reject) => {    //假设从axios远程拿到的报表渲染数据放在__updateData中（和getData().data不是一个东西）    resolve(queryonUpdateDataFrom(datasets, params,__updateData));  })}option.onUpdateData = onUpdateData