Power BI DAX 实现产品图片3D展示

wujunmin

发布于 2025-05-17 05:18:31

4800

代码可运行

文章被收录于专栏：wujunminwujunmin

运行总次数：0

代码可运行

我的职业生涯很长时间是买手，因此本公众号有非常多商品管理案例。今天继续这方面的分享，介绍一种在Power BI 实现产品3D展示的可能性。

效果如下，拖动滑杆可以多角度查看产品照片（最多可扩展到360度）。

实现方法是DAX+HTML。

首先准备好多角度的产品素材，可以拍摄每个产品的短视频，视频为环绕产品360度（按需求）拍摄。

接着把视频的每一帧抽取为静态图片。网上有工具直接抽取，也可以视频转GIF后抽取。

抽取出来的图片通常很多，如果是360度旋转，建议每个产品保留36张图片即可，即每10度一张。当然图片越多，后期Power BI 旋转越丝滑，但会带来数据储存压力。

这些图片都是本地图片，把图片批量转码为base64，方便导入Power BI。每张图片需要标记出场顺序（即按照视频的拍摄时间先后）。

在Power BI 新建以下HTML度量值，调用图片：

HTML.图片显示 = 
"<head>
    <style>
        .image-container {
            text-align: center;
            margin: 0;
            padding: 10px;
        }
        .image-container img {
            max-width: 100%;
            height: 251px;
            display: block;
            margin: 0 auto;
        }
        .slider-container {
            margin: 10px 0;
            padding: 0 10px;
        }
        .slider {
            width: 100%;
            height: 8px;
            background: #ddd;
            outline: none;
            -webkit-appearance: none;
        }
        .slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #3498db;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class='image-container'>
        <img id='current-image' src='" & MAXX(FILTER('Table', 'Table'[顺序] = 1), [图片]) & "' alt='当前图片'>
    </div>
    <div class='slider-container'>
        <input type='range' min='1' max='1' value='1' class='slider' id='image-slider'>
    </div>
    <script>
        function initImageSlider() {
            const imageData = [" & CONCATENATEX('Table', "'" & [图片] & "'", ",", [顺序], ASC) & "];
            const slider = document.getElementById('image-slider');
            const currentImage = document.getElementById('current-image');
            if (!slider || !currentImage || imageData.length === 0) return;

            slider.max = imageData.length;
            
            function updateImage(index) {
                index = Math.max(1, Math.min(index, imageData.length));
                currentImage.src = imageData[index - 1];
                slider.value = index;
            }
            slider.addEventListener('input', function() {
                updateImage(parseInt(this.value));
            });
            updateImage(1);
        }
        if (window.visualization) {
            window.visualization.onDataUpdate(initImageSlider);
        } else {
            document.addEventListener('DOMContentLoaded', initImageSlider);
        }
        setTimeout(initImageSlider, 500);
    </script>
</body>"