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/A1p5iTYDCkKEAAAAAAAAAAAAAARQnAQ', }, { text: '吃饭', img: 'https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/AXHHcSZxmR7gAAAAAAAAAAAAAARQnAQ', }, { text: '学习', img: 'https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A1p5iTYDCkKEAAAAAAAAAAAAAARQnAQ', }, { text: '娱乐', img: 'https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/AZRaUT55QCaoAAAAAAAAAAAAAARQnAQ', }, { text: '运动', img: 'https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/AxpO5Sawk8YIAAAAAAAAAAAAAARQnAQ', }, { text: '其他', img: 'https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/Ae5A3SKifw1EAAAAAAAAAAAAAARQnAQ', }, ]; // 自定义单元格 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邮箱的假期自动回复邮件。   您好，你的邮件我已经收到。