疫情可视化

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)
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/yongyuandishen/p/14904883.html