微信小程序与echarts联动安卓真机测试出现黑色阴影

问题

这个问题想了很多的可能性，因为安卓机上显示不正常，苹果系统正常，去小红书上搜索，发现可能是安卓硬件加速的问题。

think

1.是因为黑色标题存在，导致的黑色阴影，删除了标题和修改字体颜色之后，发现不对

2.可能是echarts版本的问题，切换echarts版本可以看下面这个链接，但是柱状图正常显示，饼图的标题和图例不正常显示，并且切换ecahrts版本之后，原本的图表展示出现问题

https://developers.weixin.qq.com/community/develop/article/doc/000ec2223a43881b1eb0e644b61c13https://developers.weixin.qq.com/community/develop/article/doc/000ec2223a43881b1eb0e644b61c133.可能是Canvas和svg渲染的问题，但是微信小程序只能用canvas的渲染方式。

4.chatgpt告诉我说，是因为饼图和柱状图的展示形式不一样，和canvas + filter/opacity/transform这些微信平台的东西有关

5.解决方法，就是将title和legend隐藏，手动加入title和legend

解决方法

第一步：修改wxml

复制代码

  <view class="card mb_30">
    <!-- 标题 -->
    <view class="chart-title">
      1.驻村干部按性别统计数量（人）
    </view>
    <!-- 图表 + legend -->
    <view class="chart-row">
      <!-- ECharts -->
      <ec-canvas class="chart-canvas" id="genderTrend" canvas-id="genderTrend" ec="{{ genderEc }}"/>
      <!-- 自定义 legend -->
      <view class="chart-legend">
        <view class="legend-item" wx:for="{{  genderData }}" wx:key="name">
          <view class="legend-color" style="background-color: {{ item.color }};"></view>
          <view class="legend-text">
            <text class="name">{{item.name}}</text>
            <text class="value">{{ item.value }}人</text>
            <text class="percent">{{ item.percent }}%</text>
          </view>
        </view>
      </view>
    </view>
  </view>

第二步：修改wxss

复制代码

/* 标题 */
 .chart-title {
  font-size: 30rpx;
  /* font-weight: 600; */
  color: #333;
  margin-bottom: 100rpx;
}

/* 横向布局 */
 .chart-row {
  display: flex;
  flex-direction: row;
  align-items: center;
}

/* canvas */
 .chart-canvas {
  width: 320rpx;
  height: 320rpx;
}

/* legend 区 */
 .chart-legend {
  flex: 1;
  padding-left: 50rpx;
}

/* legend 每一行 */
 .legend-item {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

/* 颜色块 */
 .legend-color {
  width: 20rpx;
  height: 20rpx;
  border-radius: 4rpx;
  margin-right: 12rpx;
}

/* 文本 */
 .legend-text {
  font-size: 24rpx;
  color: #333;
}

 .legend-text .name {
  margin-right: 12rpx;
}
.legend-text .value {
  margin-right: 12rpx;
  color: #666;
}

.legend-text .percent {
  margin-left: 12rpx;
  color: #999;
}

第三步：在title和legend当中设置show:false

发现饼图的占比还是很小,于是调整饼图在页面当中的大小，通过grid和series当中进行调整饼图颜色和位置。

复制代码

  gird: {
    x: 25,
    y: 45,
    x2: 5,
    y2: 20,
  },

series: [{
    type: 'pie',
    radius: '90%',
    label: {
      show: false
    },
    center: ['50%', '50%'],
    data: [],
    itemStyle: {
      normal: {
        color: function (colors) {
          var colorList = [
            '#FF00FF',
            '#228B22',
            '#B22222',
            '#1E90FF',
            '#696969',
            '#FF1493',
            '#FF8C00',
            '#BDB76B',
            '#B8860B',
            '#00008B',
            '#D2691E',
            '#7FFF00'
          ];
          return colorList[colors.dataIndex];
        },
        shadowBlur: 10,
        shadowColor: 'transparent'
      }
    },
    emphasis: {
      itemStyle: {
        shadowBlur: 10,
        shadowColor: 'transparent'
      }
    }
  }]

第四步：进行数据处理。用于在wxml当中展示

我的代码

复制代码

// 计算总价值  
             const totalValue = m.reduce((sum, item) => sum + item.value, 0);
             const colors = [
               '#FF00FF',
               '#228B22',
               '#B22222',
               '#1E90FF',
               '#696969',
               '#FF1493',
               '#FF8C00',
               '#BDB76B',
               '#B8860B',
               '#00008B',
               '#D2691E',
               '#7FFF00'
             ]
             // 转换数据
             const areaData = m.map((item, index) => ({
               name: item.name,
               value: item.value,
               percent: parseFloat((item.value / totalValue * 100).toFixed(2)),
               color: colors[index] // 循环使用颜色
             }));
             this.setData({
              areaData: areaData
             })
          areaOption.series[0].data = m

总结

发现自己处理bug的方法还是有点幼稚，有点低效率，可能这就是和别人差距体现的原因