order: 4 title: 交叉表 group: title: 案例展示

order: 2

基本用法

  • 表格渲染上，维度作为 左表头，指标作为 顶表头。
  1. /**
  2.  * transform: true
  3.  * defaultShowCode: true
  4.  */
  5. import React from 'react';
  6. import { PivotTable } from 'chart-render';
  8. export default () => (
  9.   <PivotTable
  10.     style={{ maxHeight: 400, overflow: 'auto' }}
  11.     meta={[
  12.       { id: 'subs', name: '子公司', isDim: true, isRate: false },
  13.       { id: 'shop', name: '门店', isDim: true, isRate: false },
  14.       { id: 'season', name: '季度', isDim: true, isRate: false },
  15.       { id: 'month', name: '月份', isDim: true, isRate: false },
  16.       { id: 'valueA', name: '指标A', isDim: false, isRate: false },
  17.       { id: 'valueB', name: '指标B', isDim: false, isRate: true },
  18.     ]}
  19.     data={[
  20.       {
  21.         subs: '上海子公司',
  22.         shop: '上海大宁店',
  23.         season: '一季度',
  24.         month: '2022-01',
  25.         valueA: 782,
  26.         valueB: 0.566,
  27.       },
  28.       {
  29.         subs: '上海子公司',
  30.         shop: '上海大宁店',
  31.         season: '一季度',
  32.         month: '2022-02',
  33.         valueA: 856,
  34.         valueB: 0.403,
  35.       },
  36.       {
  37.         subs: '上海子公司',
  38.         shop: '上海大宁店',
  39.         season: '一季度',
  40.         month: '2022-03',
  41.         valueA: 886,
  42.         valueB: 0.555,
  43.       },
  44.       {
  45.         subs: '上海子公司',
  46.         shop: '上海大宁店',
  47.         season: '二季度',
  48.         month: '2022-04',
  49.         valueA: 555,
  50.         valueB: 0.444,
  51.       },
  52.       {
  53.         subs: '上海子公司',
  54.         shop: '上海大宁店',
  55.         season: '二季度',
  56.         month: '2022-05',
  57.         valueA: 444,
  58.         valueB: 0.333,
  59.       },
  60.       {
  61.         subs: '上海子公司',
  62.         shop: '上海曹家渡店',
  63.         season: '一季度',
  64.         month: '2022-01',
  65.         valueA: 922,
  66.         valueB: 0.778,
  67.       },
  68.       {
  69.         subs: '上海子公司',
  70.         shop: '上海曹家渡店',
  71.         season: '一季度',
  72.         month: '2022-02',
  73.         valueA: 888,
  74.         valueB: 0.887,
  75.       },
  76.       {
  77.         subs: '上海子公司',
  78.         shop: '上海曹家渡店',
  79.         season: '一季度',
  80.         month: '2022-03',
  81.         valueA: 879,
  82.         valueB: 0.87,
  83.       },
  84.       {
  85.         subs: '上海子公司',
  86.         shop: '上海曹家渡店',
  87.         season: '二季度',
  88.         month: '2022-04',
  89.         valueA: 800,
  90.         valueB: 0.723,
  91.       },
  92.       {
  93.         subs: '上海子公司',
  94.         shop: '上海曹家渡店',
  95.         season: '二季度',
  96.         month: '2022-05',
  97.         valueA: 813,
  98.         valueB: 0.789,
  99.       },
  100.       {
  101.         subs: '浙江子公司',
  102.         shop: '亲橙里',
  103.         season: '一季度',
  104.         month: '2022-01',
  105.         valueA: 500,
  106.         valueB: 0.463,
  107.       },
  108.       {
  109.         subs: '浙江子公司',
  110.         shop: '亲橙里',
  111.         season: '一季度',
  112.         month: '2022-02',
  113.         valueA: 833,
  114.         valueB: 0.456,
  115.       },
  116.       {
  117.         subs: '浙江子公司',
  118.         shop: '亲橙里',
  119.         season: '一季度',
  120.         month: '2022-03',
  121.         valueA: 821,
  122.         valueB: 0.442,
  123.       },
  124.       {
  125.         subs: '浙江子公司',
  126.         shop: '亲橙里',
  127.         season: '二季度',
  128.         month: '2022-04',
  129.         valueA: 834,
  130.         valueB: 0.456,
  131.       },
  132.       {
  133.         subs: '浙江子公司',
  134.         shop: '亲橙里',
  135.         season: '二季度',
  136.         month: '2022-05',
  137.         valueA: 803,
  138.         valueB: 0.7,
  139.       },
  140.     ]}
  141.   />
  142. );

高级用法

自定义单元格渲染

  1. /**
  2.  * transform: true
  3.  * defaultShowCode: true
  4.  */
  5. import React from 'react';
  6. import { PivotTable } from 'chart-render';
  8. export default () => (
  9.   <PivotTable
  10.     style={{ maxHeight: 400, overflow: 'auto' }}
  11.     cellRender={(val, dimRecord, indId) => (
  12.       <div>
  13.         <p>参数表：</p>
  14.         <p
  15.           style={{
  16.             color: ['red', 'orange', 'yellow', 'green', 'blue'][
  17.               Object.keys(dimRecord).length
  18.             ],
  19.           }}
  20.         >
  21.           {val}
  22.         </p>
  23.         <p>{JSON.stringify(dimRecord)}</p>
  24.         <p>{JSON.stringify(indId)}</p>
  25.       </div>
  26.     )}
  27.     meta={[
  28.       { id: 'subs', name: '子公司', isDim: true, isRate: false },
  29.       { id: 'shop', name: '门店', isDim: true, isRate: false },
  30.       { id: 'season', name: '季度', isDim: true, isRate: false },
  31.       { id: 'month', name: '月份', isDim: true, isRate: false },
  32.       { id: 'valueA', name: '指标A', isDim: false, isRate: false },
  33.       { id: 'valueB', name: '指标B', isDim: false, isRate: true },
  34.     ]}
  35.     data={[
  36.       {
  37.         subs: '上海子公司',
  38.         shop: '上海大宁店',
  39.         season: '一季度',
  40.         month: '2022-01',
  41.         valueA: 782,
  42.         valueB: 0.566,
  43.       },
  44.       {
  45.         subs: '上海子公司',
  46.         shop: '上海大宁店',
  47.         season: '一季度',
  48.         month: '2022-02',
  49.         valueA: 856,
  50.         valueB: 0.403,
  51.       },
  52.       {
  53.         subs: '上海子公司',
  54.         shop: '上海大宁店',
  55.         season: '一季度',
  56.         month: '2022-03',
  57.         valueA: 886,
  58.         valueB: 0.555,
  59.       },
  60.       {
  61.         subs: '上海子公司',
  62.         shop: '上海大宁店',
  63.         season: '二季度',
  64.         month: '2022-04',
  65.         valueA: 555,
  66.         valueB: 0.444,
  67.       },
  68.       {
  69.         subs: '上海子公司',
  70.         shop: '上海大宁店',
  71.         season: '二季度',
  72.         month: '2022-05',
  73.         valueA: 444,
  74.         valueB: 0.333,
  75.       },
  76.       {
  77.         subs: '上海子公司',
  78.         shop: '上海曹家渡店',
  79.         season: '一季度',
  80.         month: '2022-01',
  81.         valueA: 922,
  82.         valueB: 0.778,
  83.       },
  84.       {
  85.         subs: '上海子公司',
  86.         shop: '上海曹家渡店',
  87.         season: '一季度',
  88.         month: '2022-02',
  89.         valueA: 888,
  90.         valueB: 0.887,
  91.       },
  92.       {
  93.         subs: '上海子公司',
  94.         shop: '上海曹家渡店',
  95.         season: '一季度',
  96.         month: '2022-03',
  97.         valueA: 879,
  98.         valueB: 0.87,
  99.       },
  100.       {
  101.         subs: '上海子公司',
  102.         shop: '上海曹家渡店',
  103.         season: '二季度',
  104.         month: '2022-04',
  105.         valueA: 800,
  106.         valueB: 0.723,
  107.       },
  108.       {
  109.         subs: '上海子公司',
  110.         shop: '上海曹家渡店',
  111.         season: '二季度',
  112.         month: '2022-05',
  113.         valueA: 813,
  114.         valueB: 0.789,
  115.       },
  116.       {
  117.         subs: '浙江子公司',
  118.         shop: '亲橙里',
  119.         season: '一季度',
  120.         month: '2022-01',
  121.         valueA: 500,
  122.         valueB: 0.463,
  123.       },
  124.       {
  125.         subs: '浙江子公司',
  126.         shop: '亲橙里',
  127.         season: '一季度',
  128.         month: '2022-02',
  129.         valueA: 833,
  130.         valueB: 0.456,
  131.       },
  132.       {
  133.         subs: '浙江子公司',
  134.         shop: '亲橙里',
  135.         season: '一季度',
  136.         month: '2022-03',
  137.         valueA: 821,
  138.         valueB: 0.442,
  139.       },
  140.       {
  141.         subs: '浙江子公司',
  142.         shop: '亲橙里',
  143.         season: '二季度',
  144.         month: '2022-04',
  145.         valueA: 834,
  146.         valueB: 0.456,
  147.       },
  148.       {
  149.         subs: '浙江子公司',
  150.         shop: '亲橙里',
  151.         season: '二季度',
  152.         month: '2022-05',
  153.         valueA: 803,
  154.         valueB: 0.7,
  155.       },
  156.     ]}
  157.   />
  158. );

可展开/收起

  1. /**
  2.  * transform: true
  3.  * defaultShowCode: true
  4.  */
  5. import React, { useState } from 'react';
  6. import { PivotTable } from 'chart-render';
  8. export default () => {
  9.   const [expandable, setExpandable] = useState(false);
  11.   return (
  12.     <>
  13.       <label>
  14.         可展开/收缩：
  15.         <input
  16.           type="checkbox"
  17.           value={expandable}
  18.           onChange={() => setExpandable(!expandable)}
  19.         />
  20.       </label>
  21.       <PivotTable
  22.         leftExpandable={expandable}
  23.         showSubtotal={false}
  24.         meta={[
  25.           { id: 'subs', name: '子公司', isDim: true, isRate: false },
  26.           { id: 'shop', name: '门店', isDim: true, isRate: false },
  27.           { id: 'season', name: '季度', isDim: true, isRate: false },
  28.           { id: 'month', name: '月份', isDim: true, isRate: false },
  29.           { id: 'valueA', name: '指标A', isDim: false, isRate: false },
  30.           { id: 'valueB', name: '指标B', isDim: false, isRate: true },
  31.         ]}
  32.         data={[
  33.           {
  34.             subs: '上海子公司',
  35.             shop: '上海大宁店',
  36.             season: '一季度',
  37.             month: '2022-01',
  38.             valueA: 782,
  39.             valueB: 0.566,
  40.           },
  41.           {
  42.             subs: '上海子公司',
  43.             shop: '上海大宁店',
  44.             season: '一季度',
  45.             month: '2022-02',
  46.             valueA: 856,
  47.             valueB: 0.403,
  48.           },
  49.           {
  50.             subs: '上海子公司',
  51.             shop: '上海大宁店',
  52.             season: '一季度',
  53.             month: '2022-03',
  54.             valueA: 886,
  55.             valueB: 0.555,
  56.           },
  57.           {
  58.             subs: '上海子公司',
  59.             shop: '上海大宁店',
  60.             season: '二季度',
  61.             month: '2022-04',
  62.             valueA: 555,
  63.             valueB: 0.444,
  64.           },
  65.           {
  66.             subs: '上海子公司',
  67.             shop: '上海大宁店',
  68.             season: '二季度',
  69.             month: '2022-05',
  70.             valueA: 444,
  71.             valueB: 0.333,
  72.           },
  73.           {
  74.             subs: '上海子公司',
  75.             shop: '上海曹家渡店',
  76.             season: '一季度',
  77.             month: '2022-01',
  78.             valueA: 922,
  79.             valueB: 0.778,
  80.           },
  81.           {
  82.             subs: '上海子公司',
  83.             shop: '上海曹家渡店',
  84.             season: '一季度',
  85.             month: '2022-02',
  86.             valueA: 888,
  87.             valueB: 0.887,
  88.           },
  89.           {
  90.             subs: '上海子公司',
  91.             shop: '上海曹家渡店',
  92.             season: '一季度',
  93.             month: '2022-03',
  94.             valueA: 879,
  95.             valueB: 0.87,
  96.           },
  97.           {
  98.             subs: '上海子公司',
  99.             shop: '上海曹家渡店',
  100.             season: '二季度',
  101.             month: '2022-04',
  102.             valueA: 800,
  103.             valueB: 0.723,
  104.           },
  105.           {
  106.             subs: '上海子公司',
  107.             shop: '上海曹家渡店',
  108.             season: '二季度',
  109.             month: '2022-05',
  110.             valueA: 813,
  111.             valueB: 0.789,
  112.           },
  113.           {
  114.             subs: '浙江子公司',
  115.             shop: '亲橙里',
  116.             season: '一季度',
  117.             month: '2022-01',
  118.             valueA: 500,
  119.             valueB: 0.463,
  120.           },
  121.           {
  122.             subs: '浙江子公司',
  123.             shop: '亲橙里',
  124.             season: '一季度',
  125.             month: '2022-02',
  126.             valueA: 833,
  127.             valueB: 0.456,
  128.           },
  129.           {
  130.             subs: '浙江子公司',
  131.             shop: '亲橙里',
  132.             season: '一季度',
  133.             month: '2022-03',
  134.             valueA: 821,
  135.             valueB: 0.442,
  136.           },
  137.           {
  138.             subs: '浙江子公司',
  139.             shop: '亲橙里',
  140.             season: '二季度',
  141.             month: '2022-04',
  142.             valueA: 834,
  143.             valueB: 0.456,
  144.           },
  145.           {
  146.             subs: '浙江子公司',
  147.             shop: '亲橙里',
  148.             season: '二季度',
  149.             month: '2022-05',
  150.             valueA: 803,
  151.             valueB: 0.7,
  152.           },
  153.         ]}
  154.       />
  155.     </>
  156.   );
  157. };