窗口大小变化（或者ctrl 滚轮），地图和散点图会发生错位

[Gacent]

Version

4.6.0

Steps to reproduce

例如这个示例：https://gallery.echartsjs.com/editor.html?c=xCDj68xRo1 示例窗口发生变化之后不会出错。 但是复制了代码到本地使用时候

What is expected?

窗口大小发生变化之后（或者ctrl 滚轮），散点图和地图应该是紧密相连的

What is actually happening?

窗口大小发生变化之后（或者ctrl 滚轮），地图和散点图会发生错位

[echarts-bot[bot]]

Hi! We've received your issue and please be patient to get responded. 🎉 The average response time is expected to be within one day for weekdays.

In the meanwhile, please make sure that you have posted enough image to demo your request. You may also check out the API and chart option to get the answer.

If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to dev@echarts.apache.org. Please attach the issue link if it's a technical questions.

If you are interested in the project, you may also subscribe our mail list.

Have a nice day! 🍵

[plainheart]

是否监听了窗口的resize事件？当窗口resize时，应手动调用 echartsInstance.resize

[Gacent]

已经手动调了resize()方法，无效

[plainheart]

那麻烦给出你在本地的实例代码吧

[Gacent]

在vue应用中使用，可以复制上面示例链接里的配置：https://gallery.echartsjs.com/editor.html?c=xCDj68xRo1

setOptions() {

  var series = [];

  [
    ['大庆', this.chinaDatas]
  ].forEach((item, i) => {
    console.log(item)
    series.push({
      type: 'lines',
      zlevel: 2,
      effect: {
        show: true,
        period: 4, // 箭头指向速度，值越小速度越快
        trailLength: 0.02, // 特效尾迹长度[0,1]值越大，尾迹越长重
        symbol: 'arrow', // 箭头图标
        symbolSize: 5 // 图标大小
      },
      lineStyle: {
        normal: {
          width: 1, // 尾迹线条宽度
          opacity: 1, // 尾迹线条透明度
          curveness: 0.3 // 尾迹线条曲直度
        }
      },
      data: this.convertData(item[1])
    }, {
      type: 'effectScatter',
      coordinateSystem: 'geo',
      zlevel: 2,
      rippleEffect: { // 涟漪特效
        period: 4, // 动画时间，值越小速度越快
        brushType: 'stroke', // 波纹绘制方式 stroke, fill
        scale: 4 // 波纹圆环最大限制，值越大波纹越大
      },
      label: {
        normal: {
          show: true,
          position: 'right', // 显示位置
          offset: [5, 0], // 偏移设置
          formatter: function(params) { // 圆环显示文字
            return params.data.name
          },
          fontSize: 13
        },
        emphasis: {
          show: true
        }
      },
      symbol: 'circle',
      symbolSize: function(val) {
        return 5 + val[2] * 5 // 圆环大小
      },
      itemStyle: {
        normal: {
          show: false,
          color: '#f00'
        }
      },
      data: item[1].map((dataItem) => {
        return {
          name: dataItem[0].name,
          value: this.chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
        }
      })
    },
    // 被攻击点
    {
      type: 'scatter',
      coordinateSystem: 'geo',
      zlevel: 2,
      rippleEffect: {
        period: 4,
        brushType: 'stroke',
        scale: 4
      },
      label: {
        normal: {
          show: true,
          position: 'right',
          // offset:[5, 0],
          color: '#0f0',
          formatter: '{b}',
          textStyle: {
            color: '#0f0'
          }
        },
        emphasis: {
          show: true,
          color: '#f60'
        }
      },
      symbol: 'pin',
      symbolSize: 50,
      data: [{
        name: item[0],
        value: this.chinaGeoCoordMap[item[0]].concat([10])
      }]
    }
    )
  })

  this.option = {
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(166, 200, 76, 0.82)',
      borderColor: '#FFFFCC',
      showDelay: 0,
      hideDelay: 0,
      enterable: true,
      transitionDuration: 0,
      extraCssText: 'z-index:100',
      formatter: function(params, ticket, callback) {
        // 根据业务自己拓展要显示的内容
        var res = ''
        var name = params.name
        var value = params.value[params.seriesIndex + 1]
        res = "<span style='color:#fff;'>" + name + '</span><br/>数据：' + value
        return res
      }
    },
    backgroundColor: '#013954',
    visualMap: { // 图例值控制
      min: 0,
      max: 1,
      calculable: true,
      show: true,
      color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
      textStyle: {
        color: '#fff'
      }
    },
    geo: {
      map: 'china',
      zoom: 1.2,
      label: {
        emphasis: {
          show: false
        }
      },
      roam: true, // 是否允许缩放
      layoutCenter: ['50%', '50%'],
      layoutSize: 500,
      itemStyle: {
        normal: {
          color: 'rgba(51, 69, 89, .5)', // 地图背景色
          borderColor: '#516a89', // 省市边界线00fcff 516a89
          borderWidth: 1
        },
        emphasis: {
          color: 'rgba(37, 43, 61, .5)' // 悬浮背景
        }
      }
    },
    series: series
  }

  this.chart = echarts.init(document.getElementById(this.id))
  this.chart.setOption(this.option)
}

[plainheart]

试着写了一个示例，并无问题，即使不监听resize。(txt改为html) index.txt

[Gacent]

已经解决了，原来是echarts版本问题，我是4.6的，刚装了4.7之后就没问题了，谢谢大佬们

[serfend]

我用的4.7版本，也存在这个问题的

[aitexiaoy]

我升级到4.8，问题没了

[yyz945947732]

4.6确实存在这个问题, 加上

animation: false

可以解决这个问题