vue3+TypeScript+Echarts | 疫情数据统计 (附源码)

🎨🎨功能介绍🎨🎨

下拉刷新🪄 一键回到顶部🚀 echarts中国地图运用🗺️ 数据列表展示🧰 代理🧆

🌌🌌部分效果展示🌌🌌 

🗺️🗺️ 全部功能展示效果🗺️🗺️ 

🥖因为功能有点多 所以专门录制了一期视频介绍功能🥖

🍖 具体的全部素材 源码也放在视频简介中(gitee)🍖

😁大家可以去看看😁 

🧀制作不易 感谢三连🧀

🌯B站视频🌯

视频链接地址

🥰🥰demo目录结构🥰🥰

🥪🥪部分功能代码🥪🥪

 🍭🍭 DownRefresh.vue 下拉刷新 组件 🍭🍭

<!-- 下拉刷新新数据 -->
<template>
  <div class="box">
    <!-- 内部属性  @scroll 监听滚动条事件 -->
    <div
      @scroll="scrollEvent"
      class="scroll-box"
    >
      <!-- 插槽 -->
      <slot></slot>
      <div class="end-text" v-if="!isScroll">{{ endText }}</div>
    </div>
  </div>
</template>
 
<script setup lang="ts">
import { reactive, toRefs } from "@vue/reactivity";
const props = defineProps({
  //下拉高度
  distance: Number ,
  //判定是否下拉
  isScroll: Boolean,
  endText: {
    type: String,
    default: "没有更多了",
  },
});
//子传父参数
const $emits = defineEmits(["getList"]);
 
const data = reactive({
  //离屏幕高度
  scrollTop: 0,
});
 
let {
  scrollTop,
} = toRefs(data);
 
 
//下拉刷新 判定
const scrollEvent = (e: any) => {
  scrollTop = e.srcElement.scrollTop;
  if (!props.isScroll) return;
  if (
    //判定下拉高度
    scrollTop + e.srcElement.offsetHeight >
    e.srcElement.scrollHeight - props.distance!
  ) {
    $emits("getList");
  }
};
</script>
 
<style lang="scss" scoped>
.box {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 90vh;
}
.scroll-box {
  height: 90vh;
  width: 100%;
  overflow: auto;
  transition: all 0s ease 0s;
  position: absolute;
  right: 0;
  .end-text {
    text-align: center;
    height: 50px;
    line-height: 50px;
    color: #999;
  }
}
</style>