[apache/echarts]使用bmap后,type='scatter' 的itemStyle.color 不生效

2024-08-22 502 views
9

使用了bmap作为图层后,在series里 type='scatter' 的 itemStyle.color 设置不生效

  • ECharts4.0 [ECharts 版本]:
  • 谷歌浏览器 [浏览器类型和版本]:
[期望结果]

image

[实际结果]

image

ECharts option [ECharts配置项]
option = {
   visualMap: {
      show: false,
      min: 0,
      max: 100,
      left: 'left',
      top: 'bottom',
      text: ['高', '低'],
      calculable: true,
      seriesIndex: [1],
      inRange: {
        color: ['#0f0c29', '#302b63', '#24243e'],
       },
   },
  bmap: {
        center: [104.777182, 26.611526],
        zoom: 14,
        roam: false,
  },
  series: [
     {
      name: '停车场',
      type: 'effectScatter',
      coordinateSystem: 'bmap', 
      symbolSize: 20,
      showEffectOn: 'render',
      rippleEffect: {
        brushType: 'stroke',
      },
      hoverAnimation: true,
      label: {
        formatter: '{b}',
        position: 'bottom',
        color: '#fff',
        fontSize: 16,
        fontWeight: 'bold',
        fontFamily: 'Courier New',
        show: true,
      },
      itemStyle: {
        color: '#3F6EFE',
        shadowBlur: 10,
        shadowColor: '#3F6EFE',
      },
      zlevel: 1,
      data: [{ name:"滑雪场", value: [104.747182, 26.597526, 1234] }],
    },
    {
      name: '点',
      type: 'scatter',
      coordinateSystem: 'bmap', 
      symbol: 'pin',
      symbolSize: 100,
      label: {
        show: true,
        formatter: params => params.value[2],
        color: '#fff',
        fontSize: 14,
      },
      itemStyle: {
        borderWidth: 1,
        borderColor: '#f62157',
        color: () => '#f62157', // 标志颜色 不生效
      },
      zlevel: 6,
      data: [{ name:"滑雪场", value: [104.747182, 26.597526, 1234] }],
    },
  ],
}

用geo的时候标记点的颜色都能设置,换成bmap后边框颜色都可以生效,但是标记本身颜色失效,请问者要怎么处理呢?

回答

6

试一下 itemStyle.normal.color 可以设置吗?可能是由于插件的兼容性问题

7

试过了,没有用。不过好像知道是哪儿的问题了,把 visualMap{...} 配置项去掉以后就可以了,问题出在visualMap。 但是具体是visualMap影响冲突,还是visualMap配置错了的原因?具体原因还没找到

2

哦哦,写了 visualMap 会覆盖掉 color 配置项

6

嗯嗯,是的。 seriesIndex: [1] 的设置会覆盖掉被选中series的颜色,所以就奇怪了

1

写了 seriesIndex: [1] 那么你的 scatter 系列就会用 visualMap 中计算出的颜色,没有问题,奇怪的点在于?

8

seriesIndex: [index] 只会覆盖 series中对应的index的系列,可能是跟映射的数据大小还有关系吧。只是这个时候series对应的系列就失去了设置color的效果了。

6

所以知道问题出在哪儿了哈,已经改了。要不去掉visualMap, 或则是设置visualMap. seriesIndex[index],index不要指定在需要设置color的series中。