vue疫情大屏数据展示+数据导出+地图图片下载

代码哈士奇 等级 404 1 1

不废话,先上效果图 审美有限 下午5点开工 去掉吃饭时间 我的审美也只能让我做到这一步哈哈 在线体验地址 http://www.zczyp.top/big/#/ 有需要可以去github下载 github上代码是不加注释的 看注释在这个文章 github地址 https://github.com/dmhsq/vue-epidemic--big-screen vue疫情大屏数据展示+数据导出+地图图片下载

本来是想做那种科技风的,怎奈审美有限,又不想用别人的图片哈哈 下载的疫情地图如下 vue疫情大屏数据展示+数据导出+地图图片下载

页面布局

使用了element的布局 官网手册地址 vue疫情大屏数据展示+数据导出+地图图片下载 将页面分成三部分 第一部分就是左侧两个图 第二部分就是中间部分 第三部分就是右侧图和表格

页面代码(非全部代码)

vue疫情大屏数据展示+数据导出+地图图片下载

地图绘制说明

地图那一块我是直接复制之前写过的代码 所以看之前那个文章就行 vue疫情图

代码都一模一样的 没有改

数据获取

数据的获取和之前的疫情图一样 文章跳转:vue疫情图 地图那一块我是直接复制之前写过的代码 所以看之前那个文章就行 vue疫情图

这里再讲一次(看过的可以忽略)

配置代理(解决跨域)

生成环境记得配置nginx vue疫情大屏数据展示+数据导出+地图图片下载 在vue.config.js中

devServer: {
    proxy: {
      "/api": { //发送请求时/api会被识别成https://www.ncovchina.com/data 下面一样
        target: "https://www.ncovchina.com/data",
        changeOrigin: true,
        pathRewrite: {
          "^/api": ""
        }
      },
      "/ans": {
        target: "https://api.inews.qq.com/newsqa/v1/query/inner/publish/modules/list?modules=chinaDayList,chinaDayAddList,nowConfirmStatis,provinceCompare",
        changeOrigin: true,
        pathRewrite: {
          "^/ans": ""
        }
      }
    },
    host: "0.0.0.0",//地址
    port: 8083,//端口
  }

这样就配置完成了 记得重启项目

页面数据说明

data() {
    return {
      nowTime:"",//现在时间
      txdata:[],//腾讯疫情网数据
      heal: 0,//治愈
      dead: 0,//死亡
      chinaTotal: 0,//中国总确诊
      chinaAdd: 0,//新增
      chinaNow: 0,//现存
      datas: [],//中国疫情网数据
      lastTime: "",//最后更新时间
      check: 0,//当前地图选择 新增/总/现存
      isLoading: false,//是否正在加载
      isChina: false,//是否为中国数据 (这里没有用,后面拓展全球地图再用)
      timer:"",//定时器,实时获取时间
      tables:[]//表格数据
    };
  },

发送请求

axios.post(`/api/getDisease.html`)
 axios.post('ans')

这里其实是请求了https://www.ncovchina.com/data/getDisease.htmlhttps://www.ncovchina.com/data/getDisease.html复制到地址栏也能查看数据

为什么会有两个地址 因为中国疫情网没有历史数据所以找了腾讯的 大家也可以自己找接口 腾讯疫情网 :https://news.qq.com/zt2020/page/feiyan.htm#/?nojump=1 中国疫情网:https://www.ncovchina.com/data.html 可以尝试只用腾讯疫情网的 我是懒得改

处理数据

getTx(){
      return new Promise(resolve => {
        axios.post('ans').then(res=>{
          console.log(res.data.data.chinaDayAddList);
          resolve(res.data.data.chinaDayAddList);
        })
      })
    },

axios.post(`/api/getDisease.html`).then(res => {
        let data = JSON.parse(res.data.data);
        let dss = data.areaTree[0].children;//通过查看数据得知我们需要的数据所在地
        this.datas = dss;
        console.log(data)
        this.chinaTotal = data.chinaTotal.confirm;//获取累计确诊
        this.chinaAdd = data.chinaAdd.confirm;//新增
        this.chinaNow = data.chinaTotal.nowConfirm;//现存
        this.heal = data.chinaTotal.heal;//治愈
        this.dead = data.chinaTotal.dead;//死亡
        this.lastTime = data.lastUpdateTime;//最后更新时间
        this.isLoading = false;//加载结束
        let vm = this;
        this.getTx().then(ress=>{//获取历史数据
          vm.txdata = ress;
          this.setChartTwo();//绘制左下
        })
        this.setEcs(this.check);
        let citys = [];
        dss.forEach(item=>{//处理数据
          item.children.forEach((items,index)=>{
            if(items.name =="境外输入"){
              item.children[index].name = item.name+items.name;
            }
            if(items.name =="地区待确认"){
              item.children[index].name = items.name+"("+item.name+")";
            }
            item.children[index].sf = item.name;
          })
          citys= citys.concat(item.children);
        });
        console.log(citys);
        this.tables = citys;//表格数据获取
        this.setChartThree();//绘制右上饼图
        this.setChartOne();//绘制左上柱状图 我是先做的右边的图
      });

图形绘制

看之前得对echarts有点了解 不了解可以百度 或者去echarts官网查看 https://echarts.apache.org/zh/index.html

左上柱状图

解释看代码后的注释

setChartOne(){
      let city = [];//城市名
      let adds = [];//新增
      let now = [];//现存
      // let sum = [];
      // let heal = [];
      // let dead = [];
      for(let i=0;i<7;i++){//添加数据 只添加前几个 有需要修改for循环次数
        let datas = this.datas[i];
        city.unshift(datas.name);
        adds.unshift(datas.today.confirm);
        now.unshift(datas.total.nowConfirm);
        // sum.unshift(datas.total.confirm);
        // heal.unshift(datas.total.heal);
        // dead.unshift(datas.total.dead);
      }

      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器,坐标轴触发有效
            type: 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
          }
        },
        legend: {
          //原本是五个,数据太大删除了几个,可以在底部全部源码找到 或者顶部github地址下载
          // ['新增', '现存', '累计确诊', '累计治愈', '死亡']
          data: ['新增', '现存'],//
          textStyle:{
            color:"black"
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
          textStyle:{
            color:"black"
          }
        },
        xAxis: {
          type: 'value',
          axisLabel: {
            color: "black" //刻度线标签颜色
          }
        },
        yAxis: {
          type: "category",
          data: city,
          axisLabel: {
            color: "black" //刻度线标签颜色
          }
        },
        series: [
          {
            name: '新增',
            type: 'bar',
            stack: '总量',
            textStyle:{
              color:"black"
            },
            label: {
              textStyle:{
                color:"black"
              },
              show: true,
              position: 'insideRight'
            },
            data: adds //数据 新增
          },
          {
            name: '现存',
            type: 'bar',
            stack: '总量',
            label: {
              show: true,//显示数据
              position: 'insideRight'
            },
            data: now//数据 现存
          }
        ]
      };
      let myChart = echarts.init(this.$refs.chartOne);
      myChart.setOption(option);
    },

左下折线图

代码和左上柱状图类似

setChartTwo() {
      let datas = this.txdata.slice(-7);
      let dates = [];
      let confirm = [];
      datas.forEach(item => {
        dates.push(item.date);
        confirm.push(item.confirm);
      });
      console.log(dates);
      let option = {
        title: {
          text: "新增速率",
          subtext: "来源自腾讯疫情网",
          left: "center",
          textStyle: {
            color: "black" //标题颜色
          },
          subtextStyle: {
            color: "black" //副标题颜色
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: dates,
          axisLabel: {
            color: "black" //刻度线标签颜色
          }
        },
        yAxis: {
          type: "value",
          axisLabel: {
            color: "black" //刻度线标签颜色
          }
        },
        series: [
          {
            data: confirm,
            label: {
              show: true,
              color: "black"
            },
            type: "line",
            areaStyle: {}
          }
        ]
      };

      let myChart = echarts.init(this.$refs.chartTwo);
      myChart.setOption(option);
    },

右上饼图绘制

代码解释看上面两个图的绘制解释 看完你就懂这个了 不再解释(我是懒蛋哈士奇)

setChartThree() {
      let datas = [
        { value: this.chinaAdd, name: "新增" },
        { value: this.chinaNow, name: "现存" },
        { value: this.dead, name: "累计死亡" },
        { value: this.heal, name: "累计治愈" },
        { value: this.chinaTotal, name: "累计确诊" }
      ];
      let names = ["新增", "现存", "累计死亡", "累计治愈", "累计确诊"];
      let option = {
        title: {
          text: "疫情数据",
          subtext: "来自疫情网",
          left: "center",
          textStyle: {
            color: "black"
          }
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          type: "scroll",
          orient: "vertical",
          textStyle: {
            color: "black"
          },
          right: 10,
          top: 20,
          bottom: 20,
          data: names
        },
        series: [
          {
            name: "数据",
            type: "pie",
            radius: "55%",
            center: ["40%", "50%"],
            data: datas,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  formatter: "{b} : {c}"
                },
                labelLine: { show: true }
              }
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      };
      let myChart = echarts.init(this.$refs.chartThree);
      myChart.setOption(option);
    },

左下表格

代码定位 vue疫情大屏数据展示+数据导出+地图图片下载使用了element的表格 官网手册 : element表格

 <el-table
              id="out-table"//表格id
              v-loading="isLoading"//绑定加载
              height="45vh"//高度
              :data="tables"//数据绑定
              style="width: 100%"
              :default-sort="{ prop: 'total.nowConfirm', order: 'descending' }"
            >//默认排序total.nowConfirm 降序
              <el-table-column prop="sf" label="省份" sortable width="80">
              </el-table-column>
              <el-table-column prop="name" label="城市" sortable width="150">
              </el-table-column>
              <el-table-column
                prop="today.confirm"
                label="新增"
                sortable
                width="100"
              >
              </el-table-column>
              <el-table-column
                prop="total.nowConfirm"
                label="现存"
                width="100"
                sortable
              >
              </el-table-column>
              <el-table-column
                prop="total.grade"
                label="区域风险"
                width="120"
                sortable
              >
              </el-table-column>
              <el-table-column
                prop="total.confirm"
                label="总确诊"
                width="100"
                sortable
              >
              </el-table-column>
              <el-table-column
                prop="total.heal"
                label="治愈"
                width="100"
                sortable
              >
              </el-table-column>
              <el-table-column
                prop="total.dead"
                label="死亡"
                width="100"
                sortable
              >
              </el-table-column>
            </el-table>

表格导出功能

<el-button type="info" @click="exportExcel">导出数据</el-button>
exportExcel() {
      /* out-table关联导出的dom节点  */
      let wbdom = XLSX.utils.table_to_book(document.querySelector("#out-table"));//这里导出id为out-table的
      /* get binary string as output */
      let wbout = XLSX.write(wbdom, {
        bookType: "xlsx",//导出格式
        bookSST: true,
        type: "array"
      });
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream" }),
          "疫情数据.xlsx"//导出文件名
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },

全部代码

太多不再展示 有需要去github下载 github地址 https://github.com/dmhsq/vue-epidemic--big-screen 下载地址 https://github.com/dmhsq/vue-epidemic--big-screen/archive/main.zip







  大家好,我是代码哈士奇,是一名软件学院网络工程的学生,因为我是“狗”,狗走千里吃肉。想把大学期间学的东西和大家分享,和大家一起进步。但由于水平有限,博客中难免会有一些错误出现,有纰漏之处恳请各位大佬不吝赐教!暂时只在csdn这一个平台进行更新,博客主页:https://blog.csdn.net/qq_42027681

未经本人允许,禁止转载

vue疫情大屏数据展示+数据导出+地图图片下载


后续会推出

前端:vue入门 vue开发小程序 等 后端: java入门 springboot入门等 服务器:mysql入门 服务器简单指令 云服务器运行项目 一些插件的使用等

大学之道亦在自身,努力学习,热血青春 如果对编程感兴趣可以加入我们的qq群一起交流:974178910

有问题可以下方留言,看到了会回复哦

收藏
评论区

相关推荐

🎉无人维护?官方打脸:Element UI for Vue 3.0 来了!🎊
Element 开发团队宣布正式发布 Element Plus 的首个 beta 版本,Element Plus 是 Element 对 Vue 3.0 的升级适配。此前网上有传言称 Element 无人维护,Element UI 也不会支持 Vue 3.0,这次官方出来打脸了。 image(https://imghelloworld.ossc
教你用200行代码写一个爱豆拼拼乐H5小游戏(附源码)
前言 本文将带大家一步步实现一个H5拼图小游戏,考虑到H5游戏的轻量级和代码体积,我没有使用react或vue这些框架,而采用我自己写的dom库和原生javascript来实现业务功能,具体库代码可见我的文章如何用不到200行代码写一款属于自己的js类库(https://juejin.im/post/6844903880707293198),构建工具我采
02-Vue入门之数据绑定
02Vue入门之数据绑定 02Vue入门之数据绑定 2.1. 什么是双向绑定? Vue框架很核心的功能就是双向的数据绑定。 双向是指:HTML标签数据 绑定到 Vue对象,另外反方向数
VUE+Element国际化(vue-il8n)实现多语言
1.安装:npm install vuei18n 2.在main.js引入i18n,注册,并设置element语言 import i18n from './lang' // set ElementUI lang ,兼容elementui写法 Vue.use(ElementUI, { i18n: (key, value) i18n.t(key, v
基于Vue实现一个有点意思的拼拼乐小游戏
笔者去年曾写过一个类似的拼拼乐小游戏,技术栈采用自己的Xuery框架和原生javascript实现的,脚手架采用gulp来实现,为了满足对vue的需求,笔者再次使用vue生态将其重构,脚手架采用比较火的vuecli。 前言 为了加深大家对vue的了解和vue项目实战,笔者采用vue生态来重构此项目,方便大家学习和探索。技术栈如下: vuecli4
vue疫情大屏数据展示+数据导出+地图图片下载
不废话,先上效果图 审美有限 下午5点开工 去掉吃饭时间 我的审美也只能让我做到这一步哈哈 在线体验地址 http://www.zczyp.top/big//(http://www.zczyp.top/big//) 有需要可以去github下载 github上代码是不加注释的 看注释在这个文章 github地址 https://github
Vue 包大小优化
一、背景 最近做了一个网站,uidea(https://uidea.tools/),是用来辅助独立开发者做一些 UI 设计的,当时只管开发,等部署完以后,发现访问速度堪忧 毕竟是个小水管服务器,相比提高带宽,还是先看看代码上能不能优化一下,性价比更高 这个是优化前的包大小,这家伙都上 1.72 M 了,小水管加载时间直接往 3s 以上走了,臣妾扛
Vue 项目性能优化—实践指南
Vue 项目性能优化—实践指南 前言 Vue 框架通过数据双向绑定和虚拟 DOM 技术,帮我们处理了前端开发中最脏最累的 DOM 操作部分, 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM;但 Vue 项目中仍然存在项目首屏优化、Webpack 编译配置优化等问题,所以我们仍然需要去关注 Vue 项目性能方面的优化,使项目具有更高效
uni-app/vue 结合element ui实现菜单分类导航(类似于小米商城首页的分类导航那种)
效果如下 数据来源为uniCloud云数据库 照片来源为网络 代码来源为我的毕业设计 在这里插入图片描述(https://imghelloworld.osscnbeijing.aliyuncs.com/68857ab4a9c485bbbd98c94ad98fb490.png) 鼠标未放到软件上面之前 在这里插入图片描述(ht
vue: 解决vuex页面刷新数据丢失问题
一、问题描述 1、一般在登录成功的时候需要把用户信息,菜单信息放置 vuex 中,作为全局的共享数据。但是在页面刷新的时候 vuex 里的数据会重新初始化,导致数据丢失。因为 vuex 里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载 vue 实例,vuex 里面的数据就会被清空。 2、我在一个组件(例如登录组件页面)中登录了后,其它页面要怎
前端技术栈:5分钟入门VUE+Element UI
目录前端技术栈:5分钟入门VUEElement UI前言2021了,VUE都出3.0了,还不开始学习VUE?那不是一个全栈攻城狮的自我修养,虽然VUE出3.0了,但是入门还是建议VUE2.0 Element UI,毕竟3.0还要等养肥了在学,现在教程太少,学习2.0之后在学3.0也能更加理解为什么要这么去改进VUE是啥?简单来说就是
Vue.js的图片加载性能优化你可以试试
前言图片加载优化对于一个网站性能好坏起着至关重要的作用。所以我们使用Vue来操作一波。备注以下的优化一、优化二栏目都是我自己封装在Vue的工具函数里,所以请认真看完,要不然直接复制的话,容易出错的。资源 Vue.js Element UI 优化一:图片加载动画只有当图片加载完成后才可以显示图片,加载动画结束。我们使用Element UI
使用Vue封装一个实用的人脸识别组件
❝ 欢迎阅读本博文,本文主要讲述【使用Vue封装一个实用的人脸识别组件】,文字通俗易懂,如有不妥,还请多多指正。 ❞在这里插入图片描述前言人脸识别技术现在越来越火,那么我们今天教大家实现一个人脸识别组件。资源 element UI Vue.js trackingmin.js facemin.js 源码由于我们
vue+ts项目对app类型限制
描述做一个ts+vue+elementplus项目的时候总是有警告 消除警告 1. 将src/plugins/element.js文件后缀名改成ts 2. 在element里面还要对脚手架现有的代码进行类型限制 在element.ts中引入jsimport App from 'vue' 在element.ts中 对参数app和函数返回值进行类型限制jse
vue项目无配置文件解决方案
问题在开发vue项目时,需要重新设置项目的启动端口,发现项目目录中并没有相关的配置文件【config目录】vue脚手架版本【通过vue version查询】:@vue/cli 4.5.13解决方案在vue项目根目录下创建vue.config.js配置文件vue.config.jsmodule.exports devServer: d