如何使用CSS/JavaScript将饼图转换为动态多渐变模糊图表？

完全可以通过CSS+JavaScript实现该效果，且天然支持动态数据适配，不需要依赖复杂的第三方图形库。

左侧模糊图表本质是按饼图数据占比分配宽度的纯色横向条块，叠加高斯模糊柔化边缘，色块的数量、颜色、占比完全和右侧饼图数据一一对应，数据变更时只需要重新计算渲染即可自动适配。

• 数据预处理：拿到饼图原始数据（包含每个扇区的数值、对应色值），先计算所有数值的总和，再算出每个色块占总宽度的百分比。
• 渲染基础色条：用flex布局横向排列所有色块，每个色块宽度设置为计算得到的百分比值，背景填充对应色值，此时得到的是硬边缘的多色横条。
• 添加模糊效果：给色条容器添加CSS属性filter: blur(12px ~ 24px)，模糊半径根据容器实际尺寸调整即可得到柔化效果；外层容器设置overflow: hidden裁掉模糊溢出的边缘，可额外加内阴影让边缘和背景融合更自然。
• 动态适配：封装通用渲染函数，入参为饼图数据数组，每次数据新增、修改、删除时清空原有节点重新渲染，色块数量会自动和数据长度保持一致。

<style>
.chart-wrap {
  display: flex;
  gap: 40px;
  align-items: center;
}
/* 模糊色彩块容器 */
.fuzzy-block {
  width: 180px;
  height: 280px;
  overflow: hidden;
  border-radius: 12px;
}
.fuzzy-bar {
  display: flex;
  width: 100%;
  height: 100%;
  filter: blur(16px); /* 核心模糊属性 */
}
.fuzzy-bar .seg {
  height: 100%;
}
/* 常规饼图容器（可替换为你现有饼图逻辑） */
.pie-chart {
  width: 280px;
  height: 280px;
  border-radius: 50%;
}
</style>

<div class="chart-wrap">
  <div class="fuzzy-block">
    <div class="fuzzy-bar" id="fuzzyBar"></div>
  </div>
  <div class="pie-chart" id="pieChart"></div>
</div>

<script>
/**
 * 渲染模糊色彩块
 * @param {Array} data 饼图数据，每项含value(数值)、color(十六进制/rgb色值)
 */
function renderFuzzyChart(data) {
  const total = data.reduce((sum, item) => sum + item.value, 0)
  const bar = document.getElementById('fuzzyBar')
  bar.innerHTML = ''
  data.forEach(item => {
    const seg = document.createElement('div')
    seg.className = 'seg'
    seg.style.width = `${(item.value / total) * 100}%`
    seg.style.backgroundColor = item.color
    bar.appendChild(seg)
  })
}

// 测试调用，可替换为任意饼图数据
const mockPieData = [
  {value: 32, color: '#5470c6'},
  {value: 22, color: '#91cc75'},
  {value: 18, color: '#fac858'},
  {value: 15, color: '#ee6666'},
  {value: 13, color: '#73c0de'}
]
renderFuzzyChart(mockPieData)
</script>

优化提示：如果需要更自然的色彩融合效果，可以给相邻色块设置1~3px的左右负margin让色块轻微重叠，模糊后的色彩过渡会更顺滑；如果需要做交互联动，比如hover饼图扇区时对应色块高亮，只需要给对应色块节点调整透明度、亮度属性即可。

内容的提问来源于stack exchange，提问作者Jesús V.