请问透视表中如何插入迷你图 #2197

liran19960215 · 2023-05-10T08:58:13Z

liran19960215
May 10, 2023

如下图所示，按照趋势图插入迷你图的demo，尝试在透视图中添加迷你图，但是效果不及预期
#2100

请问是配置的有问题吗？目前在官网上只有趋势表插入迷你图的demo，但是趋势表的数据结构又与透视表不同，所以插入迷你图这块儿可能不是很清楚麻烦指点一二谢谢！

demo地址和链接如下
https://s2.antv.antgroup.com/zh/examples/analysis/sort/#group-sort

import React from 'react';
import ReactDOM from 'react-dom';
import { SheetComponent } from '@antv/s2-react';
import '@antv/s2-react/dist/style.min.css';

fetch(
  'https://gw.alipayobjects.com/os/bmw-prod/21ffc284-50a2-4a30-8bb0-b2f9ac4a8fbc.json',
)
  .then((res) => res.json())
  .then((data) => {
    const s2DataConfig = {
      fields: {
        rows: ['province', 'city'],
        columns: ['type'],
        values: ['price'],
      },
      meta: [
        {
          field: 'province',
          name: '省份',
        },
        {
          field: 'city',
          name: '城市',
        },
        {
          field: 'type',
          name: '商品类别',
        },
        {
          field: 'price',
          name: '价格',
        },
      ],
      data: [
        {
          province: "浙江",
          city: "杭州",
          type: "纸张",
          price: {
            values: {
              "type": "line",
              "data": [
                {
                  "type": "笔",
                  "value": 100
                },
                {
                  "type": "纸张",
                  "value": 100
                },
              ],
              "encode": {
                "x": "x",
                "y": "value"
              }
            }
          }
        },
      ],
    };

    const s2Options = {
      width: 600,
      height: 480,
    };

    ReactDOM.render(
      <SheetComponent
        dataCfg={s2DataConfig}
        options={s2Options}
      />,
      document.getElementById('container'),
    );
  });