vue中使用echarts的chain.js生成地图散点图以及性能优化

大屏中使用地图时因为返回的数据点太多，造成页面加载过慢，卡顿等影响，优化过后，性能提升。

1、创建map.vue组件

<template>
  <div class="map">
    <h3>
      <span class="icon-cube"></span>
      活跃运营中心数据统计
    </h3>
    <div class="geo" id="geo"></div>
  </div>
</template>

<script>
// 优化1--不要在data里创建，影响性能
let myechart = null;
export default {
  components: {},
  props: {
    memberCitys: Array,
  },
  data() {
    return {
      list: [],
    };
  },
  mounted() {
    // 优化2--防止重复创建
    if (myechart != null) {
      myechart.dispose();
    }
    if (this.memberCitys) {
      // 优化3--相比其他echarts，地图最后渲染，防止阻塞
      setTimeout(() => {
        this.cardMapOption();
      }, 0);
      // 优化4--3秒后再渲染绿点，防止初始加载太慢
      setTimeout(() => {
        this.cardMap.count1 = this.list;
        this.cardMapOption();
      }, 3000);
    }
  },
  computed: {
    cardMap() {
      let mapData = {
        data: [],
        count1: [],
        count2: [],
      };
      this.memberCitys.map((x) => {
        mapData.data.push({
          name: x.cityName,
          value: [x.longitude, x.latitude, 70],
          count: x.count,
        });
      });
      mapData.data.map((y) => {
        if (y.count < 10) {
          this.list.push(y);
        } else {
          mapData.count2.push(y);
        }
      });
      return mapData;
    },
  },
  methods: {
    // 地图初始化配置
    cardMapOption() {
      let _this = this;
      // var color = ['#3ed4ff', '#a6c84c'];
      var series = [];

      [_this.cardMap.count1, _this.cardMap.count2].map(function () {
        series.push(
          {
            name: "10个以内",
            type: "effectScatter",
            coordinateSystem: "geo",
            zlevel: 1,
            rippleEffect: {
              brushType: "stroke",
            },
            label: {
              normal: {
                show: true,
                position: "right",
                formatter: "{b}",
              },
            },
            symbolSize: function (val) {
              return val[2] / 8;
            },
            itemStyle: {
              normal: {
                color: "#a6c84c",
              },
            },
            data: _this.cardMap.count1,
          },
          {
            name: "10个以上",
            type: "effectScatter",
            coordinateSystem: "geo",
            zlevel: 1,
            rippleEffect: {
              brushType: "stroke",
            },
            label: {
              normal: {
                show: true,
                position: "right",
                formatter: "{b}",
              },
            },
            symbolSize: function (val) {
              return val[2] / 8;
            },
            itemStyle: {
              normal: {
                color: "#ff0000",
              },
            },
            data: _this.cardMap.count2,
          }
        );
      });

      var option = {
        backgroundColor: "#080a20",
        title: {
          left: "left",
          textStyle: {
            color: "#fff",
          },
        },
        legend: {
          top: 0,
          left: 0,
          textStyle: {
            color: "#fff",
          },
        },
        geo: {
          map: "china",
          zoom: 1.2,
          label: {
            emphasis: {
              show: false,
            },
          },
          roam: true,
          itemStyle: {
            normal: {
              areaColor: "#142957",
              borderColor: "#0692a4",
            },
            emphasis: {
              areaColor: "#0b1c2d",
            },
          },
        },
        series: series,
      };
      myechart = echarts.init(document.getElementById("geo"));
      myechart.setOption(option);
    },
  },

  beforeDestroy() {
    // 优化5--销毁地图组件，释放内存
    myechart.dispose();
    clearInterval(this.timer);
  },
};
</script>

<style scoped>
.map {
  height: 24.1rem;
  margin-bottom: 0.833rem;
  display: flex;
  flex-direction: column;
}

.map h3 {
  line-height: 1;
  padding: 0.667rem 0;
  margin: 0;
  font-size: 0.833rem;
  color: #fff;
}

.map .icon-cube {
  color: #68d8fe;
}

.map .chart {
  flex: 1;
  background-color: rgba(255, 255, 255, 0.05);
}

.map .geo {
  width: 100%;
  height: 100%;
}
</style>

2、在index.vue中引入使用

import map from "./screen1/map.vue";
components：{
	map 
}
<template>
	 <!-- 地图 -->
	 <!-- memberCitys 从后台获取的城市数据 -->
     <map-show 
     v-if="mData.memberCitys" 
     :memberCitys="mData.memberCitys" 
     ></map-show>>
</template>

3、效果完成图