1.html代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="IE=100" /> <title>疫情监控</title> <script src="../static/js/jquery-1.11.1.min.js"></script> <script src="../static/js/echarts.min.js"></script> <script src="../static/js/china.js"></script> <link href="../static/css/main.css" rel="stylesheet"/> </head> <body> <div id="gyroContain"> <div id="title">全国疫情实时追踪</div> <div id="tim"></div> <div id="l1"></div> <div id="l2"></div> <div id="c1"> <div class="num"><h1></h1></div> <div class="num"><h1></h1></div> <div class="num"><h1></h1></div> <div class="num"><h1></h1></div> <div class="txt"><h2>累计确诊</h2></div> <div class="txt"><h2>剩余疑似</h2></div> <div class="txt"><h2>累计治愈</h2></div> <div class="txt"><h2>累计死亡</h2></div> </div> <div id="c2"></div> <div id="r1"></div> <div id="r2"></div> </div> <script src="../static/js/ec_center.js"></script> <script src="../static/js/ec_left1.js"></script> <script src="../static/js/ec_left2.js"></script> <script src="../static/js/ec_right1.js"> </script> <script src="../static/js/ec_right2.js"></script> <script src="../static/js/controller.js"> </script> </body> </html>
2.js代码
function gettime() { $.ajax({ url: "/time", timeout: 10000, //超时时间设置为10秒； success: function(data) { $("#tim").html(data) }, error: function(xhr, type, errorThrown) { } }); } function get_c1_data() { $.ajax({ url: "/c1", success: function(data) { $(".num h1").eq(0).text(data.confirm); $(".num h1").eq(1).text(data.suspect); $(".num h1").eq(2).text(data.heal); $(".num h1").eq(3).text(data.dead); }, error: function(xhr, type, errorThrown) { } }) } function get_c2_data() { $.ajax({ url:"/c2", success: function(data) { ec_center_option.series[0].data=data.data ec_center.setOption(ec_center_option) }, error: function(xhr, type, errorThrown) { } }) } function get_l1_data() { $.ajax({ url:"/l1", success: function(data) { ec_left1_Option.xAxis[0].data=data.day ec_left1_Option.series[0].data=data.confirm ec_left1_Option.series[1].data=data.suspect ec_left1_Option.series[2].data=data.heal ec_left1_Option.series[3].data=data.dead ec_left1.setOption(ec_left1_Option) }, error: function(xhr, type, errorThrown) { } }) } function get_l2_data() { $.ajax({ url:"/l2", success: function(data) { ec_left2_Option.xAxis[0].data=data.day ec_left2_Option.series[0].data=data.confirm_add ec_left2_Option.series[1].data=data.suspect_add ec_left2.setOption(ec_left2_Option) }, error: function(xhr, type, errorThrown) { } }) } function get_r1_data() { $.ajax({ url: "/r1", success: function (data) { ec_right1_option.xAxis.data=data.city; ec_right1_option.series[0].data=data.confirm; ec_right1.setOption(ec_right1_option); } }) } function get_r2_data() { $.ajax({ url:"/r2", success:function (data) { ec_right2_option.series[0].data=data.data ec_right2.setOption(ec_right2_option) }, error:function (xhr,type,errorThrown) { } }) } gettime() get_c1_data() get_c2_data() get_l1_data() get_l2_data() get_r1_data() get_r2_data() setInterval(gettime,1000) setInterval(get_c1_data,1000*10) setInterval(get_c2_data,10000*10) setInterval(get_l1_data,10000*10) setInterval(get_l2_data,10000*10) setInterval(get_r1_data,10000*10) setInterval(get_r2_data,10000*10)
var ec_left1 = echarts.init(document.getElementById('l1'), "dark"); var ec_left1_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: [] }], 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', 1, type: 'solid', } } }], series: [{ name: "累计确诊", type: 'line', smooth: true, data: [] }, { name: "现有疑似", type: 'line', smooth: true, data: [] }, { name: "累计治愈", type: 'line', smooth: true, data: [] }, { name: "累计死亡", type: 'line', smooth: true, data: [] }] }; ec_left1.setOption(ec_left1_Option)
var ec_center = echarts.init(document.getElementById('c2'), "dark"); var ec_center_option = { title: { text: '全国累计确诊地图', subtext: '', x: 'left' }, 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:[] }] }; ec_center.setOption(ec_center_option)
var ec_left2 = echarts.init(document.getElementById('l2'), "dark"); var ec_left2_Option = { tooltip: { trigger: 'axis', //指示器 axisPointer: { type: 'line', lineStyle: { color: '#7171C6' } }, }, legend: { data: ['新增确诊', '新增疑似'], left: "right" }, //标题样式 title: { text: "全国新增趋势", textStyle: { color: 'white', }, left: 'left' }, //图形位置 grid: { left: '4%', right: '6%', bottom: '4%', top: 50, containLabel: true }, xAxis: [{ type: 'category', data: [] }], yAxis: [{ type: 'value', //y轴字体设置 //y轴线设置显示 axisLine: { show: true }, axisLabel: { show: true, color: 'white', fontSize: 12, formatter: function(value) { if (value >= 1000) { value = value / 1000 + 'k'; } return value; } }, //与x轴平行的线样式 splitLine: { show: true, lineStyle: { color: '#17273B', 1, type: 'solid', } } }], series: [{ name: "新增确诊", type: 'line', smooth: true, data: [] }, { name: "新增疑似", type: 'line', smooth: true, data: [] }] }; ec_left2.setOption(ec_left2_Option)
var ec_right1 = echarts.init(document.getElementById('r1'),"dark"); var ec_right1_option = { //标题样式 title : { text : "全国新增确诊病例数量TOP5", textStyle : { color : 'white', }, left : 'left' }, color: ['#3398DB'], tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器，坐标轴触发有效 type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' } }, xAxis: { type: 'category', data: [] }, yAxis: { type: 'value' }, series: [{ data: [], type: 'bar', barMaxWidth:"50%" }] }; ec_right1.setOption(ec_right1_option)
var ec_right2 = echarts.init(document.getElementById('r2'), "dark"); var mydata = [{'name': '上海', 'value': 318}, {'name': '云南', 'value': 162}] var ec_right2_option = { title: { text: '今日新增病例地图', subtext: '', x: 'left' }, tooltip: { trigger: 'item' }, //左侧小导航图标 visualMap: { show: true, x: 'left', y: 'bottom', textStyle: { fontSize: 8, }, splitList: [{ start: 0,end: 0 }, {start: 1, end: 5 }, { start: 5, end: 9 }, { start: 10, end: 50 }, { start: 50 }], color: ['#8A3310', '#C64918', '#E55B25', '#F2AD92', '#FFFFFF'] }, //配置属性 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:[] //mydata //数据 }] }; ec_right2.setOption(ec_right2_option)