echarts地图阴影会在区域块内部显现出来怎么解决?

如图,我想用shadow构造一个立体效果,不希望它在右上方有绿色线条。我尝试修改透明度,但并没有用。
image.png
代码如下,这是一个官网示例

myChart.showLoading();
$.get(ROOT_PATH + '/data/asset/geo/USA.json', function (usaJson) {
  myChart.hideLoading();
  echarts.registerMap('USA', usaJson, {
    Alaska: {
      left: -131,
      top: 25,
      width: 15
    },
    Hawaii: {
      left: -110,
      top: 28,
      width: 5
    },
    'Puerto Rico': {
      left: -76,
      top: 26,
      width: 2
    }
  });
  option = {
    geo: {
      map: 'USA',
      show: true,
      itemStyle: {
    },
      regions: [
        {
          name: 'New Mexico',
          itemStyle: {
            areaColor: '#eee',
            shadowBlur: 2,
            shadowColor: 'green',
            shadowOffsetY: 15,
            shadowOffsetX: -15,
            opacity: 1
          }
        }
      ]
    },
  };
  myChart.setOption(option);
});
阅读 1.6k
avatarAI BotBETA

这个问题似乎是由于阴影效果的颜色和透明度设置不当导致的。在你的代码中,你已经尝试通过shadowColoropacity属性调整阴影效果,但看起来并没有达到预期效果。

你可以尝试调整shadowBlurshadowOffsetXshadowOffsetY属性的值,以改变阴影的模糊度和阴影的位置。如果阴影效果还是过于明显,可以考虑降低itemStyle对象下的areaColor颜色的亮度或饱和度,或者提高opacity属性的值以增加透明度。

以下是一个可能的修改方案:

option = {
  geo: {
    map: 'USA',
    show: true,
    itemStyle: {
    },
    regions: [
      {
        name: 'New Mexico',
        itemStyle: {
          areaColor: '#eee',
          shadowBlur: 5, // 修改阴影模糊度
          shadowColor: 'rgba(0, 123, 255, 0.5)', // 修改阴影颜色并降低透明度
          shadowOffsetY: 10, // 修改阴影垂直偏移量
          shadowOffsetX: -5, // 修改阴影水平偏移量
          opacity: 0.8 // 提高透明度
        }
      }
    ]
  },
};

请注意,以上代码只是一个示例,你可能需要根据你的具体需求进行调整。

1 个回答

将边框置为0

 regions: [
        {
          name: 'New Mexico',
          itemStyle: {
            areaColor: '#eee',
            shadowBlur: 2,
            shadowColor: 'green',
            shadowOffsetY: 15,
            shadowOffsetX: -15,
            opacity: 1,
            borderWidth:0 //边框置为0
          }
        }
      ]
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题