vue3下钻地图时通过调用父组件方法切换显示图标时报错，如何修改?

  • Z时代
  • 2024-03-16
  • 分类：IT

地图组件：

// 此处是echart的option数据
const setOptions = computed(() => {
// ******************处理了从父组件传过来的地图图标数据***************
var geoCoordMapFD = props.xAxisData.geoCoordMapFd || []
var cityDataFD = props.xAxisData.cityDataFd || []
var geoCoordMapGF = props.xAxisData.geoCoordMapGf || []
var cityDataGF = props.xAxisData.cityDataGf || []
var convertDataFD = function (data) {}
var convertDataGF = function (data) {}
var iconFD = 'image://./images/ufd.svg'
var iconGF = 'image://./images/ugf.svg'
// ************************************
let option = {
    //    option数据
}
return option
})
// 创建图例方法
function initChart(datas, citys, mapName) {// datas 是地图数据，citys和mapName是地图城市名字
      nextTick(() => {
        echarts.init(document.getElementById(props.chartId)).dispose() // 销毁实例
        state.myChart = echarts.init(document.getElementById(props.chartId))
        window.addEventListener('resize', () => { // 重置尺寸
          state.myChart.resize()
        })
        // ******单击方法下钻地图数据******
        state.myChart.on('click', function (param) {
          if (param.region) {
            ctx.emit('changeMapHost', param.region.name) // ******此处调用父组件方法来修改地图上的图标数据******
            for (let i = 0; i < state.jsonAry.length; i++) {
              if (city[0].cityName === state.jsonAry[i].name.slice(0, state.jsonAry[i].name.length - 1)) {
                axios.get(state.jsonAry[i].url).then((res) => {
                  initChart(res.data, state.jsonAry[i].name, param.region.name)
                })
                break
              } else {
                console.log('数据匹配不上~')
              }
            }
          }
        })
        // ******双击返回大地图******
        state.myChart.on('dblclick', function (param) {
          if (param.region.name != citys) {
            ctx.emit('changeMapHost', citys) // ******此处调用父组件方法来修改地图上的图标数据******
            for (let i = 0; i < state.jsonAry.length; i++) {
              if (city[0].cityName === state.jsonAry[i].name.slice(0, state.jsonAry[i].name.length - 1)) {
                axios.get(state.jsonAry[i].url).then((res) => {
                  initChart(res.data, state.jsonAry[i].name, citys)
                })
                break
              } else {
                console.log('数据匹配不上~')
              }
            }
          }
        })
        // ******其他事件******
        state.cityList = {}
        let Cname = transform(mapName)
        state.cityName = Cname
        if (citys === mapName) {
          state.cityList = datas
          echarts.registerMap(state.cityName, state.cityList)
          state.myChart.clear()
          state.myChart.setOption(setOptions.value, false, true)
        } else {
          for (let i = 0; i < datas.features.length; i++) {
            if (mapName === datas.features[i].properties.name) {
              let aryList = {
                type: 'FeatureCollection',
                features: [datas.features[i]],
              }
              state.cityList = aryList
              echarts.registerMap(state.cityName, state.cityList)
              state.myChart.clear()
              state.myChart.setOption(setOptions.value, false, true)
              break
            }
          }
        }
      })
    }
// 监听传值，刷新图表
watch([() => props.seriesData, () => props.xAxisData, mapName], (newVal) => {
      initChart()
      return newVal
    })

父组件：

// 地图组件
<MapChart
  :xAxisData="mapAxisData"
  :seriesData="mapSeriesData"
  :mapName="systemArea"
  @changeMapHost="changeMapHost"
></MapChart>
const changeMapHost = async (value) => { // 地图上图标数据
      console.log(value)
      state.mapAxisData = {}
      state.mapSeriesData = {}
      const params = { areaName: value }
      await proxy.$request
        .get(`/reported/forecast/areaInfo`, {
          params,
        })
        .then((res) => {
          state.mapAxisData = res.data.plantInFo
          state.mapSeriesData = res.data.areaInfoList
        })
    }
 return {
      ...toRefs(state),
      changeMapHost,
    }

vue3下钻地图时通过调用父组件方法切换显示图标时报错，如何修改?
如果不使用 ctx.emit('changeMapHost', citys) 更新图标值，下钻和图标都可以正常显示，但下钻之后的图标数据是大地图的整体数据。
一旦去更新县、市级图标数据就会报错TypeError: Cannot read properties of undefined (reading 'svg') 或者 Error: Initialize failed: invalid dom.
vue3下钻地图时通过调用父组件方法切换显示图标时报错，如何修改?

该怎么修改才能正常更新图标呢？

回答：

在双击或者单机地图，调用 initChart 方法之前把需要传递的数据存在 state 里

state.geoJson = res.data
state.geoJsonNameCity = state.jsonAry[i].name
state.geoJsonNameCounty = citys
initChart(state.geoJson, state.geoJsonNameCity, state.geoJsonNameCounty)

然后在 watch 里面判断 geoJsonNameCity 或者 geoJsonNameCity 是否有数据再执行不同的数据的 initChart 方法

 watch([() => props.seriesData, () => props.xAxisData, mapName], (newVal) => {
      if (state.geoJsonNameCity == '') {
        for (let i = 0; i < state.jsonAry.length; i++) {
          if (city[0].cityName === state.jsonAry[i].name.slice(0, state.jsonAry[i].name.length - 1)) {
            axios.get(state.jsonAry[i].url).then((res) => {
              initChart(res.data, state.jsonAry[i].name, mapName.value)
            })
            break
          } else {
            console.log('数据匹配不上~')
          }
        }
        // initChart()
      } else {
        initChart(state.geoJson, state.geoJsonNameCity, state.geoJsonNameCounty)
      }
      return newVal
    })

回答：

因为你在调用changeMapHost方法更新图标数据时候，地图组件没有准备好重新渲染，导致echarts实例化过程出现的问题。你可以用watch来监听props.seriesData

watch(
  [() => props.seriesData, () => props.xAxisData, () => mapName],
  (newVal) => {
    // 传入地图数据，城市名字和地图名字
    initChart(props.xAxisData, citys, mapName.value);
    return newVal;
  }
);

以上是 vue3下钻地图时通过调用父组件方法切换显示图标时报错，如何修改? 的全部内容， 来源链接： utcz.com/p/934159.html

回到顶部