文章目录

0 前言

Hi，大家好，今天给大家介绍一个大数据可视化项目，大家可以用于自己的课设或毕设，可以灵活耦合任意数据，为自己的项目添加灵活的可视化动态效果！

今天要分享的是：基于大数据的全国疫情实时监控大屏系统设计与实现

1 介绍

大数据大屏可视化系列：基于大数据的全国疫情实时监控大屏系统设计与实现

可搭载任意自己想用的数据，动态效果不错

项目源码：/download/Seniors_DC/85662285

2 实现效果

整体实现效果如下，可以看到CSS优化相对漂亮的，而且动态效果也很好，适合搭载各种数据。

3 部分关键代码

// ----------中2的配置项-------------------//var option = {title: {text: '',},tooltip: {trigger: 'item'},visualMap: {// 左侧小导航图标show: true,x: 'left',y: 'bottom',textStyle: {fontSize: 8,},splitList: [{start: 1,end: 9 },{start: 10, end: 99 },{start: 100, end: 999 },{start: 1000, end: 9999 },{start: 10000 }],color: ['#8A3310', '#C64918', '#E55B25', '#F2AD92', '#F9DCD1']},series: [{name: '累计确诊人数',type: 'map',mapType: 'china',roam: false, // 禁用拖动和缩放itemStyle: {// 图形样式normal: {borderWidth: .5, //区域边框宽度borderColor: '#009fe8', //区域边框颜色areaColor: "#ffefd5", //区域颜色},emphasis: {// 鼠标滑过地图高亮的相关设置borderWidth: .5,borderColor: '#4b0082',areaColor: "#fff",}},label: {// 图形上的文本标签normal: {show: true, //省份名称fontSize: 8,},emphasis: {show: true,fontSize: 8,}},data:[] // [{'name': '上海', 'value': 318}, {'name': '云南', 'value': 162}]}]};// ----------左1的配置项-------------------var option = {title: {text: "全国累计趋势",textStyle: {color: 'white',},left: 'left',},tooltip: {trigger: 'axis',//指示器axisPointer: {type: 'line',lineStyle: {color: '#7171C6'}},},//图例legend: {data: ['累计确诊', "累计治愈", "累计死亡"],left: "right"},//图形位置grid: {left: '4%',right: '6%',bottom: '4%',top: 50,containLabel: true},xAxis: [{type: 'category',data: [] //['03.20', '03.21', '03.22']}],yAxis: [{type: 'value',//y轴字体设置axisLabel: {show: true,color: 'white',fontSize: 12,formatter: function(value) {if (value >= 1000) {value = value / 1000 + 'k';}return value;}},//y轴线设置显示axisLine: {show: true},//与x轴平行的线样式splitLine: {show: true,lineStyle: {color: '#17273B',width: 1,type: 'solid',}}}],series: [{name: "累计确诊",type: 'line',smooth: true,data: []//[260, 406, 529]}, {name: "累计治愈",type: 'line',smooth: true,data: []//[25, 25, 25]}, {name: "累计死亡",type: 'line',smooth: true,data: []//[6, 9, 17]}]};// ----------左2的配置项-------------------var option = {title: {text: '全国新增趋势',textStyle: {color: 'white',},left: 'left',},tooltip: {trigger: 'axis',//指示器axisPointer: {type: 'line',lineStyle: {color: '#7171C6'}},},//图例legend: {data: ['新增确诊', '新增疑似'],left: 'right'},//图形位置grid: {left: '4%',right: '6%',bottom: '4%',top: 50,containLabel: true},xAxis: [{type: 'category',data: [] // ['03.20', '03.21', '03.22']}],yAxis: [{type: 'value',//y轴字体设置axisLabel: {show: true,color: 'white',fontSize: 12,formatter: function(value) {if (value >= 1000) {value = value / 1000 + 'k';}return value;}},//y轴线设置显示axisLine: {show: true},//与x轴平行的线样式splitLine: {show: true,lineStyle: {color: '#17273B',width: 1,type: 'solid',}}}],series: [{name: '新增确诊',type: 'line',smooth: true,data: [] // [20, 406, 529]}, {name: '新增疑似',type: 'line',smooth: true,data: [] // [25, 75, 122]}]};// ----------右1的配置项-------------------var option = {title: {text: "全国确诊省市TOP10",textStyle: {color: 'white',},left: 'left'},color: ['#3398DB'],tooltip: {trigger: 'axis',//指示器axisPointer: {type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'}},xAxis: {type: 'category',data: [] // ['湖北','广州','北京']},yAxis: {type: 'value',//y轴字体设置axisLabel: {show: true,color: 'white',fontSize: 12,formatter: function(value) {if (value >= 1000) {value = value / 1000 + 'k';}return value;}},},series: [{data: [], // [582, 300, 100]type: 'bar',barMaxWidth: "50%"}]};// ----------右2的配置项-------------------var option = {title: {text: "境外输入省市TOP5",textStyle: {color: 'white',},left: 'left'},tooltip: {trigger: 'axis',//指示器axisPointer: {type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'}},xAxis: {type: 'category',data: [] // ['湖北','广州','北京']},yAxis: {type: 'value',//y轴字体设置axisLabel: {show: true,color: 'white',fontSize: 12,formatter: function(value) {if (value >= 1000) {value = value / 1000 + 'k';}return value;}},},series: [{data: [], // [582, 300, 100]type: 'bar',barMaxWidth: "50%"}]};

篇幅有限仅展示关键代码

4 项目源码获取方式

项目源码下载：/download/Seniors_DC/85662285