小智报表实战系列 -1 商品销售环比占比报表

随着企业业务规模的扩大，对商品销售情况的精准掌握变得尤为重要。为此，企业亟需制作一张《商品季度销售排行榜》报表，以全面、系统地展示各商品在不同季度的销售表现。该报表需具备总计、小计功能，便于快速概览整体及细分销售数据；同时，需支持环比分析，以揭示销售趋势；此外，还需实现组内排名，明确商品在同类中的竞争力。为满足不同用户需求，报表应支持参数查询功能，允许灵活筛选数据。最后，为了方便数据传播与归档，报表需提供查询、翻页、导出、打印功能。

<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": "商品区域销售",    "columns": [  //列描述   3:文本  2:数字  1:日期      {        "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      }    ]  }]
options.onUpdateDatasetList =  () => {  return new Promise((resolve, reject) => {//Promise 异步回调    resolve(_onUpdateDatasetList);// 返回后台获取的数据集列表  })}onMounted(() => {// 页面加载时,初始化报表设计器  sheetDesign = XZReportDesigner("#action_2_8_main", options);})

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

在前面报表设计器保存数据中，已经提交到业务后台保存；现在只需要axios.get提取config,data这2个json数据

const option = {  mode: 'read', view: { width: 1920px, height:1080px },   // 设置报表的宽高  renderArrow: true,  // 是否显式 扩展方向图标  showFreeze: true,  // 是否显式冻结线  showGrid: true,   // 是否显式网格线  showPreviewToolbar: true,  showBottombar: true,  showSelect: true,};