不废话，先上效果图 审美有限 下午5点开工 去掉吃饭时间 我的审美也只能让我做到这一步哈哈 在线体验地址 http://www.zczyp.top/big/#/ 有需要可以去github下载 github上代码是不加注释的 看注释在这个文章 github地址 https://github.com/dmhsq/vue-epidemic--big-screen
本来是想做那种科技风的，怎奈审美有限，又不想用别人的图片哈哈 下载的疫情地图如下
页面布局
使用了element的布局 官网手册地址
将页面分成三部分
第一部分就是左侧两个图
第二部分就是中间部分
第三部分就是右侧图和表格
页面代码（非全部代码）
地图绘制说明
地图那一块我是直接复制之前写过的代码 所以看之前那个文章就行 vue疫情图
代码都一模一样的 没有改
数据获取
数据的获取和之前的疫情图一样 文章跳转：vue疫情图 地图那一块我是直接复制之前写过的代码 所以看之前那个文章就行 vue疫情图
这里再讲一次（看过的可以忽略）
配置代理(解决跨域)
生成环境记得配置nginx
在vue.config.js中
1devServer: { 2 proxy: { 3 "/api": { //发送请求时/api会被识别成https://www.ncovchina.com/data 下面一样 4 target: "https://www.ncovchina.com/data", 5 changeOrigin: true, 6 pathRewrite: { 7 "^/api": "" 8 } 9 }, 10 "/ans": { 11 target: "https://api.inews.qq.com/newsqa/v1/query/inner/publish/modules/list?modules=chinaDayList,chinaDayAddList,nowConfirmStatis,provinceCompare", 12 changeOrigin: true, 13 pathRewrite: { 14 "^/ans": "" 15 } 16 } 17 }, 18 host: "0.0.0.0",//地址 19 port: 8083,//端口 20 }
这样就配置完成了 记得重启项目 <br /><br />
页面数据说明
1data() { 2 return { 3 nowTime:"",//现在时间 4 txdata:[],//腾讯疫情网数据 5 heal: 0,//治愈 6 dead: 0,//死亡 7 chinaTotal: 0,//中国总确诊 8 chinaAdd: 0,//新增 9 chinaNow: 0,//现存 10 datas: [],//中国疫情网数据 11 lastTime: "",//最后更新时间 12 check: 0,//当前地图选择 新增/总/现存 13 isLoading: false,//是否正在加载 14 isChina: false,//是否为中国数据 （这里没有用，后面拓展全球地图再用） 15 timer:"",//定时器，实时获取时间 16 tables:[]//表格数据 17 }; 18 },
发送请求
1axios.post(`/api/getDisease.html`) 2 axios.post('ans')
这里其实是请求了https://www.ncovchina.com/data/getDisease.html 将https://www.ncovchina.com/data/getDisease.html复制到地址栏也能查看数据
为什么会有两个地址 因为中国疫情网没有历史数据所以找了腾讯的 大家也可以自己找接口 腾讯疫情网 ：https://news.qq.com/zt2020/page/feiyan.htm#/?nojump=1 中国疫情网：https://www.ncovchina.com/data.html 可以尝试只用腾讯疫情网的 我是懒得改
处理数据
1getTx(){ 2 return new Promise(resolve => { 3 axios.post('ans').then(res=>{ 4 console.log(res.data.data.chinaDayAddList); 5 resolve(res.data.data.chinaDayAddList); 6 }) 7 }) 8 }, 9 10axios.post(`/api/getDisease.html`).then(res => { 11 let data = JSON.parse(res.data.data); 12 let dss = data.areaTree[0].children;//通过查看数据得知我们需要的数据所在地 13 this.datas = dss; 14 console.log(data) 15 this.chinaTotal = data.chinaTotal.confirm;//获取累计确诊 16 this.chinaAdd = data.chinaAdd.confirm;//新增 17 this.chinaNow = data.chinaTotal.nowConfirm;//现存 18 this.heal = data.chinaTotal.heal;//治愈 19 this.dead = data.chinaTotal.dead;//死亡 20 this.lastTime = data.lastUpdateTime;//最后更新时间 21 this.isLoading = false;//加载结束 22 let vm = this; 23 this.getTx().then(ress=>{//获取历史数据 24 vm.txdata = ress; 25 this.setChartTwo();//绘制左下 26 }) 27 this.setEcs(this.check); 28 let citys = []; 29 dss.forEach(item=>{//处理数据 30 item.children.forEach((items,index)=>{ 31 if(items.name =="境外输入"){ 32 item.children[index].name = item.name+items.name; 33 } 34 if(items.name =="地区待确认"){ 35 item.children[index].name = items.name+"("+item.name+")"; 36 } 37 item.children[index].sf = item.name; 38 }) 39 citys= citys.concat(item.children); 40 }); 41 console.log(citys); 42 this.tables = citys;//表格数据获取 43 this.setChartThree();//绘制右上饼图 44 this.setChartOne();//绘制左上柱状图 我是先做的右边的图 45 });
图形绘制
看之前得对echarts有点了解 不了解可以百度 或者去echarts官网查看 https://echarts.apache.org/zh/index.html
左上柱状图
解释看代码后的注释
1setChartOne(){ 2 let city = [];//城市名 3 let adds = [];//新增 4 let now = [];//现存 5 // let sum = []; 6 // let heal = []; 7 // let dead = []; 8 for(let i=0;i<7;i++){//添加数据 只添加前几个 有需要修改for循环次数 9 let datas = this.datas[i]; 10 city.unshift(datas.name); 11 adds.unshift(datas.today.confirm); 12 now.unshift(datas.total.nowConfirm); 13 // sum.unshift(datas.total.confirm); 14 // heal.unshift(datas.total.heal); 15 // dead.unshift(datas.total.dead); 16 } 17 18 let option = { 19 tooltip: { 20 trigger: 'axis', 21 axisPointer: { // 坐标轴指示器，坐标轴触发有效 22 type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' 23 } 24 }, 25 legend: { 26 //原本是五个，数据太大删除了几个，可以在底部全部源码找到 或者顶部github地址下载 27 // ['新增', '现存', '累计确诊', '累计治愈', '死亡'] 28 data: ['新增', '现存'],// 29 textStyle:{ 30 color:"black" 31 } 32 }, 33 grid: { 34 left: '3%', 35 right: '4%', 36 bottom: '3%', 37 containLabel: true, 38 textStyle:{ 39 color:"black" 40 } 41 }, 42 xAxis: { 43 type: 'value', 44 axisLabel: { 45 color: "black" //刻度线标签颜色 46 } 47 }, 48 yAxis: { 49 type: "category", 50 data: city, 51 axisLabel: { 52 color: "black" //刻度线标签颜色 53 } 54 }, 55 series: [ 56 { 57 name: '新增', 58 type: 'bar', 59 stack: '总量', 60 textStyle:{ 61 color:"black" 62 }, 63 label: { 64 textStyle:{ 65 color:"black" 66 }, 67 show: true, 68 position: 'insideRight' 69 }, 70 data: adds //数据 新增 71 }, 72 { 73 name: '现存', 74 type: 'bar', 75 stack: '总量', 76 label: { 77 show: true,//显示数据 78 position: 'insideRight' 79 }, 80 data: now//数据 现存 81 } 82 ] 83 }; 84 let myChart = echarts.init(this.$refs.chartOne); 85 myChart.setOption(option); 86 },
左下折线图
代码和左上柱状图类似
1setChartTwo() { 2 let datas = this.txdata.slice(-7); 3 let dates = []; 4 let confirm = []; 5 datas.forEach(item => { 6 dates.push(item.date); 7 confirm.push(item.confirm); 8 }); 9 console.log(dates); 10 let option = { 11 title: { 12 text: "新增速率", 13 subtext: "来源自腾讯疫情网", 14 left: "center", 15 textStyle: { 16 color: "black" //标题颜色 17 }, 18 subtextStyle: { 19 color: "black" //副标题颜色 20 } 21 }, 22 xAxis: { 23 type: "category", 24 boundaryGap: false, 25 data: dates, 26 axisLabel: { 27 color: "black" //刻度线标签颜色 28 } 29 }, 30 yAxis: { 31 type: "value", 32 axisLabel: { 33 color: "black" //刻度线标签颜色 34 } 35 }, 36 series: [ 37 { 38 data: confirm, 39 label: { 40 show: true, 41 color: "black" 42 }, 43 type: "line", 44 areaStyle: {} 45 } 46 ] 47 }; 48 49 let myChart = echarts.init(this.$refs.chartTwo); 50 myChart.setOption(option); 51 },
右上饼图绘制
代码解释看上面两个图的绘制解释 看完你就懂这个了 不再解释（我是懒蛋哈士奇）
1setChartThree() { 2 let datas = [ 3 { value: this.chinaAdd, name: "新增" }, 4 { value: this.chinaNow, name: "现存" }, 5 { value: this.dead, name: "累计死亡" }, 6 { value: this.heal, name: "累计治愈" }, 7 { value: this.chinaTotal, name: "累计确诊" } 8 ]; 9 let names = ["新增", "现存", "累计死亡", "累计治愈", "累计确诊"]; 10 let option = { 11 title: { 12 text: "疫情数据", 13 subtext: "来自疫情网", 14 left: "center", 15 textStyle: { 16 color: "black" 17 } 18 }, 19 tooltip: { 20 trigger: "item", 21 formatter: "{a} <br/>{b} : {c} ({d}%)" 22 }, 23 legend: { 24 type: "scroll", 25 orient: "vertical", 26 textStyle: { 27 color: "black" 28 }, 29 right: 10, 30 top: 20, 31 bottom: 20, 32 data: names 33 }, 34 series: [ 35 { 36 name: "数据", 37 type: "pie", 38 radius: "55%", 39 center: ["40%", "50%"], 40 data: datas, 41 itemStyle: { 42 normal: { 43 label: { 44 show: true, 45 formatter: "{b} : {c}" 46 }, 47 labelLine: { show: true } 48 } 49 }, 50 emphasis: { 51 itemStyle: { 52 shadowBlur: 10, 53 shadowOffsetX: 0, 54 shadowColor: "rgba(0, 0, 0, 0.5)" 55 } 56 } 57 } 58 ] 59 }; 60 let myChart = echarts.init(this.$refs.chartThree); 61 myChart.setOption(option); 62 },
左下表格
代码定位
使用了element的表格 官网手册 ： element表格
1 <el-table 2 id="out-table"//表格id 3 v-loading="isLoading"//绑定加载 4 height="45vh"//高度 5 :data="tables"//数据绑定 6 style="width: 100%" 7 :default-sort="{ prop: 'total.nowConfirm', order: 'descending' }" 8 >//默认排序total.nowConfirm 降序 9 <el-table-column prop="sf" label="省份" sortable width="80"> 10 </el-table-column> 11 <el-table-column prop="name" label="城市" sortable width="150"> 12 </el-table-column> 13 <el-table-column 14 prop="today.confirm" 15 label="新增" 16 sortable 17 width="100" 18 > 19 </el-table-column> 20 <el-table-column 21 prop="total.nowConfirm" 22 label="现存" 23 width="100" 24 sortable 25 > 26 </el-table-column> 27 <el-table-column 28 prop="total.grade" 29 label="区域风险" 30 width="120" 31 sortable 32 > 33 </el-table-column> 34 <el-table-column 35 prop="total.confirm" 36 label="总确诊" 37 width="100" 38 sortable 39 > 40 </el-table-column> 41 <el-table-column 42 prop="total.heal" 43 label="治愈" 44 width="100" 45 sortable 46 > 47 </el-table-column> 48 <el-table-column 49 prop="total.dead" 50 label="死亡" 51 width="100" 52 sortable 53 > 54 </el-table-column> 55 </el-table>
表格导出功能
1<el-button type="info" @click="exportExcel">导出数据</el-button>
1exportExcel() { 2 /* out-table关联导出的dom节点 */ 3 let wbdom = XLSX.utils.table_to_book(document.querySelector("#out-table"));//这里导出id为out-table的 4 /* get binary string as output */ 5 let wbout = XLSX.write(wbdom, { 6 bookType: "xlsx",//导出格式 7 bookSST: true, 8 type: "array" 9 }); 10 try { 11 FileSaver.saveAs( 12 new Blob([wbout], { type: "application/octet-stream" }), 13 "疫情数据.xlsx"//导出文件名 14 ); 15 } catch (e) { 16 if (typeof console !== "undefined") console.log(e, wbout); 17 } 18 return wbout; 19 },
全部代码
太多不再展示 有需要去github下载 github地址 https://github.com/dmhsq/vue-epidemic--big-screen 下载地址 https://github.com/dmhsq/vue-epidemic--big-screen/archive/main.zip
<br><br><br><br><br><br>
大家好，我是代码哈士奇，是一名软件学院网络工程的学生，因为我是“狗”，狗走千里吃肉。想把大学期间学的东西和大家分享，和大家一起进步。但由于水平有限，博客中难免会有一些错误出现，有纰漏之处恳请各位大佬不吝赐教！暂时只在csdn这一个平台进行更新，博客主页：https://blog.csdn.net/qq_42027681。
未经本人允许，禁止转载
后续会推出
前端：vue入门 vue开发小程序 等 后端： java入门 springboot入门等 服务器：mysql入门 服务器简单指令 云服务器运行项目 一些插件的使用等
大学之道亦在自身，努力学习，热血青春 如果对编程感兴趣可以加入我们的qq群一起交流：974178910
有问题可以下方留言，看到了会回复哦