基于AI的Power BI产品信息卡图表通用解决方案

今天继续这方面的话题，在Power BI 如何借助AI自定义任意样式的产品信息卡，卡片既可用作产品信息（含产品指标）展示，又可用作切片器。

比如基础的风格：

科技风：

商务风：

复古风：

今天分享的技巧具有通用性，体现在：

1.卡片上的信息可以任意更换，包括但不局限于产品图片、产品基础信息、产品指标

2. 卡片上的内容排版可以按需修改

3. 卡片的风格可以随意改变

制作过程使用了HTML+CSS组合，但是借助AI，我们不需要了解很多相关知识，看完本文即可上手。

第一步，新建一个度量值，将所有需要展示的产品信息包裹在<div></div>中，

<div>可以理解为一个箱子，这个箱子装的是产品相关的内容，最外层使用class给这个箱子归类为product -card。箱子里面是各个组成部分，全部进行归类，产品图片为product-image，产品名称是product-name，读者的产品信息如果比这个示例少，则减少<div>，多则在class为product-info的下一层增加<div>，增加的<div>也要命名一个class。

产品图片可以是图床URL，也可以是本地图片转Base64。把M.HTML度量值放入HTML Content视觉对象：

可以看到没有任何样式的内容：

接下来使用CSS进行美化。CSS的写法和HTML有所不同，格式大概如这个样子：

.product-price {
    color: blue;
    font-weight: bold;
}

.product-price是前面在M.HTML定义的零售价的class，大括号的内容是指定零售价的格式，这里指定了颜色和加粗。

M.HTML定义了产品信息卡的很多class，需要对所有class指定格式。如果不知道怎么指定，把所有class可以抄上面的示例CSS语句，只指定一个color，后面复杂的内容交给AI。以下是一个范例完整产品信息CSS：

#htmlContent {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    background: lightgrey;
}
.htmlViewerEntry {
     margin: 15px;
}
.product-card {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    overflow: hidden;            
    width: 300px;
    text-align: center;
    transition: transform 0.3s ease;
}
.product-card:hover {
    transform: scale(1.05);
}
.product-image {
    width: 200px;
    height: 100px;
    object-fit: cover;
}
.product-info {
    padding: 20px;
}
.product-name {
    font-size: 24px;
    font-weight: bold;
    margin: 10px 0;
}
.product-id, .product-date, .product-price {
    font-size: 18px;
    margin: 5px 0;
    color: #555;
}
.product-price {
    color: #e74c3c;
    font-weight: bold;
}

以上代码中的最前面两段和产品信息卡本身没有关系，是为了视觉对象网格布局，如果去除这段，后续产品信息卡默认是纵向布局。

把范例CSS扔给AI（本例为DeepSeek），告诉它这是产品信息卡片的CSS，请修改为科技风：

复制得到的代码，将代码粘贴到HTML Content视觉对象的Stylesheet，即可看到效果：

除了整体风格修改，还可以细节修改，比如给产品ID加上圆角背景：

得到：

不仅仅是样式，还可以增加鼠标悬停放大、变色等效果，具体读者可以自行实践。

如果读者有将卡片用作切片器的需求，需要将HTML Content的Cross-filtering打开：

示例pbix在文末知识星球分享。

相关信息：

Power BI十大有业务分析力的图表

Power BI 商品调拨流向可视化