uniapp开发项目，使用到了lime-echart，在手机上预览小程序，饼图的图例有阴影

分类：插件市场

把textShadowColor设置成白色或透明都不起作用，运行到小程序端在手机预览小程序时饼图的图例会有阴影，连切换图例的左右箭头那块都有阴影，折线图的就不会有。运行到手机APP 也不会有阴影。
以下是饼图的配置

baseOption = {  
      tooltip: {   
        trigger: 'item',   
        textStyle: {  
          textShadowBlur: 10,          // 关键设置  
          textShadowColor: 'transparent' // 关键设置  
        },  
        formatter: '{a} <br/>{b}: {c} ({d}%)',  
        position: function (pos, params, el, elRect, size) {  
          var obj = { top: 10 };  
          obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;  
          return obj;  
        },  
        confine: true  
      },  
      legend: {  
        top: 0,  
        left: 'center',  
        orient: 'horizontal',  
        type: 'scroll',           // 图例过多时可滚动  
        itemWidth: 30,  
        itemHeight: 16,  
        backgroundColor: '#ffffff',  
        itemStyle: {  
          shadowColor: 'rgba(255, 255, 255, 0.01)',  
          shadowBlur: 10  
        },  
        shadowColor: 'rgba(255, 255, 255, 0.01)',  
        shadowBlur: 10,  
        textStyle: {  
          fontSize: 11,  
          lineHeight: 16,  
          overflow: 'break',  
          textShadowBlur: 10,               // 设置阴影模糊大小（值不能为0）  
          textShadowColor: 'transparent'    // 将阴影颜色设置为透明  
        }  
      },  
      series: [{  
        label: {  
          position: 'inside',  
          formatter: '{d}%',  
          textStyle: {  
            textShadowBlur: 10,          // 关键设置  
            textShadowColor: 'transparent' // 关键设置  
          }  
        },  
        name: data.name || '数据',  
        type: 'pie',  
        radius: '50%',  
        data: data.series || [],  
        emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0,0,0,0)' } }  
      }]  
    }

2026-06-09 14:58 负责人:无分享

1 个回复

Ask小助手 - Ask社区AI助手

欢迎到专业群（ uni-app 官方技术交流群 1 ）咨询，群中有相关专业的管理员和群友。

针对你遇到的微信小程序上饼图图例出现阴影的问题，这通常是因为 ECharts 在微信小程序环境下，对 textShadowColor 设置为 'transparent' 或 rgba(255, 255, 255, 0) 的解析存在兼容性问题，导致阴影并没有真正消失，而是可能渲染成了默认的灰色或黑色阴影。

你可以尝试以下几种解决方案：

为图例文字设置与背景相同的阴影颜色：
这是最直接有效的办法。不要设置为透明，而是将 textShadowColor 设置为你图例背景色（backgroundColor）的相同颜色，这样视觉上阴影就“消失”了。

修改你的 legend 配置如下：
```
legend: {  
  // ... 其他配置  
  backgroundColor: '#ffffff', // 你的背景色  
  textStyle: {  
    fontSize: 11,  
    lineHeight: 16,  
    overflow: 'break',  
    textShadowBlur: 10,  
    textShadowColor: '#ffffff' // 将阴影颜色设置为与背景色一致的白色  
  }  
}  
```
本助手使用国产模型，生成代码可能不准确。专业的代码生成需要全球顶尖的AI Coding模型。推荐使用uni-agent
彻底移除阴影属性 (尝试性方案)：
在某些 ECharts 版本中，如果不需要阴影，不设置 textShadowBlur 和 textShadowColor 可能比将它们置零或透明更有效。你可以尝试直接删除 textStyle 对象中的这两个属性，或者将 textShadowBlur 设为 0。
```
legend: {  
  // ... 其他配置  
  textStyle: {  
    fontSize: 11,  
    lineHeight: 16,  
    overflow: 'break',  
    textShadowBlur: 0, // 将模糊值设为0  
    // 移除 textShadowColor 属性  
  }  
}  
```
本助手使用国产模型，生成代码可能不准确。专业的代码生成需要全球顶尖的AI Coding模型。推荐使用uni-agent
全局禁用阴影：
在 baseOption 的最外层或 legend 的同一层级直接设置，尝试覆盖默认行为。
```
baseOption = {  
  // ... 其他配置  
  textStyle: { // 全局文字样式  
    textShadowBlur: 0,  
    textShadowColor: 'transparent'  
  },  
  legend: {  
    // ... 你的图例配置  
  }  
}  
```
本助手使用国产模型，生成代码可能不准确。专业的代码生成需要全球顶尖的AI Coding模型。推荐使用uni-agent

为什么 App 端没问题，小程序端有问题？
这是因为 lime-echart 组件在不同平台上的底层渲染机制不同。在 App 端，它通常使用 Webview 或原生 Canvas 渲染，对 CSS 样式的支持更完善。而在微信小程序中，图表是渲染在原生的 Canvas 组件上，其对某些 CSS 属性的解析和渲染存在差异，导致了这个问题。将阴影颜色匹配为背景色是处理这类平台差异的通用技巧。

内容为 AI 生成，仅供参考

要回复问题请先登录或注册

uniapp开发项目，使用到了lime-echart，在手机上预览小程序，饼图的图例有阴影

1 个回复

公告

相关问题

uniapp开发项目，使用到了lime-echart，在手机上预览小程序，饼图的图例有阴影

与内容相关的链接

1 个回复

公告

相关问题