feat:添加数据缓动效果

ZhangXianQiang

2024-03-13 2d6ec7162f446b64fe395a7e77894277b9385d96

 src/views/home/data-view/components/data-map.vue

@@ -8,14 +8,15 @@
<script>
import * as echarts from 'echarts';
import 'echarts-gl';
import mapData from '@/assets/map/dujiangyan.json';
echarts.registerMap('dujiangyan', mapData);
import mapData from '@/assets/map/zigong.json';
echarts.registerMap('zigong', mapData);
console.log(mapData);
let mapChart = null;
let tempName = '';
let observer = null;
const mapConfig = {
  series: [{
    map: "dujiangyan", //注册地图的名字
    map: "zigong", //注册地图的名字
    type: "map3D",
    bottom: 0,
    left: 0,
@@ -24,9 +25,9 @@
    itemStyle: {
      color: "#4189f2", // 背景
      opacity: 1, //透明度
      borderWidth: 1.5, // 边框宽度
      borderWidth: 1, // 边框宽度
      borderColor: "#fff", // 边框颜色
      fontSize: 16, //
      fontSize: 18, //
    },

    // 标签
@@ -37,9 +38,9 @@
    },
    // 控制器
    viewControl: {
      beta: 82,
      beta: -30,
      alpha: 90,
      distance: 180,
      distance: 100,
      maxBeta: 180
    },
    // 鼠标移入时样式
@@ -66,7 +67,7 @@
  name: 'DataMap',
  data() {
    return {
      

    }
  },
  components: {
@@ -83,6 +84,21 @@
      mapConfig.series[0].data.forEach(item => {
        item.itemStyle.color = '#4189f2';
      });
    },
    // 监听变化
    observe() {
      if (!observer) {
        observer = new ResizeObserver(entries => {
          this.handleResize();
        })
      }
      observer.observe(this.$refs.map);
    },
    // 窗口变换
    handleResize() {
      if (mapChart) {
        mapChart.resize();
      }
    }
  },
  mounted() {
@@ -98,8 +114,15 @@
        tempName = params.name;
        this.filterData(params.name);
      }
    })
  }
    });
    this.observe();
  },
  beforeDestroy() {
    if (observer) {
      mapChart.dispose();
      observer.unobserve(this.$refs.map);
    }
  },
}
</script>