S2自定义单元格为图片，图表滚动时，图片资源反复加载🐛

[X-x-start]

🏷 Version

Package	Version
@antv/s2	^1.13.0
@antv/s2-react	^1.13.0
@antv/s2-vue

Sheet Type

• PivotSheet
• [1 ] TableSheet
• GridAnalysisSheet
• StrategySheet

🖋 Description

S2自定义单元格为图片，图表滚动时，图片资源反复加载

⌨️ Code Snapshots

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

const paletteLegendMap = [
{
text: '睡觉',
img: 'https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/AzGyiSa2A8ZMAAAAAAAAAAAAAARQnAQ',
},
{
text: '工作',
img: 'https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/ARdyWRpg3hRAAAAAAAAAAAAAAARQnAQ',
},

{
text: '上学',
img: 'https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*1p5iTYDCkKEAAAAAAAAAAAAAARQnAQ',
},
{
text: '吃饭',
img: 'https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*XHHcSZxmR7gAAAAAAAAAAAAAARQnAQ',
},
{
text: '学习',
img: 'https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*1p5iTYDCkKEAAAAAAAAAAAAAARQnAQ',
},
{
text: '娱乐',
img: 'https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*ZRaUT55QCaoAAAAAAAAAAAAAARQnAQ',
},
{
text: '运动',
img: 'https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*xpO5Sawk8YIAAAAAAAAAAAAAARQnAQ',
},
{
text: '其他',
img: 'https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*e5A3SKifw1EAAAAAAAAAAAAAARQnAQ',
},
];
// 自定义单元格
class CustomDataCell extends DataCell {
drawTextShape() {
const { fieldValue } = this.meta;
const url =
paletteLegendMap.find((v) => v.text === fieldValue)?.img ??
'https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*e5A3SKifw1EAAAAAAAAAAAAAARQnAQ';
const img = new Image();
img.src = url;
const { x, y, width, height } = this.meta;
img.onload = () => {
this.textShape = this.addShape('image', {
attrs: {
x: x + (width - img?.width) / 2,
y: y + (height - img?.height) / 2,
width: img?.width ?? width,
height: img?.height ?? height,
img: url,
},
});
};
}
}

fetch('../data/time-spend.json')
.then((res) => res.json())
.then((s2DataConfig) => {
const s2Theme = {
colCell: {
text: {
opacity: 0,
},
bolderText: {
opacity: 0,
},
cell: {
backgroundColor: '#020138',
},
},
rowCell: {
text: {
opacity: 0,
},
bolderText: {
opacity: 0,
},
cell: {
horizontalBorderColorOpacity: 0,
verticalBorderColorOpacity: 0,
backgroundColor: '#020138',
interactionState: {
// -------------- hover -------------------
hover: {
backgroundColor: 'rgba(255,255,255,0.18)',
},
// -------------- selected -------------------
selected: {
backgroundColor: 'rgba(255,255,255,0.18)',
},
},
},
},
dataCell: {
cell: {
horizontalBorderColorOpacity: 0,
verticalBorderColorOpacity: 0,
crossBackgroundColor: '#020138',
backgroundColor: '#020138',
interactionState: {
// -------------- hover -------------------
hover: {
backgroundColor: 'rgba(255,255,255,0.18)',
},
// -------------- keep hover -------------------
hoverFocus: {
backgroundColor: 'rgba(255, 255, 255, 0.18)',
borderOpacity: 0,
},
// -------------- selected -------------------
selected: {
backgroundColor: 'rgba(255,255,255,0.18)',
},
},
},
},
cornerCell: {
bolderText: {
opacity: 0,
},
cell: {
horizontalBorderColorOpacity: 0,
verticalBorderColorOpacity: 0,
backgroundColor: '#020138',
},
},
splitLine: {
horizontalBorderColorOpacity: 0,
verticalBorderColorOpacity: 0,
},
background: {
color: '#020138',
},
};

const s2Options = {
  width: 1150,
  height: 200,
  showDefaultHeaderActionIcon: false,
  dataCell: (viewMeta) => {
    return new CustomDataCell(viewMeta, viewMeta?.spreadsheet);
  },
  interaction: {
    hoverHighlight: false,
  },
  style: {
    layoutWidthType: 'compact',
    colCfg: {
      hideMeasureColumn: true,
      height: 0,
    },
    cellCfg: {
      height: 80,
    },
  },
};
const PaletteLegend = () => (
  <div className="palette">
    {paletteLegendMap.map((value, key) => (
      <div key={key} className="palette-group">
        <img className="palette-img" src={value.img} />
        <span className="palette-text">{value.text}</span>
      </div>
    ))}
  </div>
);
ReactDOM.render(
  <div className="sheet-wrapper">
    <PaletteLegend />
    <SheetComponent
      dataCfg={s2DataConfig}
      options={s2Options}
      sheetType="pivot"
      themeCfg={{ theme: s2Theme }}
    />
  </div>,
  document.getElementById('container'),
);

});

// 我们用 insert-css 演示引入自定义样式
// 推荐将样式添加到自己的样式文件中
// 若拷贝官方代码，别忘了 npm install insert-css
insertCss(.sheet-wrapper { background: #010138; padding: 16px; } .palette { display: flex; width: 100%; overflow: hidden; margin-bottom: 16px; margin-left: 88px; } .palette-group { display: flex; } .palette-img { width: auto; height: 20px; } .palette-text { color: #FFF; width: 50px; font-size: 12px; padding-left: 8px; });

🔗 Reproduce Link

🤔 Steps to Reproduce

😊 Expected Behavior

期望重复图片资源可以不用重复加载

😅 Current Behavior

图片资源反复加载 图片大还会出现闪烁 demo可使用官网demo 将图表高度改为200
https://s2.antv.vision/zh/examples/case/art#time-spend-abstract

💻 System information

[lcx-seima]

S2 考虑内置 data-cell 绘制图片吧

[X-x-start]

S2 考虑内置 data-cell 绘制图片吧

这个不就是官网的自定义data-cell吗

[X-x-start]

这是来自QQ邮箱的假期自动回复邮件。   您好，你的邮件我已经收到。

[X-x-start]

这是来自QQ邮箱的假期自动回复邮件。   您好，你的邮件我已经收到。

[love-lulu]

没明白解决方案是什么 ？

[X-x-start]

这是来自QQ邮箱的假期自动回复邮件。   您好，你的邮件我已经收到。

[lwwe-w]

解决了吗？

[X-x-start]

这是来自QQ邮箱的假期自动回复邮件。   您好，你的邮件我已经收到。

[lijinke666]

2.0 版本已优化

[github-actions]

你好 @X-x-start，该功能或缺陷已经在 2.0 next 版本 中支持或修复，next 版本目前处于内测中, 感谢你的支持与理解。

如有任何 2.0 版本 问题，请前往讨论区 或 查看文档, 抢先试用:

yarn add @antv/s2@next  # pnpm add @antv/s2@next
yarn add @antv/s2-react@next  # pnpm add @antv/s2-react@next
yarn add @antv/s2-vue@next  # pnpm add @antv/s2-vue@next

Hello, @X-x-start, This feature or flaw has been supported or fixed in 2.0 next version, next version is currently in private beta, thank you for your support and understanding.

Any 2.0 version issues, please go to discussion, or view docs, the first trial: