Echarts学习遇到的一个神级大坑问题！

最近跟着b站博主自学使用Echarts的地图中，发现拖动筛选条

img


整个地图的颜色都没了

img

看了下代码好像没什么问题

<template>
  <div class="chinaMap" id="chinaMap"></div>
</template>
<script>
let mapData = require("@/assets/json/china.json");
export default {
  data() {
    return {
      chinaMap: null,
      option: {},
      airData: [
        { name: "北京", value: 39 },
        { name: "天津", value: 39 },
        { name: "上海", value: 31 },
        { name: "重庆", value: 66 },
        { name: "河北", value: 147 },
        { name: "河南", value: 113 },
        { name: "云南", value: 25 },
        { name: "辽宁", value: 50 },
        { name: "黑龙江", value: 114 },
        { name: "湖南", value: 175 },
        { name: "安徽", value: 117 },
        { name: "山东", value: 92 },
        { name: "新疆", value: 84 },
        { name: "江苏", value: 67 },
        { name: "浙江", value: 84 },
        { name: "江西", value: 96 },
        { name: "湖北", value: 273 },
        { name: "广西", value: 59 },
        { name: "甘肃", value: 99 },
        { name: "山西", value: 39 },
        { name: "内蒙古", value: 58 },
        { name: "陕西", value: 61 },
        { name: "吉林", value: 51 },
        { name: "福建", value: 29 },
        { name: "贵州", value: 71 },
        { name: "广东", value: 38 },
        { name: "青海", value: 57 },
        { name: "西藏", value: 24 },
        { name: "四川", value: 58 },
        { name: "宁夏", value: 52 },
        { name: "海南", value: 54 },
        { name: "台湾", value: 88 },
        { name: "香港", value: 66 },
        { name: "澳门", value: 77 },
        { name: "南海诸岛", value: 55 },
      ], // 空气数据
      scatterData: [
        {
          value: [117, 31],
        },
      ], // 标记点数据
      timer: null,
    };
  },
  mounted() {
    this.test();
  },
  methods: {
    test() {
      let that = this;
      // 注册地图矢量数据
      that.$echarts.registerMap("chinaMap", mapData);
      that.option = {
        geo: {
          type: "map",
          map: "chinaMap", // chinaMap需要和registerMap中的第一个参数保持一致
          roam: true, // 设置允许缩放以及拖动的效果
          label: {
            show: true, // 展示标签
          },
        },
        series: [
          {
            data: that.airData,
            geoIndex: 0, // 将空气质量的数据和第0个geo配置关联在一起
            type: "map",
          },
        ],
        visualMap: {
          min: 0,
          max: 300,
          inRange: {
            color: ["white", "red"], // 控制颜色渐变的范围
          },
          calculable: true, // 出现滑块
        },
      };
      that.chinaMap = this.$echarts.init(document.getElementById("chinaMap"));
      that.chinaMap.setOption(that.option);
      console.log(that.chinaMap);
    },
  },
  destroyed() {
    this.timer = null;
  },
};
</script>

最后发现原来是 需要将


that.chinaMap = this.$echarts.init(document.getElementById("chinaMap"));
      that.chinaMap.setOption(that.option);

改为
let chinaMap = this.$echarts.init(document.getElementById("chinaMap"));
      chinaMap.setOption(that.option);

原因不知道，希望有知道的能告知！

你chinaMap定义在data中，初次渲染图表是没问题的，你拖动就发生了数据变化，而此时无法更新到this.chinaMap 中去了呢；所以你的chinaMap是得定义在方法内的

用let和this都是可以的，原因是因为你定义的中国地图的变量为啥不用“”

早上醒来研究了一下，发现第一种this写法在vue3里面是一个proxy对象，所以就裂开了，还不知道怎么解决

img

let 的写法才是一个echarts实例：

img