[apache/echarts]窗口大小变化(或者ctrl 滚轮),地图和散点图会发生错位

2024-07-16 88 views
8

4.6.0

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

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

窗口大小发生变化之后(或者ctrl 滚轮),地图和散点图会发生错位 report

回答

9

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

7

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

5

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

8

在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)
}
9

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

1

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

6

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

6

我升级到4.8,问题没了

9

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

animation: false

可以解决这个问题