Vue传数据到ECharts时,数据响应式更新了,但地图没渲染???

说白了还是把自己绕迷了,在这里记录一下,也希望同时能对看到这篇文章的朋友有所帮助,祝大家技术越来越牛批!!!


进入正题

首先是父组件中,数据请求代码(axios的封装文件就不在此赘述了,本文的问题与axios没什么关系)

// 全国各省各市疫情数据请求
this.$axios
  .post("/wapicovid19/all.php", {
    key: "123",
  })
  .then((res) => {
    // console.log(res.data.retdata);
    for (let i = 0, len = res.data.retdata.length; i < len; i++) {
      this.province.push({
        name: res.data.retdata[i].xArea,
        value: res.data.retdata[i].curConfirm,
      });
    }
  })
  // 其实这里最开始我还加了一层then。。。
  // 等待上边返回的数据到位了再重新更新数据(想想刚刚错误的时候,自己真是个**)
  // 其实没必要,Vue的大多数数据都是响应式的
  .catch((err) => console.error(err));

接着是子组件中接收值的代码:

import chinaMap from "../utils/echarts-china";

export default {
  name: "covid-domestic",
  data() {
    return {
      mapName: "",
    };
  },
  props: {
    propProvince: {
      type: Array,
      default: [],
    },
  },
  // 模板渲染完毕先初始化地图
  mounted() {
    this.mapName = new chinaMap(document.getElementById("map"), this.propProvince);
    this.mapName.generateMap();
  },
};

为了能够看懂子组件中的代码,我把封装的echarts文件贴在下边(封装成了一个构造函数的形式):

import echarts from 'echarts'; // echarts是4.9.0版本的
import '../../node_modules/echarts/map/js/china.js';

class chinaMap {
  // dom参数不说了,这个data参数是通过接口数据动态传入的
  constructor(Dom, data) {
    this.option = {
      tooltip: {
        trigger: 'item',
        formatter: '{b}
现有疫情{c}例' }, toolbox: { show: true, orient: 'vertical', left: 'right', top: 'center', feature: { dataView: { readOnly: false }, restore: {}, saveAsImage: {} } }, visualMap: { min: 800, max: 50000, text: ['High', 'Low'], realtime: false, calculable: true, inRange: { color: ['lightskyblue', 'yellow', 'orangered'] } }, series: [ { name: '中国疫情地图', type: 'map', mapType: 'china', label: { show: true }, data: data, } ] } this.dom = Dom; } // 生成地图(初始化 + 配置选项) generateMap() { echarts.init(this.dom).setOption(this.option); } } export default chinaMap;

于是乎就出现了下边的一幕(数据的确动态更新了,但是地图仍是白板):
Vue传数据到ECharts时,数据响应式更新了,但地图没渲染???_第1张图片
与此同时我几乎试遍了各种办法(都是绕路而行),什么更新数据啊,async/await啊,等等等等,差点嗓子眼里冒屁。。。
然后我就自言自语的在叙述这个逻辑:“嗯...我需要监听一下props的数据更新,嗯...怎么监听...监听...监听,监听!?”
哦草!!!用watch啊,监听数据的变化,被监听的数据更新时就会启动机关!!!
在子组件中加上了监听的代码:

watch: {
  propProvince() {
    this.mapName = new chinaMap(document.getElementById("map"), this.propProvince);
    this.mapName.generateMap();
    this.mapName.eHideLoading();
  },
},

成功了!!!
后来我又加上了加载动画覆盖层,调整了下数据,这个地图就完美了
Vue传数据到ECharts时,数据响应式更新了,但地图没渲染???_第2张图片
Vue传数据到ECharts时,数据响应式更新了,但地图没渲染???_第3张图片

完结撒花!!

还是要多积累经验,有时候学到手里不一定真的是自己的,得碰个壁,然后记忆加深,以后再触碰到这个伤疤时,你一下就能记得当时的痛和解决方案!!!

你可能感兴趣的